Skip to content

Add color handling for dark mode #1369

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Nov 13, 2025
Merged

Add color handling for dark mode #1369

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2ef10bd
Add color handling for dark mode
dpvc Oct 19, 2025
2df9977
Fixes for prettier
dpvc Oct 19, 2025
b459898
Update spacing for StyleJason for @media rules, and add a test for it
dpvc Oct 26, 2025
e3d534f
Add missing JSDoc parameters
dpvc Oct 26, 2025
b6c54a1
Update ts/a11y/explorer/Region.ts
dpvc Nov 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions testsuite/tests/util/StyleJson.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,20 @@ describe('StyleJsonSheet object', () => {
expect(styles.cssText).toBe('');
});

test('Compound style', () => {
expect(new StyleJsonSheet({
'@media (prefers-color-scheme: dark)': {
'mjx-container': {
'color': '#E0E0E0',
},
}
}).cssText).toBe([
'@media (prefers-color-scheme: dark) {',
' mjx-container {',
' color: #E0E0E0;',
' }',
'}'
].join('\n'));
});

});
2 changes: 1 addition & 1 deletion ts/a11y/complexity/collapse.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -599,7 +599,7 @@ export class Collapse {
),
},
[
factory.create('mtext', { mathcolor: 'blue', ...variant }, [
factory.create('mtext', variant, [
(factory.create('text') as TextNode).setText(marker),
]),
]
Expand Down
15 changes: 15 additions & 0 deletions ts/a11y/explorer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -418,6 +418,21 @@ export function ExplorerMathDocumentMixin<
display: 'inline-flex',
'align-items': 'center',
},
'@media (prefers-color-scheme: dark) /* explorer */': {
'mjx-help > svg': {
stroke: '#E0E0E0',
},
'mjx-help > svg > circle': {
fill: '#404040',
},
'mjx-help > svg > circle:nth-child(2)': {
fill: 'rgba(132, 132, 255, .3)',
},
'mjx-help:hover > svg > circle:nth-child(2)': {
stroke: '#AAAAAA',
fill: '#404040',
},
},
Copy link
Member

@zorkow zorkow Nov 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The issue here is that the we fix the background color of the circle i. I.e., when changing the highlighting color to something else, it stays blue. This is not an issue related to the darkmode but it has just never occurred to me.
We could solve this by making the infoIcon part of the RegionPool so it would have access to the highlighter for updating.

Copy link
Member Author

@dpvc dpvc Nov 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I worried about that when I did it, but, as you say, I don't have access to the color here. Now that we are using css variables in the highlighter, perhaps those could be used for this? I agree that it can wait for a future update.

};

/**
Expand Down
41 changes: 8 additions & 33 deletions ts/a11y/explorer/Highlighter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,26 +21,9 @@
interface NamedColor {
color: string;
alpha?: number;
type?: string;
}

interface ChannelColor {
red: number;
green: number;
blue: number;
alpha?: number;
}

const namedColors: { [key: string]: ChannelColor } = {
red: { red: 255, green: 0, blue: 0 },
green: { red: 0, green: 255, blue: 0 },
blue: { red: 0, green: 0, blue: 255 },
yellow: { red: 255, green: 255, blue: 0 },
cyan: { red: 0, green: 255, blue: 255 },
magenta: { red: 255, green: 0, blue: 255 },
white: { red: 255, green: 255, blue: 255 },
black: { red: 0, green: 0, blue: 0 },
};

/**
* Turns a named color into a channel color.
*
Expand All @@ -49,30 +32,22 @@ const namedColors: { [key: string]: ChannelColor } = {
* @returns {string} The channel color.
*/
function getColorString(color: NamedColor, deflt: NamedColor): string {
const channel = namedColors[color.color] || namedColors[deflt.color];
channel.alpha = color.alpha ?? deflt.alpha;
return rgba(channel);
}

/**
* RGBa string version of the channel color.
*
* @param {ChannelColor} color The channel color.
* @returns {string} The color in RGBa format.
*/
function rgba(color: ChannelColor): string {
return `rgba(${color.red},${color.green},${color.blue},${color.alpha ?? 1})`;
const type = deflt.type;
const name = color.color ?? deflt.color;
const opacity = color.alpha ?? deflt.alpha;
const alpha = opacity === 1 ? 1 : `var(--mjx-${type}-alpha)`;
return `rgba(var(--mjx-${type}-${name}), ${alpha})`;
}

/**
* The default background color if a none existing color is provided.
*/
const DEFAULT_BACKGROUND: NamedColor = { color: 'blue', alpha: 1 };
const DEFAULT_BACKGROUND: NamedColor = { color: 'blue', alpha: 1, type: 'bg' };

/**
* The default color if a none existing color is provided.
*/
const DEFAULT_FOREGROUND: NamedColor = { color: 'black', alpha: 1 };
const DEFAULT_FOREGROUND: NamedColor = { color: 'black', alpha: 1, type: 'fg' };

export interface Highlighter {
/**
Expand Down
108 changes: 90 additions & 18 deletions ts/a11y/explorer/Region.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,13 +73,6 @@ export abstract class AbstractRegion<T> implements Region<T> {
*/
protected static className: string;

/**
* True if the style has already been added to the document.
*
* @type {boolean}
*/
protected static styleAdded: boolean = false;

/**
* The CSS style that needs to be added for this type of region.
*
Expand Down Expand Up @@ -117,20 +110,27 @@ export abstract class AbstractRegion<T> implements Region<T> {
this.AddStyles();
}

/**
* @returns {string} The stylesheet ID
*/
public static get sheetId(): string {
return 'MJX-' + this.name + '-styles';
}

/**
* @override
*/
public AddStyles() {
if (this.CLASS.styleAdded) {
const id = this.CLASS.sheetId;
if (
!this.CLASS.style ||
this.document.adaptor.head().querySelector('#' + id)
) {
return;
}
// TODO: should that be added to document.documentStyleSheet()?
const node = this.document.adaptor.node('style');
const node = this.document.adaptor.node('style', { id });
node.innerHTML = this.CLASS.style.cssText;
this.document.adaptor
.head(this.document.adaptor.document)
.appendChild(node);
this.CLASS.styleAdded = true;
this.document.adaptor.head().appendChild(node);
}

/**
Expand Down Expand Up @@ -177,7 +177,7 @@ export abstract class AbstractRegion<T> implements Region<T> {
*/
public Hide() {
if (!this.div) return;
this.div.parentNode.removeChild(this.div);
this.div.remove();
this.div = null;
this.inner = null;
}
Expand Down Expand Up @@ -335,6 +335,13 @@ export class ToolTip extends StringRegion {
'border-radius': 'inherit',
padding: '0 2px',
},
'@media (prefers-color-scheme: dark)': {
['.' + ToolTip.className]: {
'background-color': '#222025',
'box-shadow': '0px 5px 20px #000',
border: '1px solid #7C7C7C',
},
},
});
}

Expand All @@ -348,6 +355,43 @@ export class LiveRegion extends StringRegion {
* @override
*/
protected static style: StyleJsonSheet = new StyleJsonSheet({
':root': {
'--mjx-fg-red': '255, 0, 0',
'--mjx-fg-green': '0, 255, 0',
'--mjx-fg-blue': '0, 0, 255',
'--mjx-fg-yellow': '255, 255, 0',
'--mjx-fg-cyan': '0, 255, 255',
'--mjx-fg-magenta': '255, 0, 255',
'--mjx-fg-white': '255, 255, 255',
'--mjx-fg-black': '0, 0, 0',
'--mjx-bg-red': '255, 0, 0',
'--mjx-bg-green': '0, 255, 0',
'--mjx-bg-blue': '0, 0, 255',
'--mjx-bg-yellow': '255, 255, 0',
'--mjx-bg-cyan': '0, 255, 255',
'--mjx-bg-magenta': '255, 0, 255',
'--mjx-bg-white': '255, 255, 255',
'--mjx-bg-black': '0, 0, 0',
'--mjx-live-bg-color': 'white',
'--mjx-live-shadow-color': '#888',
'--mjx-live-border-color': '#CCCCCC',
'--mjx-bg-alpha': 0.2,
'--mjx-fg-alpha': 1,
},
'@media (prefers-color-scheme: dark)': {
':root': {
'--mjx-bg-blue': '132, 132, 255',
'--mjx-bg-white': '0, 0, 0',
'--mjx-bg-black': '255, 255, 255',
'--mjx-fg-white': '0, 0, 0',
'--mjx-fg-black': '255, 255, 255',
'--mjx-live-bg-color': '#222025',
'--mjx-live-shadow-color': 'black',
'--mjx-live-border-color': '#7C7C7C',
'--mjx-bg-alpha': 0.3,
'--mjx-fg-alpha': 1,
},
},
['.' + LiveRegion.className]: {
position: 'absolute',
top: 0,
Expand All @@ -360,20 +404,41 @@ export class LiveRegion extends StringRegion {
left: 0,
right: 0,
margin: '0 auto',
'background-color': 'white',
'box-shadow': '0px 5px 20px #888',
border: '2px solid #CCCCCC',
'background-color': 'var(--mjx-live-bg-color)',
'box-shadow': '0px 5px 20px var(--mjx-live-shadow-color)',
border: '2px solid var(--mjx-live-border-color)',
},
['.' + LiveRegion.className + '_Show']: {
display: 'block',
},
});

/**
* @param {string} type The type of alpha to set (fg or bg)
* @param {number} alpha The alpha value to use
* @param {Document} document The document whose CSS styles are to be adjusted
*/
public static setAlpha(type: string, alpha: number, document: Document) {
const style = document.head.querySelector(
'#' + this.sheetId
) as HTMLStyleElement;
if (style) {
const name = `--mjx-${type}-alpha`;
(style.sheet.cssRules[0] as any).style.setProperty(name, alpha);
(style.sheet.cssRules[1] as any).cssRules[0].style.setProperty(
name,
alpha ** 0.7071
);
}
}
}

/**
* Region class that enables auto voicing of content via SSML markup.
*/
export class SpeechRegion extends LiveRegion {
protected static style: StyleJsonSheet = null;

/**
* Flag to activate auto voicing.
*/
Expand Down Expand Up @@ -583,6 +648,13 @@ export class HoverRegion extends AbstractRegion<HTMLElement> {
['.' + HoverRegion.className + ' > div']: {
overflow: 'hidden',
},
'@media (prefers-color-scheme: dark)': {
['.' + HoverRegion.className]: {
'background-color': '#222025',
'box-shadow': '0px 5px 20px #000',
border: '1px solid #7C7C7C',
},
},
});

/**
Expand Down
9 changes: 9 additions & 0 deletions ts/output/chtml.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,15 @@ export class CHTML<N, T, D> extends CommonOutputJax<

'mjx-container [inline-breaks]': { display: 'inline' },

'mjx-container .mjx-selected': {
outline: '2px solid black',
},
'@media (prefers-color-scheme: dark)': {
'mjx-container .mjx-selected': {
outline: '2px solid #C8C8C8',
},
},

//
// These don't have Wrapper subclasses, so add their styles here
//
Expand Down
19 changes: 19 additions & 0 deletions ts/output/chtml/Wrappers/maction.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,25 @@ export const ChtmlMaction = (function <N, T, D>(): ChtmlMactionClass<N, T, D> {
'background-color': '#F8F8F8',
color: 'black',
},
'mjx-maction[data-collapsible][toggle="1"]': {
color: '#55F',
},

'@media (prefers-color-scheme: dark) /* chtml maction */': {
'mjx-tool > mjx-tip': {
border: '1px solid #888',
'background-color': '#303030',
color: '#E0E0E0',
'box-shadow': '2px 2px 5px #000',
},
'mjx-status': {
'background-color': '#303030',
color: '#E0E0E0',
},
'mjx-maction[data-collapsible][toggle="1"]': {
color: '#88F',
},
},
};

/**
Expand Down
8 changes: 8 additions & 0 deletions ts/output/svg.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,14 @@ export class SVG<N, T, D> extends CommonOutputJax<
stroke: 'black',
'stroke-width': '80px',
},
'@media (prefers-color-scheme: dark)': {
[[
'rect[data-sre-highlighter-added]:has(+ .mjx-selected)',
'rect[data-sre-highlighter-bbox].mjx-selected',
].join(', ')]: {
stroke: '#C8C8C8',
},
},
};

/**
Expand Down
18 changes: 18 additions & 0 deletions ts/output/svg/Wrappers/maction.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,24 @@ export const SvgMaction = (function <N, T, D>(): SvgMactionClass<N, T, D> {
'background-color': '#F8F8F8',
color: 'black',
},
'g[data-mml-node="maction"][data-collapsible][data-toggle="1"]': {
fill: '#55F',
},

'@media (prefers-color-scheme: dark) /* svg maction */': {
'mjx-tool > mjx-tip': {
'background-color': '#303030',
color: '#E0E0E0',
'box-shadow': '2px 2px 5px #000',
},
'mjx-status': {
'background-color': '#303030',
color: '#E0E0E0',
},
'g[data-mml-node="maction"][data-collapsible][data-toggle="1"]': {
fill: '#88F',
},
},
};

/**
Expand Down
Loading