Skip to content

Commit f2b1688

Browse files
smocklesmockle
authored
feat: Support light and dark color schemes (#91)
* feat: Support light and dark color schemes * fix: Add 'supported-color-schemes' meta tag so browsers vary the color of 'buttonText' * fix: Use CSS variables for header gradient * fix: Set SVG 'height' to remove unused space in note blocks * fix: Chrome doesn’t vary 'buttonText' in dark mode Explicitly use primary text color as an alternative * fix: Set 'lang' attribute on 'html' This was flagged by Lighthouse. Details: https://web.dev/html-has-lang/ * feat: Support non-system color scheme preferences * feat: Test both light and dark mode in LighthouseCI * feat: Full syntax themes based on primer/github-syntax-light and primer/github-syntax-dark
1 parent 70852ee commit f2b1688

9 files changed

Lines changed: 246 additions & 73 deletions

File tree

‎docs/_guide/actions.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ subtitle: Binding Events
66
Catalyst Components automatically bind actions upon instantiation. Automatically as part of the `connectedCallback`, a component will search for any children with the `data-action` attribute, and bind events based on the value of this attribute. Any _public method_ on a Controller can be bound to via `data-action`.
77

88
<div class="d-flex border rounded-1 my-3 box-shadow-medium">
9-
<span class="d-flex bg-blue text-white rounded-left-1 p-3">
10-
<svg width="24" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true">
9+
<span class="d-flex flex-items-center bg-blue text-white rounded-left-1 p-3">
10+
<svg width="24" height="24" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true">
1111
<path
1212
fill-rule="evenodd"
1313
d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"

‎docs/_guide/rendering.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ subtitle: Rendering HTML subtrees
66
Sometimes it's necessary to render an HTML subtree as part of a component. This can be especially useful if a component is driving complex UI that is only interactive with JS.
77

88
<div class="d-flex border rounded-1 my-3 box-shadow-medium">
9-
<span class="d-flex bg-blue text-white rounded-left-1 p-3">
10-
<svg width="24" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true">
9+
<span class="d-flex flex-items-center bg-blue text-white rounded-left-1 p-3">
10+
<svg width="24" height="24" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true">
1111
<path
1212
fill-rule="evenodd"
1313
d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"
@@ -56,8 +56,8 @@ class HelloWorldElement extends HTMLElement {
5656
Providing the `<template data-shadowroot>` element as a direct child of the `hello-world` element tells Catalyst to render the templates contents automatically, and so all `HelloWorldElements` with this template will be rendered with the contents.
5757

5858
<div class="d-flex border rounded-1 my-3 box-shadow-medium">
59-
<span class="d-flex bg-blue text-white rounded-left-1 p-3">
60-
<svg width="24" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true">
59+
<span class="d-flex flex-items-center bg-blue text-white rounded-left-1 p-3">
60+
<svg width="24" height="24" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true">
6161
<path
6262
fill-rule="evenodd"
6363
d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"

‎docs/_guide/targets.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@ The target syntax follows a pattern of `controller.target`.
5151
### Multiple Targets
5252

5353
<div class="d-flex border rounded-1 my-3 box-shadow-medium">
54-
<span class="d-flex bg-blue text-white rounded-left-1 p-3">
55-
<svg width="24" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true">
54+
<span class="d-flex flex-items-center bg-blue text-white rounded-left-1 p-3">
55+
<svg width="24" height="24" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true">
5656
<path
5757
fill-rule="evenodd"
5858
d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"

‎docs/_guide/your-first-component.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ Catalyst will automatically convert the classes name; removing the trailing `Ele
2323
By convention Catalyst controllers end in `Element`; Catalyst will omit this when generating a tag name. The `Element` suffix is _not_ required - just convention. All examples in this guide use `Element` suffixed names.
2424

2525
<div class="d-flex border rounded-1 my-3 box-shadow-medium">
26-
<span class="d-flex bg-blue text-white rounded-left-1 p-3">
27-
<svg width="24" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true">
26+
<span class="d-flex flex-items-center bg-blue text-white rounded-left-1 p-3">
27+
<svg width="24" height="24" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true">
2828
<path
2929
fill-rule="evenodd"
3030
d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"

‎docs/_layouts/default.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<meta name="description" content="Catalyst is a set of patterns and techniques for developing components within a complex application.">
88
<meta charset="utf-8">
99
<meta name="viewport" content="width=device-width">
10+
<meta name="supported-color-schemes" content="light dark">
1011
<link rel="stylesheet" href="{{ site.baseurl }}/primer.css">
1112
<link rel="stylesheet" href="{{ site.baseurl }}/github-syntax.css">
1213
<link rel="stylesheet" href="{{ site.baseurl }}/custom.css">
@@ -22,7 +23,7 @@
2223
</head>
2324
<body class="d-flex flex-column height-full">
2425
<header class="position-sticky top-0 d-flex"
25-
style="z-index: 1; background-image: linear-gradient(to top, rgba(255, 255, 255, 0), white 25%)">
26+
style="z-index: 1; background-image: linear-gradient(to top, var(--color-bg-canvas-shadow), var(--color-bg-canvas) 25%)">
2627
<div class="flex-1 pl-3 pb-6 col-3 {% if page.layout != "default" %}bg-gray{% endif %}">
2728
<h1 class="m-0 mt-2">Catalyst</h1>
2829
</div>
@@ -54,5 +55,6 @@ <h1 class="m-0 mt-2">Catalyst</h1>
5455

5556
{{ content }}
5657

58+
<script async src="{{ site.baseurl }}/index.js"></script>
5759
</body>
5860
</html>

‎docs/custom.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,48 @@ code { font-size: 90% !important }
44
h1, h2, h3, h4, h5 { margin: 1rem 0; width: 100%; }
55
ul li { margin-left: 1rem }
66

7+
/* No preference or prefers light */
8+
:root:not([data-prefers-color-scheme=dark]),
9+
html[data-prefers-color-scheme=light] {
10+
--color-bg-canvas: rgb(255, 255, 255);
11+
--color-bg-canvas-shadow: rgba(255, 255, 255, 0);
12+
--color-bg-canvas-tertiary: #f6f8fa;
13+
--color-text-primary: #24292e;
14+
--color-markdown-code-bg: rgba(27, 31, 35, 0.05);
15+
}
16+
/* Prefers dark */
17+
html[data-prefers-color-scheme=dark] {
18+
--color-bg-canvas: rgb(13, 17, 23);
19+
--color-bg-canvas-shadow: rgba(13, 17, 23, 0);
20+
--color-bg-canvas-tertiary: #161b22;
21+
--color-text-primary: #c9d1d9;
22+
--color-markdown-code-bg: rgba(240, 246, 252, 0.05);
23+
}
24+
@media (prefers-color-scheme: dark) {
25+
:root:not([data-prefers-color-scheme=light]) {
26+
--color-bg-canvas: rgb(13, 17, 23);
27+
--color-bg-canvas-shadow: rgba(13, 17, 23, 0);
28+
--color-bg-canvas-tertiary: #161b22;
29+
--color-text-primary: #c9d1d9;
30+
--color-markdown-code-bg: rgba(240, 246, 252, 0.05);
31+
}
32+
}
33+
34+
body {
35+
background-color: var(--color-bg-canvas);
36+
color: var(--color-text-primary);
37+
}
38+
39+
/* Sidebar */
40+
/* NB: `!important` is already used; so it’s required here */
41+
.bg-gray { background-color: var(--color-bg-canvas-tertiary) !important }
42+
43+
/* Code Blocks & Syntax */
44+
.markdown-body .highlight pre, .markdown-body pre { background-color: var(--color-bg-canvas-tertiary) }
45+
46+
/* Inline Code */
47+
.markdown-body code, .markdown-body tt { background-color: var(--color-markdown-code-bg) }
48+
49+
/* Tables */
50+
.markdown-body table tr:nth-of-type(odd) th, .markdown-body table tr:nth-of-type(odd) td { background-color: var(--color-bg-canvas) }
51+
.markdown-body table tr:nth-of-type(even) th, .markdown-body table tr:nth-of-type(even) td { background-color: var(--color-bg-canvas-tertiary) }

‎docs/github-syntax.css‎

Lines changed: 144 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,144 @@
1-
.highlight .hll { background-color: #ffffcc }
2-
.highlight .c { color: #999988; font-style: italic } /* Comment */
3-
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
4-
.highlight .k { color: #000000; font-weight: bold } /* Keyword */
5-
.highlight .o { color: #000000; font-weight: bold } /* Operator */
6-
.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
7-
.highlight .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
8-
.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
9-
.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
10-
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
11-
.highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */
12-
.highlight .gr { color: #aa0000 } /* Generic.Error */
13-
.highlight .gh { color: #999999 } /* Generic.Heading */
14-
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
15-
.highlight .go { color: #888888 } /* Generic.Output */
16-
.highlight .gp { color: #555555 } /* Generic.Prompt */
17-
.highlight .gs { font-weight: bold } /* Generic.Strong */
18-
.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
19-
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
20-
.highlight .kc { color: #000000; font-weight: bold } /* Keyword.Constant */
21-
.highlight .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
22-
.highlight .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
23-
.highlight .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
24-
.highlight .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
25-
.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
26-
.highlight .m { color: #009999 } /* Literal.Number */
27-
.highlight .s { color: #d01040 } /* Literal.String */
28-
.highlight .na { color: #008080 } /* Name.Attribute */
29-
.highlight .nb { color: #0086B3 } /* Name.Builtin */
30-
.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
31-
.highlight .no { color: #008080 } /* Name.Constant */
32-
.highlight .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
33-
.highlight .ni { color: #800080 } /* Name.Entity */
34-
.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
35-
.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
36-
.highlight .nl { color: #990000; font-weight: bold } /* Name.Label */
37-
.highlight .nn { color: #555555 } /* Name.Namespace */
38-
.highlight .nt { color: #000080 } /* Name.Tag */
39-
.highlight .nv { color: #008080 } /* Name.Variable */
40-
.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
41-
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
42-
.highlight .mf { color: #009999 } /* Literal.Number.Float */
43-
.highlight .mh { color: #009999 } /* Literal.Number.Hex */
44-
.highlight .mi { color: #009999 } /* Literal.Number.Integer */
45-
.highlight .mo { color: #009999 } /* Literal.Number.Oct */
46-
.highlight .sb { color: #d01040 } /* Literal.String.Backtick */
47-
.highlight .sc { color: #d01040 } /* Literal.String.Char */
48-
.highlight .sd { color: #d01040 } /* Literal.String.Doc */
49-
.highlight .s2 { color: #d01040 } /* Literal.String.Double */
50-
.highlight .se { color: #d01040 } /* Literal.String.Escape */
51-
.highlight .sh { color: #d01040 } /* Literal.String.Heredoc */
52-
.highlight .si { color: #d01040 } /* Literal.String.Interpol */
53-
.highlight .sx { color: #d01040 } /* Literal.String.Other */
54-
.highlight .sr { color: #009926 } /* Literal.String.Regex */
55-
.highlight .s1 { color: #d01040 } /* Literal.String.Single */
56-
.highlight .ss { color: #990073 } /* Literal.String.Symbol */
57-
.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
58-
.highlight .vc { color: #008080 } /* Name.Variable.Class */
59-
.highlight .vg { color: #008080 } /* Name.Variable.Global */
60-
.highlight .vi { color: #008080 } /* Name.Variable.Instance */
61-
.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
1+
/* Shared */
2+
:root {
3+
--color-syntax-markup-deleted-text: #b31d28;
4+
--color-syntax-markup-deleted-bg: #ffeef0;
5+
--color-syntax-markup-inserted-text: #22863a;
6+
--color-syntax-markup-inserted-bg: #f0fff4;
7+
}
8+
9+
/* No preference or prefers light */
10+
:root:not([data-prefers-color-scheme=dark]),
11+
html[data-prefers-color-scheme=light] {
12+
--color-syntax-text-primary: #24292e;
13+
--color-syntax-highlight: #ffffcc;
14+
--color-syntax-comment: #6a737d;
15+
--color-syntax-brackethighlighter-unmatched: #b31d28;
16+
--color-syntax-keyword: #24292e; /* upstream: #d73a49 */
17+
--color-syntax-string: #032f62;
18+
--color-syntax-constant: #005cc5;
19+
--color-syntax-entity-tag: #22863a;
20+
--color-syntax-entity: #6f42c1;
21+
}
22+
/* Prefers dark */
23+
html[data-prefers-color-scheme=dark] {
24+
--color-syntax-text-primary: #c9d1d9;
25+
--color-syntax-highlight: #ffffcc;
26+
--color-syntax-comment: #959da5;
27+
--color-syntax-brackethighlighter-unmatched: #d73a49;
28+
--color-syntax-keyword: #c9d1d9; /* upstream: #ea4a5a */
29+
--color-syntax-string: #79b8ff;
30+
--color-syntax-constant: #c8e1ff;
31+
--color-syntax-entity-tag: #7bcc72;
32+
--color-syntax-entity: #b392f0;
33+
}
34+
@media (prefers-color-scheme: dark) {
35+
:root:not([data-prefers-color-scheme=light]) {
36+
--color-syntax-text-primary: #c9d1d9;
37+
--color-syntax-highlight: #ffffcc;
38+
--color-syntax-comment: #959da5;
39+
--color-syntax-brackethighlighter-unmatched: #d73a49;
40+
--color-syntax-keyword: #c9d1d9; /* upstream: #ea4a5a */
41+
--color-syntax-string: #79b8ff;
42+
--color-syntax-constant: #c8e1ff;
43+
--color-syntax-entity-tag: #7bcc72;
44+
--color-syntax-entity: #b392f0;
45+
}
46+
}
47+
48+
.highlight .hll { background-color: var(--color-syntax-highlight) }
49+
50+
/* Comment, Comment.Multiline, Comment.Single */
51+
.highlight .c,
52+
.highlight .cm,
53+
.highlight .c1 { color: var(--color-syntax-comment); font-style: italic }
54+
55+
/* Comment.Preproc, Comment.Special */
56+
.highlight .cp,
57+
.highlight .cs { color: var(--color-syntax-comment); font-weight: bold; font-style: italic }
58+
59+
/* Error */
60+
.highlight .err { color: var(--color-syntax-brackethighlighter-unmatched) }
61+
62+
/* Generic.Error, Generic.Traceback */
63+
.highlight .gr,
64+
.highlight .gt { color: var(--color-syntax-brackethighlighter-unmatched) }
65+
66+
/* Keyword, Keyword.Constant, Keyword.Declaration, Keyword.Namespace, Keyword.Pseudo, Keyword.Reserved, Keyword.Type */
67+
.highlight .k,
68+
.highlight .kc,
69+
.highlight .kd,
70+
.highlight .kn,
71+
.highlight .kp,
72+
.highlight .kr,
73+
.highlight .kt { color: var(--color-syntax-keyword); font-weight: bold }
74+
75+
/* Literal.Number, Literal.String, Literal.Number.Float, Literal.Number.Hex, Literal.Number.Integer, Literal.Number.Oct, Literal.String.Backtick, Literal.String.Char, Literal.String.Doc, Literal.String.Double, Literal.String.Escape, Literal.String.Heredoc, Literal.String.Interpol, Literal.String.Other, Literal.String.Regex, Literal.String.Single, Literal.String.Symbol, Literal.Number.Integer.Long */
76+
.highlight .m,
77+
.highlight .s,
78+
.highlight .mf,
79+
.highlight .mh,
80+
.highlight .mi,
81+
.highlight .mo,
82+
.highlight .sb,
83+
.highlight .sc,
84+
.highlight .sd,
85+
.highlight .s2,
86+
.highlight .se,
87+
.highlight .sh,
88+
.highlight .si,
89+
.highlight .sx,
90+
.highlight .sr,
91+
.highlight .s1,
92+
.highlight .ss,
93+
.highlight .il { color: var(--color-syntax-string) }
94+
95+
/* Name.Attribute, Name.Constant, Name.Variable, Name.Variable.Class, Name.Variable.Global, Name.Variable.Instance */
96+
.highlight .na,
97+
.highlight .no,
98+
.highlight .nv,
99+
.highlight .vc,
100+
.highlight .vg,
101+
.highlight .vi { color: var(--color-syntax-constant) }
102+
103+
/* Name.Decorator, Name.Builtin, Name.Namespace, Name.Builtin.Pseudo */
104+
.highlight .nd,
105+
.highlight .nb,
106+
.highlight .nn,
107+
.highlight .bp { color: var(--color-syntax-constant); font-weight: bold; }
108+
109+
/* Name.Tag */
110+
.highlight .nt { color: var(--color-syntax-entity-tag) }
111+
112+
/* Name.Entity */
113+
.highlight .ni { color: var(--color-syntax-entity) }
114+
115+
/* Name.Class, Name.Exception, Name.Function, Name.Label */
116+
.highlight .nc,
117+
.highlight .ne,
118+
.highlight .nf,
119+
.highlight .nl { color: var(--color-syntax-entity); font-weight: bold }
120+
121+
/* Generic.Strong */
122+
.highlight .gs { font-weight: bold }
123+
124+
/* Generic.Deleted */
125+
.highlight .gd { color: var(--color-syntax-markup-deleted-text); background-color: var(--color-syntax-markup-deleted-bg) }
126+
127+
/* Generic.Inserted */
128+
.highlight .gi { color: var(--color-syntax-markup-inserted-text); background-color: var(--color-syntax-markup-inserted-bg) }
129+
130+
/* Operator, Operator.Word */
131+
.highlight .o,
132+
.highlight .ow { color: var(--color-syntax-text-primary); font-weight: bold }
133+
134+
/* Text.Whitespace */
135+
.highlight .w { color: var(--color-syntax-text-primary) }
136+
137+
/* Generic.Heading, Generic.Output, Generic.Prompt, Generic.Subheading */
138+
.highlight .gh,
139+
.highlight .go,
140+
.highlight .gp,
141+
.highlight .gu { color: var(--color-syntax-text-primary) }
142+
143+
/* Generic.Emph */
144+
.highlight .ge { color: var(--color-syntax-text-primary); font-style: italic }

‎docs/index.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
function storeColorSchemePreference() {
2+
// Get color scheme preference from URL
3+
const url = new URL(window.location.href)
4+
const params = new URLSearchParams(url.search)
5+
6+
// Return early if there’s nothing to store
7+
if (!params.has('prefers-color-scheme')) {
8+
return
9+
}
10+
11+
const param = params.get('prefers-color-scheme').toLowerCase()
12+
if (['light', 'dark'].includes(param)) {
13+
// Store preference in Local Storage
14+
window.localStorage.setItem('prefers-color-scheme', param)
15+
} else {
16+
// Clear preference in Local Storage
17+
window.localStorage.clear('prefers-color-scheme')
18+
}
19+
20+
// Remove color scheme preference from URL
21+
params.delete('prefers-color-scheme')
22+
url.search = params.toString()
23+
history.replaceState(null, '', url)
24+
}
25+
26+
function applyColorSchemePreference() {
27+
// Get color scheme preference from Local Storage
28+
const preference = window.localStorage.getItem('prefers-color-scheme')
29+
30+
// Return early if no preference exists
31+
if (!preference) {
32+
return
33+
}
34+
35+
// Write preference to <body> attribute
36+
document.body.parentElement.setAttribute('data-prefers-color-scheme', preference)
37+
}
38+
39+
storeColorSchemePreference()
40+
applyColorSchemePreference()

‎lighthouserc.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
{
22
"ci": {
33
"collect": {
4-
"url": ["http://localhost:4000/"],
4+
"url": [
5+
"http://localhost:4000/?prefers-color-scheme=light",
6+
"http://localhost:4000/?prefers-color-scheme=dark"
7+
],
58
"startServerCommand": "cd docs && bundle exec jekyll serve"
69
},
710
"assert": {

0 commit comments

Comments
 (0)