webmail: fix dark mode

broken in v0.0.14, probably when introducing the css variables.
i had noticed this issue at the time, and thought i fixed it, but clearly not.

for issue #278, reported by gdunstone
This commit is contained in:
Mechiel Lukkien 2025-02-03 18:28:48 +01:00
parent 091faa8048
commit d08e0d3882
No known key found for this signature in database
4 changed files with 17 additions and 17 deletions

View File

@ -7,17 +7,17 @@
// Makes it easier to look through a DOM, and easier to change the style of all // Makes it easier to look through a DOM, and easier to change the style of all
// instances of a class. // instances of a class.
// We keep the default/regular styles and dark-mode styles in separate stylesheets.
const cssStyle = dom.style(attr.type('text/css'))
document.head.prepend(cssStyle)
const styleSheet = cssStyle.sheet!
const cssStyleDark = dom.style(attr.type('text/css')) const cssStyleDark = dom.style(attr.type('text/css'))
document.head.prepend(cssStyleDark) document.head.prepend(cssStyleDark)
const styleSheetDark = cssStyleDark.sheet! const styleSheetDark = cssStyleDark.sheet!
styleSheetDark.insertRule('@media (prefers-color-scheme: dark) {}') styleSheetDark.insertRule('@media (prefers-color-scheme: dark) {}')
const darkModeRule = styleSheetDark.cssRules[0] as CSSMediaRule const darkModeRule = styleSheetDark.cssRules[0] as CSSMediaRule
// We keep the default/regular styles and dark-mode styles in separate stylesheets.
const cssStyle = dom.style(attr.type('text/css'))
document.head.prepend(cssStyle)
const styleSheet = cssStyle.sheet!
let cssRules: { [selector: string]: string} = {} // For ensuring a selector has a single definition. let cssRules: { [selector: string]: string} = {} // For ensuring a selector has a single definition.
// Ensure a selector has the given style properties. If a style value is an array, // Ensure a selector has the given style properties. If a style value is an array,
// it must have 2 elements. The first is the default value, the second used for a // it must have 2 elements. The first is the default value, the second used for a

View File

@ -1062,15 +1062,15 @@ var api;
// - To use class names for styling, instead of the the many inline styles. // - To use class names for styling, instead of the the many inline styles.
// Makes it easier to look through a DOM, and easier to change the style of all // Makes it easier to look through a DOM, and easier to change the style of all
// instances of a class. // instances of a class.
// We keep the default/regular styles and dark-mode styles in separate stylesheets.
const cssStyle = dom.style(attr.type('text/css'));
document.head.prepend(cssStyle);
const styleSheet = cssStyle.sheet;
const cssStyleDark = dom.style(attr.type('text/css')); const cssStyleDark = dom.style(attr.type('text/css'));
document.head.prepend(cssStyleDark); document.head.prepend(cssStyleDark);
const styleSheetDark = cssStyleDark.sheet; const styleSheetDark = cssStyleDark.sheet;
styleSheetDark.insertRule('@media (prefers-color-scheme: dark) {}'); styleSheetDark.insertRule('@media (prefers-color-scheme: dark) {}');
const darkModeRule = styleSheetDark.cssRules[0]; const darkModeRule = styleSheetDark.cssRules[0];
// We keep the default/regular styles and dark-mode styles in separate stylesheets.
const cssStyle = dom.style(attr.type('text/css'));
document.head.prepend(cssStyle);
const styleSheet = cssStyle.sheet;
let cssRules = {}; // For ensuring a selector has a single definition. let cssRules = {}; // For ensuring a selector has a single definition.
// Ensure a selector has the given style properties. If a style value is an array, // Ensure a selector has the given style properties. If a style value is an array,
// it must have 2 elements. The first is the default value, the second used for a // it must have 2 elements. The first is the default value, the second used for a

View File

@ -1062,15 +1062,15 @@ var api;
// - To use class names for styling, instead of the the many inline styles. // - To use class names for styling, instead of the the many inline styles.
// Makes it easier to look through a DOM, and easier to change the style of all // Makes it easier to look through a DOM, and easier to change the style of all
// instances of a class. // instances of a class.
// We keep the default/regular styles and dark-mode styles in separate stylesheets.
const cssStyle = dom.style(attr.type('text/css'));
document.head.prepend(cssStyle);
const styleSheet = cssStyle.sheet;
const cssStyleDark = dom.style(attr.type('text/css')); const cssStyleDark = dom.style(attr.type('text/css'));
document.head.prepend(cssStyleDark); document.head.prepend(cssStyleDark);
const styleSheetDark = cssStyleDark.sheet; const styleSheetDark = cssStyleDark.sheet;
styleSheetDark.insertRule('@media (prefers-color-scheme: dark) {}'); styleSheetDark.insertRule('@media (prefers-color-scheme: dark) {}');
const darkModeRule = styleSheetDark.cssRules[0]; const darkModeRule = styleSheetDark.cssRules[0];
// We keep the default/regular styles and dark-mode styles in separate stylesheets.
const cssStyle = dom.style(attr.type('text/css'));
document.head.prepend(cssStyle);
const styleSheet = cssStyle.sheet;
let cssRules = {}; // For ensuring a selector has a single definition. let cssRules = {}; // For ensuring a selector has a single definition.
// Ensure a selector has the given style properties. If a style value is an array, // Ensure a selector has the given style properties. If a style value is an array,
// it must have 2 elements. The first is the default value, the second used for a // it must have 2 elements. The first is the default value, the second used for a

View File

@ -1062,15 +1062,15 @@ var api;
// - To use class names for styling, instead of the the many inline styles. // - To use class names for styling, instead of the the many inline styles.
// Makes it easier to look through a DOM, and easier to change the style of all // Makes it easier to look through a DOM, and easier to change the style of all
// instances of a class. // instances of a class.
// We keep the default/regular styles and dark-mode styles in separate stylesheets.
const cssStyle = dom.style(attr.type('text/css'));
document.head.prepend(cssStyle);
const styleSheet = cssStyle.sheet;
const cssStyleDark = dom.style(attr.type('text/css')); const cssStyleDark = dom.style(attr.type('text/css'));
document.head.prepend(cssStyleDark); document.head.prepend(cssStyleDark);
const styleSheetDark = cssStyleDark.sheet; const styleSheetDark = cssStyleDark.sheet;
styleSheetDark.insertRule('@media (prefers-color-scheme: dark) {}'); styleSheetDark.insertRule('@media (prefers-color-scheme: dark) {}');
const darkModeRule = styleSheetDark.cssRules[0]; const darkModeRule = styleSheetDark.cssRules[0];
// We keep the default/regular styles and dark-mode styles in separate stylesheets.
const cssStyle = dom.style(attr.type('text/css'));
document.head.prepend(cssStyle);
const styleSheet = cssStyle.sheet;
let cssRules = {}; // For ensuring a selector has a single definition. let cssRules = {}; // For ensuring a selector has a single definition.
// Ensure a selector has the given style properties. If a style value is an array, // Ensure a selector has the given style properties. If a style value is an array,
// it must have 2 elements. The first is the default value, the second used for a // it must have 2 elements. The first is the default value, the second used for a