Theme Debugger
Read the CSS your MKR themes are made of
- theme_json
- theme_css_vars
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.cssfile. 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.
Inputs (25)
| Name | Type | Default | Description |
|---|---|---|---|
| theme_name | STRING | mkr_theme_v1 | — |
| mkr_ink | STRING | #13212f | — |
| mkr_card | STRING | rgba(247,243,235,0.88) | — |
| mkr_card_alt | STRING | rgba(255,250,244,0.96) | — |
| mkr_accent_a | STRING | #2d9c8f | — |
| mkr_accent_b | STRING | #f39f4d | — |
| mkr_accent_c | STRING | #d9573b | — |
| mkr_muted | STRING | #5a6a78 | — |
| mkr_line | STRING | rgba(16,35,45,0.14) | — |
| mkr_shadow_color | STRING | rgba(24,38,53,0.12) | — |
| panel_gradient_start | STRING | #fffdf8 | — |
| panel_gradient_end | STRING | #f3f8fb | — |
| font_family | STRING | "Space Grotesk", "Avenir Next", "Gill Sans Nova", sans-serif | — |
| panel_radius | INT | 180–80 | — |
| section_radius | INT | 130–80 | — |
| input_radius | INT | 90–80 | — |
| panel_padding | INT | 122–64 | — |
| section_padding | INT | 102–64 | — |
| control_gap | INT | 82–48 | — |
| viewport_height | INT | 26080–1200 | — |
| shadow_blur | INT | 300–120 | — |
| animation_ms | INT | 2600–3000 | — |
| button_style | COMBO | soft | 3 options: soft, solid, outline |
| density | COMBO | comfortable | 3 options: compact, comfortable, spacious |
| notesopt | STRING | — |
Outputs (2)
| Name | Type | Description |
|---|---|---|
| theme_json | STRING | — |
| theme_css_vars | STRING | — |