/* * Theme switching: the tokens in tokens.css follow , else the system setting. * Elements that exist in a light and a dark variant (the logo, the theme toggle icons) use these helpers, * because cannot see a manually chosen theme. */ /* Explicit choice */ :root[data-theme="light"] .iz-theme-dark-only, :root[data-theme="dark"] .iz-theme-light-only { display: none !important; } /* No choice yet: follow the system */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) .iz-theme-light-only { display: none !important; } } @media not (prefers-color-scheme: dark) { :root:not([data-theme]) .iz-theme-dark-only { display: none !important; } } /* Native controls (scrollbars, form widgets) match the chosen theme too. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; }