Add color handling for dark mode

ts/a11y/complexity/collapse.ts

@@ -599,7 +599,7 @@ export class Collapse {
         ),
       },
       [
-        factory.create('mtext', { mathcolor: 'blue', ...variant }, [
+        factory.create('mtext', variant, [
           (factory.create('text') as TextNode).setText(marker),
         ]),
       ]

ts/a11y/explorer.ts

@@ -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',
+        },
+      },
     };
 
     /**

ts/a11y/explorer/Highlighter.ts

@@ -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.
  *
@@ -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 {
   /**

ts/a11y/explorer/Region.ts

@@ -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.
    *
@@ -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);
   }
 
   /**
@@ -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;
   }
@@ -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',
+      },
+    },
   });
 }
 
@@ -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,
@@ -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 for the background
+   * @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.
    */
@@ -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',
+      },
+    },
   });
 
   /**

ts/output/chtml.ts

@@ -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
     //

ts/output/chtml/Wrappers/maction.ts

@@ -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',
+        },
+      },
     };
 
     /**

ts/output/svg.ts

@@ -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',
+      },
+    },
   };
 
   /**

ts/output/svg/Wrappers/maction.ts

@@ -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',
+        },
+      },
     };
 
     /**