Nodes/MKRShift_Nodes/Theme Debugger
ComfyUI Node

Theme Debugger

Read the CSS your MKR themes are made of

By criskb·Created 7 months ago·Updated 5 months ago· 0
Theme Debugger
    • theme_json
    • theme_css_vars
    theme_namemkr_theme_v1
    mkr_ink#13212f
    mkr_cardrgba(247,243,235,0.88)
    mkr_card_altrgba(255,250,244,0.96)
    mkr_accent_a#2d9c8f
    mkr_accent_b#f39f4d
    mkr_accent_c#d9573b
    mkr_muted#5a6a78
    mkr_linergba(16,35,45,0.14)
    mkr_shadow_colorrgba(24,38,53,0.12)
    panel_gradient_start#fffdf8
    panel_gradient_end#f3f8fb
    font_family"Space Grotesk", "Avenir Next", "Gill Sans Nova", sans-serif
    panel_radius18
    section_radius13
    input_radius9
    panel_padding12
    section_padding10
    control_gap8
    viewport_height260
    shadow_blur30
    animation_ms260
    button_stylesoft
    densitycomfortable
    notes

    MKRThemeDebugger is the most niche node in this batch, and you'll know in one glance whether it's for you. It takes a bucket of color tokens and layout numbers - ink, card, accents, radii, padding - and dumps them out as a theme_json document and a set of CSS variables. That's the whole job. No pixels, no models, no magic.

    Why does that exist? Because the MKRShift Studio nodes (slate, review frame, compare board) are drawn with a theme system, and the pack's frontend extensions are themed too. If you're customizing one of those nodes or building your own frontend against the pack's look, this node is the reference card: it tells you exactly which token maps to which value, in a form you can paste into CSS or a theme file.

    The inputs

    Every one of the ~27 required fields is either a color (hex like #13212f or rgba like rgba(247,243,235,0.88)), a number (radii, padding, shadow blur, animation duration), or a choice (button_style: soft/solid/outline; density: compact/comfortable/spacious). Plus theme_name and an optional notes field. The defaults are a complete, coherent theme - you can run it untouched and get a valid dump.

    The ones that matter if you actually theme: mkr_ink (text), mkr_card/mkr_card_alt (panel backgrounds), mkr_accent_a/b/c (the three accents), mkr_muted, mkr_line, and the radii - panel_radius, section_radius, input_radius are what make the UI feel rounded or sharp.

    What comes out

    • theme_json - everything as a structured JSON document.
    • theme_css_vars - the same values as CSS custom properties, ready to drop into a <style> block or a .css file. This is the output you'll actually want when the goal is "make my extension match the pack."

    Installing it

    In criskb/MKRShift_Nodes from Cris K B. ComfyUI Manager search "MKRShift_Nodes", or:

    cd ComfyUI/custom_nodes
    git clone https://github.com/criskb/MKRShift_Nodes
    

    Restart. No pip requirements, no models.

    Who should skip it

    If you're not touching the pack's frontend or its Studio theme tokens, this node does nothing for you - there's no image output, no preview, nothing visual. It's a developer tool for theme authors, and honestly it's fine for it to be one. Grab it when you're building a custom extension that needs to match the MKR look; otherwise leave it alone and spend your graph space on the nodes that make pictures.

    CategoryMKRShift Nodes/Inspect/Debug

    Inputs (25)

    NameTypeDefaultDescription
    theme_nameSTRINGmkr_theme_v1
    mkr_inkSTRING#13212f
    mkr_cardSTRINGrgba(247,243,235,0.88)
    mkr_card_altSTRINGrgba(255,250,244,0.96)
    mkr_accent_aSTRING#2d9c8f
    mkr_accent_bSTRING#f39f4d
    mkr_accent_cSTRING#d9573b
    mkr_mutedSTRING#5a6a78
    mkr_lineSTRINGrgba(16,35,45,0.14)
    mkr_shadow_colorSTRINGrgba(24,38,53,0.12)
    panel_gradient_startSTRING#fffdf8
    panel_gradient_endSTRING#f3f8fb
    font_familySTRING"Space Grotesk", "Avenir Next", "Gill Sans Nova", sans-serif
    panel_radiusINT180–80
    section_radiusINT130–80
    input_radiusINT90–80
    panel_paddingINT122–64
    section_paddingINT102–64
    control_gapINT82–48
    viewport_heightINT26080–1200
    shadow_blurINT300–120
    animation_msINT2600–3000
    button_styleCOMBOsoft3 options: soft, solid, outline
    densityCOMBOcomfortable3 options: compact, comfortable, spacious
    notesoptSTRING

    Outputs (2)

    NameTypeDescription
    theme_jsonSTRING
    theme_css_varsSTRING