fix: adapt color-theme attribute on root based on theme

This commit is contained in:
Felix Roos
2026-01-20 00:59:43 +01:00
parent de83805fd9
commit afac1f62ca
4 changed files with 4 additions and 0 deletions
+1
View File
@@ -198,6 +198,7 @@ export function activateTheme(name) {
const themeSettings = settings[name] || settings.strudelTheme;
// set css variables
themeStyle.innerHTML = `:root {
color-scheme: ${themeSettings.light ? 'light' : 'dark'};
${Object.entries(themeSettings)
// important to override fallback
.map(([key, value]) => `--${key}: ${value} !important;`)
+1
View File
@@ -25,6 +25,7 @@ export const settings = {
gutterForeground: lightGrey,
gutterBorder: 'transparent',
lineHighlight: pinkAccent,
light: true,
};
export default createTheme({
+1
View File
@@ -33,6 +33,7 @@ const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL
<!-- the following variables are just a fallback to make sure everything is readable without JS -->
<style is:global>
:root {
color-scheme: dark;
--background: #222;
--lineBackground: #22222299;
--foreground: #fff;
@@ -32,6 +32,7 @@ const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL
<!-- the following variables are just a fallback to make sure everything is readable without JS -->
<style is:global>
:root {
color-scheme: dark;
--background: #222;
--lineBackground: #22222299;
--foreground: #fff;