diff --git a/examples/darkmode.html b/examples/darkmode.html new file mode 100644 index 0000000000..bcafdf944e --- /dev/null +++ b/examples/darkmode.html @@ -0,0 +1,85 @@ + + + + + + Replace me with a real title + + + + +
+

This is required.

+
+
+

This is required.

+
+
+

Introduction

+

Some informative introductory text.

+ +
+ +
A figure
+
+
+
+

A section

+ +
+

I'm a sub-section

+

+ +

+
+
+
+

Start your spec!

+ 
+        [Exposed=Window]
+        interface Foo {
+        attribute DOMString bar;
+        undefined doTheFoo();
+        };
+
+

The Foo interface represents a {{Foo}}.

+

+ The doTheFoo() method does the foo. Call it by running + {{Foo/doTheFoo()}}. +

+
    +
  1. A |variable:DOMString| can be declared like this.
    2. +
+
+
+

+ This is required for specifications that contain normative material. +

+
+
+ + diff --git a/examples/figure1-lightdark.svg b/examples/figure1-lightdark.svg new file mode 100644 index 0000000000..b992b1f928 --- /dev/null +++ b/examples/figure1-lightdark.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + Foo + + + bar + + + + + Baz + + + + diff --git a/src/styles/highlight.css.js b/src/styles/highlight.css.js index 3f52eb7e71..3fa7d22676 100644 --- a/src/styles/highlight.css.js +++ b/src/styles/highlight.css.js @@ -6,10 +6,29 @@ Original One Light Syntax theme from https://github.com/atom/one-light-syntax const css = String.raw; +// Repeatably used in media rule and selector-based override. +const hljsDarkVars = ` + --base: #282c34; + --mono-1: #abb2bf; + --mono-2: #818896; + --mono-3: #5c6370; + --hue-1: #56b6c2; + --hue-2: #61aeee; + --hue-3: #c678dd; + --hue-4: #98c379; + --hue-5: #e06c75; + --hue-5-2: #be5046; + --hue-6: #d19a66; + --hue-6-2: #e6c07b; +`; + // Prettier ignore only to keep code indented from level 0. // prettier-ignore export default css` -.hljs { +/* Use light by default, when no dark scheme present, or light scheme is checked. */ +.hljs, +head:not(:has(meta[name='color-scheme'][content~='dark'])) + body .hljs, +body:has(input[name='color-scheme'][value='light']:checked) .hljs { --base: #fafafa; --mono-1: #383a42; --mono-2: #686b77; @@ -24,23 +43,15 @@ export default css` --hue-6-2: #9a6a01; } -/* There's no way to adapt this to "manual" theme toggle yet. */ +/* Use dark by default when preferred, or when dark scheme is checked. */ @media (prefers-color-scheme: dark) { .hljs { - --base: #282c34; - --mono-1: #abb2bf; - --mono-2: #818896; - --mono-3: #5c6370; - --hue-1: #56b6c2; - --hue-2: #61aeee; - --hue-3: #c678dd; - --hue-4: #98c379; - --hue-5: #e06c75; - --hue-5-2: #be5046; - --hue-6: #d19a66; - --hue-6-2: #e6c07b; + ${hljsDarkVars} } } +body:has(input[name='color-scheme'][value='dark']:checked) .hljs { + ${hljsDarkVars} +} .hljs { display: block; diff --git a/src/styles/respec.css.js b/src/styles/respec.css.js index c4ed7328f8..1b4a362a63 100644 --- a/src/styles/respec.css.js +++ b/src/styles/respec.css.js @@ -179,4 +179,17 @@ aside.example .marker > a.self-link { display: none; } } + +/** + * Control prefers-color-scheme behavior in linked SVGs: + * - use light when no dark scheme present, or light scheme is checked. + * - use dark when dark scheme is checked. + */ +head:not(:has(meta[name='color-scheme'][content~='dark'])) + body, +body:has(input[name='color-scheme'][value='light']:checked) { + color-scheme: light; +} +body:has(input[name='color-scheme'][value='dark']:checked) { + color-scheme: dark; +} `;