Support web components/shadow DOM.

Add :host to all uses of :root
This commit is contained in:
Robert Coup 2024-12-02 13:53:36 +00:00
parent 6dc6489e69
commit 02c9fb69da
No known key found for this signature in database
6 changed files with 14 additions and 7 deletions

View file

@ -12,14 +12,16 @@
// Light color scheme (Default)
// Can be forced with data-theme="light"
[data-theme="light"],
:root:not([data-theme="dark"]) {
:root:not([data-theme="dark"]),
:host(:not([data-theme="dark"])) {
@include light.theme;
}
// Dark color scheme (Auto)
// Automatically enabled if user has Dark mode enabled
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) {
:root:not([data-theme]),
:host(:not([data-theme])) {
@include dark.theme;
}
}

View file

@ -9,7 +9,8 @@
* Styles
*/
:root {
:root,
:host {
// Typography
#{$css-var-prefix}font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";