Skip to main content
Create new
Introduction
Reactivity
Props
Logic
Events
Bindings
Lifecycle
Stores
Motion
Transitions
Animations
Easing
SVG
Actions
Classes
Component composition
Context API
Special elements
Module context
Debugging
7GUIs
Miscellaneous
App.svelte
ColorSetting.svelte
styleManager.js
<script>
import ColorSetting from './ColorSetting.svelte';
</script>

<style>
:root {
background-color: var(--bg, lightgray);
}
.note {
color: var(--note-color, tomato);
background-color: var(--note-bg-color, lightgray);
}

.yellow-theme {
--note-color: black;
--note-bg-color: khaki;
}

.purple-note-text {
--note-color: rebeccapurple;
}
</style>

<div>
<h1 class="note" style="font-weight:600">Same as the last example, but applied on the HTML element</h1>

<p>
But the variables we manually set below can still override the dynamic ones.
</p>
<div class="yellow-theme">
<p class="note">For that yellow notepad look.</p>

<p class="note purple-note-text">Or with purple</p>
</div>

import 'svelte/internal/disclose-version';
import 'svelte/internal/flags/legacy';
import * as $ from 'svelte/internal/client';
import ColorSetting from './ColorSetting.svelte';

var root = $.template(`<div><h1 class="note svelte-1s8ihik" style="font-weight:600">Same as the last example, but applied on the HTML element</h1> <p>But the variables we manually set below can still override the dynamic ones.</p> <div class="yellow-theme svelte-1s8ihik"><p class="note svelte-1s8ihik">For that yellow notepad look.</p> <p class="note purple-note-text svelte-1s8ihik">Or with purple</p></div></div> <!> <!> <!>`, 1);

export default function App($$anchor) {
var fragment = root();
var node = $.sibling($.first_child(fragment), 2);

ColorSetting(node, {
key: 'note-color',
label: 'Note Text Color',
value: '#FF5555'
});

var node_1 = $.sibling(node, 2);

ColorSetting(node_1, {
key: 'note-bg-color',
label: 'Note BG Color',
value: '#f4ed2a'
});

var node_2 = $.sibling(node_1, 2);

ColorSetting(node_2, {
key: 'bg',
label: 'Page Background',
value: '#BBBBBB'
});

$.append($$anchor, fragment);
}
result = svelte.compile(source, {
generate: ,
});

:root {
background-color: var(--bg, lightgray);
}
.note.svelte-1s8ihik {
color: var(--note-color, tomato);
background-color: var(--note-bg-color, lightgray);
}

.yellow-theme.svelte-1s8ihik {
--note-color: black;
--note-bg-color: khaki;
}

.purple-note-text.svelte-1s8ihik {
--note-color: rebeccapurple;
}

		
			
				
  • Root {
    • css: StyleSheet {...}
      • type: "StyleSheet"
      • start: 71
      • end: 373
      • attributes: []
      • children: [...] (4)
        • Rule {...}
          • type: "Rule"
          • prelude: SelectorList {...}
            • type: "SelectorList"
            • start: 80
            • end: 85
            • children: [...] (1)
              • ComplexSelector {...}
                • type: "ComplexSelector"
                • start: 80
                • end: 85
                • children: [...] (1)
                  • RelativeSelector {...}
                    • type: "RelativeSelector"
                    • combinator: null
                    • selectors: [...] (1)
                      • PseudoClassSelector {...}
                        • type: "PseudoClassSelector"
                        • name: "root"
                        • args: null
                        • start: 80
                        • end: 85
                        }
                      ]
                    • start: 80
                    • end: 85
                    }
                  ]
                }
              ]
            }
          • block: Block {...}
            • type: "Block"
            • start: 86
            • end: 132
            • children: [...] (1)
              • Declaration {...}
                • type: "Declaration"
                • start: 90
                • end: 128
                • property: "background-color"
                • value: "var(--bg, lightgray)"
                }
              ]
            }
          • start: 80
          • end: 132
          }
        • Rule {...}
          • type: "Rule"
          • prelude: SelectorList {...}
            • type: "SelectorList"
            • start: 136
            • end: 141
            • children: [...] (1)
              • ComplexSelector {...}
                • type: "ComplexSelector"
                • start: 136
                • end: 141
                • children: [...] (1)
                  • RelativeSelector {...}
                    • type: "RelativeSelector"
                    • combinator: null
                    • selectors: [...] (1)
                      • ClassSelector {...}
                        • type: "ClassSelector"
                        • name: "note"
                        • start: 136
                        • end: 141
                        }
                      ]
                    • start: 136
                    • end: 141
                    }
                  ]
                }
              ]
            }
          • block: Block {...}
            • type: "Block"
            • start: 142
            • end: 235
            • children: [...] (2)
              • Declaration {...}
                • type: "Declaration"
                • start: 146
                • end: 178
                • property: "color"
                • value: "var(--note-color, tomato)"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 182
                • end: 231
                • property: "background-color"
                • value: "var(--note-bg-color, lightgray)"
                }
              ]
            }
          • start: 136
          • end: 235
          }
        • Rule {...}
          • type: "Rule"
          • prelude: SelectorList {...}
            • type: "SelectorList"
            • start: 238
            • end: 251
            • children: [...] (1)
              • ComplexSelector {...}
                • type: "ComplexSelector"
                • start: 238
                • end: 251
                • children: [...] (1)
                  • RelativeSelector {...}
                    • type: "RelativeSelector"
                    • combinator: null
                    • selectors: [...] (1)
                      • ClassSelector {...}
                        • type: "ClassSelector"
                        • name: "yellow-theme"
                        • start: 238
                        • end: 251
                        }
                      ]
                    • start: 238
                    • end: 251
                    }
                  ]
                }
              ]
            }
          • block: Block {...}
            • type: "Block"
            • start: 252
            • end: 305
            • children: [...] (2)
              • Declaration {...}
                • type: "Declaration"
                • start: 256
                • end: 275
                • property: "--note-color"
                • value: "black"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 279
                • end: 301
                • property: "--note-bg-color"
                • value: "khaki"
                }
              ]
            }
          • start: 238
          • end: 305
          }
        • Rule {...}
          • type: "Rule"
          • prelude: SelectorList {...}
            • type: "SelectorList"
            • start: 308
            • end: 325
            • children: [...] (1)
              • ComplexSelector {...}
                • type: "ComplexSelector"
                • start: 308
                • end: 325
                • children: [...] (1)
                  • RelativeSelector {...}
                    • type: "RelativeSelector"
                    • combinator: null
                    • selectors: [...] (1)
                      • ClassSelector {...}
                        • type: "ClassSelector"
                        • name: "purple-note-text"
                        • start: 308
                        • end: 325
                        }
                      ]
                    • start: 308
                    • end: 325
                    }
                  ]
                }
              ]
            }
          • block: Block {...}
            • type: "Block"
            • start: 326
            • end: 363
            • children: [...] (1)
              • Declaration {...}
                • type: "Declaration"
                • start: 330
                • end: 357
                • property: "--note-color"
                • value: "rebeccapurple"
                }
              ]
            }
          • start: 308
          • end: 363
          }
        ]
      • content: {...}
        • start: 78
        • end: 365
        • styles: "\n\t:root {\n\t\tbackground-color: var(--bg, lightgray);\n\t}\n\t\n\t.note {\n\t\tcolor: var(--note-color, tomato);\n\t\tbackground-color: var(--note-bg-color, lightgray);\n\t}\n\n\t.yellow-theme {\n\t\t--note-color: black;\n\t\t--note-bg-color: khaki;\n\t}\n\n\t.purple-note-text {\n\t\t--note-color: rebeccapurple;\n } \n"
        • comment: null
        }
      }
    • js: []
    • start: 71
    • end: 952
    • type: "Root"
    • fragment: Fragment {...}
      • type: "Fragment"
      • nodes: [...] (9)
        • Text {...}
          • type: "Text"
          • start: 69
          • end: 71
          • raw: "\n\n"
          • data: "\n\n"
          }
        • Text {...}
          • type: "Text"
          • start: 373
          • end: 375
          • raw: "\n\n"
          • data: "\n\n"
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 375
          • end: 736
          • name: "div"
          • attributes: []
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (7)
              • Text {...}
                • type: "Text"
                • start: 380
                • end: 382
                • raw: "\n\t"
                • data: "\n\t"
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 382
                • end: 486
                • name: "h1"
                • attributes: [...] (2)
                  • Attribute {...}
                    • type: "Attribute"
                    • start: 386
                    • end: 398
                    • name: "class"
                    • value: [...] (1)
                      • Text {...}
                        • start: 393
                        • end: 397
                        • type: "Text"
                        • raw: "note"
                        • data: "note"
                        }
                      ]
                    }
                  • Attribute {...}
                    • type: "Attribute"
                    • start: 399
                    • end: 422
                    • name: "style"
                    • value: [...] (1)
                      • Text {...}
                        • start: 406
                        • end: 421
                        • type: "Text"
                        • raw: "font-weight:600"
                        • data: "font-weight:600"
                        }
                      ]
                    }
                  ]
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (1)
                    • Text {...}
                      • type: "Text"
                      • start: 423
                      • end: 481
                      • raw: "Same as the last example, but applied on the HTML element"
                      • data: "Same as the last example, but applied on the HTML element"
                      }
                    ]
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 486
                • end: 489
                • raw: " "
                • data: " "
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 489
                • end: 577
                • name: "p"
                • attributes: []
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (1)
                    • Text {...}
                      • type: "Text"
                      • start: 492
                      • end: 573
                      • raw: "But the variables we manually set below can still override the dynamic ones."
                      • data: "But the variables we manually set below can still override the dynamic ones."
                      }
                    ]
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 577
                • end: 579
                • raw: " "
                • data: " "
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 579
                • end: 728
                • name: "div"
                • attributes: [...] (1)
                  • Attribute {...}
                    • type: "Attribute"
                    • start: 584
                    • end: 604
                    • name: "class"
                    • value: [...] (1)
                      • Text {...}
                        • start: 591
                        • end: 603
                        • type: "Text"
                        • raw: "yellow-theme"
                        • data: "yellow-theme"
                        }
                      ]
                    }
                  ]
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (5)
                    • Text {...}
                      • type: "Text"
                      • start: 605
                      • end: 611
                      • raw: "\n "
                      • data: "\n "
                      }
                    • RegularElement {...}
                      • type: "RegularElement"
                      • start: 611
                      • end: 660
                      • name: "p"
                      • attributes: [...] (1)
                        • Attribute {...}
                          • type: "Attribute"
                          • start: 614
                          • end: 626
                          • name: "class"
                          • value: [...] (1)
                            • Text {...}
                              • start: 621
                              • end: 625
                              • type: "Text"
                              • raw: "note"
                              • data: "note"
                              }
                            ]
                          }
                        ]
                      • fragment: Fragment {...}
                        • type: "Fragment"
                        • nodes: [...] (1)
                          • Text {...}
                            • type: "Text"
                            • start: 627
                            • end: 656
                            • raw: "For that yellow notepad look."
                            • data: "For that yellow notepad look."
                            }
                          ]
                        }
                      }
                    • Text {...}
                      • type: "Text"
                      • start: 660
                      • end: 667
                      • raw: " "
                      • data: " "
                      }
                    • RegularElement {...}
                      • type: "RegularElement"
                      • start: 667
                      • end: 718
                      • name: "p"
                      • attributes: [...] (1)
                        • Attribute {...}
                          • type: "Attribute"
                          • start: 670
                          • end: 699
                          • name: "class"
                          • value: [...] (1)
                            • Text {...}
                              • start: 677
                              • end: 698
                              • type: "Text"
                              • raw: "note purple-note-text"
                              • data: "note purple-note-text"
                              }
                            ]
                          }
                        ]
                      • fragment: Fragment {...}
                        • type: "Fragment"
                        • nodes: [...] (1)
                          • Text {...}
                            • type: "Text"
                            • start: 700
                            • end: 714
                            • raw: "Or with purple"
                            • data: "Or with purple"
                            }
                          ]
                        }
                      }
                    • Text {...}
                      • type: "Text"
                      • start: 718
                      • end: 722
                      • raw: "\n "
                      • data: "\n "
                      }
                    ]
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 728
                • end: 730
                • raw: "\n\n"
                • data: "\n\n"
                }
              ]
            }
          }
        • Text {...}
          • type: "Text"
          • start: 736
          • end: 738
          • raw: " "
          • data: " "
          }
        • Component {...}
          • type: "Component"
          • start: 738
          • end: 811
          • name: "ColorSetting"
          • attributes: [...] (3)
            • Attribute {...}
              • type: "Attribute"
              • start: 752
              • end: 768
              • name: "key"
              • value: [...] (1)
                • Text {...}
                  • start: 757
                  • end: 767
                  • type: "Text"
                  • raw: "note-color"
                  • data: "note-color"
                  }
                ]
              }
            • Attribute {...}
              • type: "Attribute"
              • start: 769
              • end: 792
              • name: "label"
              • value: [...] (1)
                • Text {...}
                  • start: 776
                  • end: 791
                  • type: "Text"
                  • raw: "Note Text Color"
                  • data: "Note Text Color"
                  }
                ]
              }
            • Attribute {...}
              • type: "Attribute"
              • start: 793
              • end: 808
              • name: "value"
              • value: [...] (1)
                • Text {...}
                  • start: 800
                  • end: 807
                  • type: "Text"
                  • raw: "#FF5555"
                  • data: "#FF5555"
                  }
                ]
              }
            ]
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: []
            }
          }
        • Text {...}
          • type: "Text"
          • start: 811
          • end: 812
          • raw: " "
          • data: " "
          }
        • Component {...}
          • type: "Component"
          • start: 812
          • end: 886
          • name: "ColorSetting"
          • attributes: [...] (3)
            • Attribute {...}
              • type: "Attribute"
              • start: 826
              • end: 845
              • name: "key"
              • value: [...] (1)
                • Text {...}
                  • start: 831
                  • end: 844
                  • type: "Text"
                  • raw: "note-bg-color"
                  • data: "note-bg-color"
                  }
                ]
              }
            • Attribute {...}
              • type: "Attribute"
              • start: 846
              • end: 867
              • name: "label"
              • value: [...] (1)
                • Text {...}
                  • start: 853
                  • end: 866
                  • type: "Text"
                  • raw: "Note BG Color"
                  • data: "Note BG Color"
                  }
                ]
              }
            • Attribute {...}
              • type: "Attribute"
              • start: 868
              • end: 883
              • name: "value"
              • value: [...] (1)
                • Text {...}
                  • start: 875
                  • end: 882
                  • type: "Text"
                  • raw: "#f4ed2a"
                  • data: "#f4ed2a"
                  }
                ]
              }
            ]
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: []
            }
          }
        • Text {...}
          • type: "Text"
          • start: 886
          • end: 887
          • raw: " "
          • data: " "
          }
        • Component {...}
          • type: "Component"
          • start: 887
          • end: 952
          • name: "ColorSetting"
          • attributes: [...] (3)
            • Attribute {...}
              • type: "Attribute"
              • start: 901
              • end: 909
              • name: "key"
              • value: [...] (1)
                • Text {...}
                  • start: 906
                  • end: 908
                  • type: "Text"
                  • raw: "bg"
                  • data: "bg"
                  }
                ]
              }
            • Attribute {...}
              • type: "Attribute"
              • start: 910
              • end: 933
              • name: "label"
              • value: [...] (1)
                • Text {...}
                  • start: 917
                  • end: 932
                  • type: "Text"
                  • raw: "Page Background"
                  • data: "Page Background"
                  }
                ]
              }
            • Attribute {...}
              • type: "Attribute"
              • start: 934
              • end: 949
              • name: "value"
              • value: [...] (1)
                • Text {...}
                  • start: 941
                  • end: 948
                  • type: "Text"
                  • raw: "#BBBBBB"
                  • data: "#BBBBBB"
                  }
                ]
              }
            ]
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: []
            }
          }
        ]
      }
    • options: null
    • instance: Script {...}
      • type: "Script"
      • start: 0
      • end: 69
      • context: "default"
      • content: Program {...}
        • type: "Program"
        • start: 8
        • end: 60
        • loc: {...}
          • start: {...}
            • line: 1
            • column: 0
            }
          • end: {...}
            • line: 3
            • column: 0
            }
          }
        • body: [...] (1)
          • ImportDeclaration {...}
            • type: "ImportDeclaration"
            • start: 10
            • end: 59
            • loc: {...}
              • start: {...}
                • line: 2
                • column: 1
                }
              • end: {...}
                • line: 2
                • column: 50
                }
              }
            • specifiers: [...] (1)
              • ImportDefaultSpecifier {...}
                • type: "ImportDefaultSpecifier"
                • start: 17
                • end: 29
                • loc: {...}
                  • start: {...}
                    • line: 2
                    • column: 8
                    }
                  • end: {...}
                    • line: 2
                    • column: 20
                    }
                  }
                • local: Identifier {...}
                  • type: "Identifier"
                  • start: 17
                  • end: 29
                  • loc: {...}
                    • start: {...}
                      • line: 2
                      • column: 8
                      }
                    • end: {...}
                      • line: 2
                      • column: 20
                      }
                    }
                  • name: "ColorSetting"
                  }
                }
              ]
            • source: Literal {...}
              • type: "Literal"
              • start: 35
              • end: 58
              • loc: {...}
                • start: {...}
                  • line: 2
                  • column: 26
                  }
                • end: {...}
                  • line: 2
                  • column: 49
                  }
                }
              • value: "./ColorSetting.svelte"
              • raw: "'./ColorSetting.svelte'"
              }
            }
          ]
        • sourceType: "module"
        }
      • attributes: []
      }
    }
The AST is not public API and may change at any point in time
Dynamic CSS Variables on Document, Set From Different Components • Playground • Svelte