@chronogrove/ui 0.76.0 → 0.77.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/jest.config.cjs +1 -0
  2. package/package.json +10 -1
  3. package/src/gatsby/build-theme-ui-color-mode-head-components.js +36 -0
  4. package/src/gatsby/index.js +4 -0
  5. package/src/gatsby/index.spec.js +131 -0
  6. package/src/gatsby/on-pre-render-html-sort.js +21 -0
  7. package/src/gatsby/on-route-update-color-mode.js +14 -0
  8. package/.turbo/turbo-test$colon$coverage.log +0 -44
  9. package/.turbo/turbo-test.log +0 -168
  10. package/coverage/clover.xml +0 -131
  11. package/coverage/coverage-final.json +0 -13
  12. package/coverage/lcov-report/base.css +0 -224
  13. package/coverage/lcov-report/block-navigation.js +0 -87
  14. package/coverage/lcov-report/browser-sync.js.html +0 -268
  15. package/coverage/lcov-report/favicon.png +0 -0
  16. package/coverage/lcov-report/index.html +0 -161
  17. package/coverage/lcov-report/prettify.css +0 -1
  18. package/coverage/lcov-report/prettify.js +0 -2
  19. package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
  20. package/coverage/lcov-report/sorter.js +0 -210
  21. package/coverage/lcov-report/src/button.js.html +0 -160
  22. package/coverage/lcov-report/src/color-mode/browser-sync.js.html +0 -268
  23. package/coverage/lcov-report/src/color-mode/constants.js.html +0 -121
  24. package/coverage/lcov-report/src/color-mode/head-inline.js.html +0 -304
  25. package/coverage/lcov-report/src/color-mode/index.html +0 -176
  26. package/coverage/lcov-report/src/color-mode/index.js.html +0 -124
  27. package/coverage/lcov-report/src/color-mode/normalize.js.html +0 -112
  28. package/coverage/lcov-report/src/color-mode/resolve-theme-colors.js.html +0 -154
  29. package/coverage/lcov-report/src/color-toggle.js.html +0 -142
  30. package/coverage/lcov-report/src/emotion-cache.js.html +0 -151
  31. package/coverage/lcov-report/src/helpers/index.html +0 -116
  32. package/coverage/lcov-report/src/helpers/isDarkMode.js.html +0 -91
  33. package/coverage/lcov-report/src/index.html +0 -161
  34. package/coverage/lcov-report/src/provider.js.html +0 -124
  35. package/coverage/lcov-report/src/skip-nav/SkipNavContent.js.html +0 -133
  36. package/coverage/lcov-report/src/skip-nav/SkipNavLink.js.html +0 -301
  37. package/coverage/lcov-report/src/skip-nav/index.html +0 -131
  38. package/coverage/lcov-report/src/theme.js.html +0 -2143
  39. package/coverage/lcov.info +0 -309
package/coverage/lcov-report/src/color-mode/index.js.html DELETED
@@ -1,124 +0,0 @@
1
-
2
- <!doctype html>
3
- <html lang="en">
4
-
5
- <head>
6
- <title>Code coverage report for src/color-mode/index.js</title>
7
- <meta charset="utf-8" />
8
- <link rel="stylesheet" href="../../prettify.css" />
9
- <link rel="stylesheet" href="../../base.css" />
10
- <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
11
- <meta name="viewport" content="width=device-width, initial-scale=1" />
12
- <style type='text/css'>
13
- .coverage-summary .sorter {
14
- background-image: url(../../sort-arrow-sprite.png);
15
- }
16
- </style>
17
- </head>
18
-
19
- <body>
20
- <div class='wrapper'>
21
- <div class='pad1'>
22
- <h1><a href="../../index.html">All files</a> / <a href="index.html">src/color-mode</a> index.js</h1>
23
- <div class='clearfix'>
24
-
25
- <div class='fl pad1y space-right2'>
26
- <span class="strong">0% </span>
27
- <span class="quiet">Statements</span>
28
- <span class='fraction'>0/0</span>
29
- </div>
30
-
31
-
32
- <div class='fl pad1y space-right2'>
33
- <span class="strong">0% </span>
34
- <span class="quiet">Branches</span>
35
- <span class='fraction'>0/0</span>
36
- </div>
37
-
38
-
39
- <div class='fl pad1y space-right2'>
40
- <span class="strong">0% </span>
41
- <span class="quiet">Functions</span>
42
- <span class='fraction'>0/0</span>
43
- </div>
44
-
45
-
46
- <div class='fl pad1y space-right2'>
47
- <span class="strong">0% </span>
48
- <span class="quiet">Lines</span>
49
- <span class='fraction'>0/0</span>
50
- </div>
51
-
52
-
53
- </div>
54
- <p class="quiet">
55
- Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
56
- </p>
57
- <template id="filterTemplate">
58
- <div class="quiet">
59
- Filter:
60
- <input type="search" id="fileSearch">
61
- </div>
62
- </template>
63
- </div>
64
- <div class='status-line low'></div>
65
- <pre><table class="coverage">
66
- <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
- <a name='L2'></a><a href='#L2'>2</a>
68
- <a name='L3'></a><a href='#L3'>3</a>
69
- <a name='L4'></a><a href='#L4'>4</a>
70
- <a name='L5'></a><a href='#L5'>5</a>
71
- <a name='L6'></a><a href='#L6'>6</a>
72
- <a name='L7'></a><a href='#L7'>7</a>
73
- <a name='L8'></a><a href='#L8'>8</a>
74
- <a name='L9'></a><a href='#L9'>9</a>
75
- <a name='L10'></a><a href='#L10'>10</a>
76
- <a name='L11'></a><a href='#L11'>11</a>
77
- <a name='L12'></a><a href='#L12'>12</a>
78
- <a name='L13'></a><a href='#L13'>13</a>
79
- <a name='L14'></a><a href='#L14'>14</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
80
- <span class="cline-any cline-neutral">&nbsp;</span>
81
- <span class="cline-any cline-neutral">&nbsp;</span>
82
- <span class="cline-any cline-neutral">&nbsp;</span>
83
- <span class="cline-any cline-neutral">&nbsp;</span>
84
- <span class="cline-any cline-neutral">&nbsp;</span>
85
- <span class="cline-any cline-neutral">&nbsp;</span>
86
- <span class="cline-any cline-neutral">&nbsp;</span>
87
- <span class="cline-any cline-neutral">&nbsp;</span>
88
- <span class="cline-any cline-neutral">&nbsp;</span>
89
- <span class="cline-any cline-neutral">&nbsp;</span>
90
- <span class="cline-any cline-neutral">&nbsp;</span>
91
- <span class="cline-any cline-neutral">&nbsp;</span>
92
- <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">export {
93
- THEME_UI_COLOR_MODE_STORAGE_KEY,
94
- RECONCILE_COLOR_MODE_EVENT,
95
- CHRONOGROVE_COLOR_MODE_HEAD_PRIORITY_KEYS
96
- } from './constants.js'
97
- export { normalizeThemeUiColorMode } from './normalize.js'
98
- export { resolveChronogroveSurfaceColors } from './resolve-theme-colors.js'
99
- export {
100
- buildThemeUiNoFlashInlineScript,
101
- buildHtmlBackgroundInlineScript,
102
- buildThemeUiColorModeFallbackCss
103
- } from './head-inline.js'
104
- export { resolveThemeUiColorMode, syncThemeUiColorMode, scheduleThemeUiColorModeSync } from './browser-sync.js'
105
- &nbsp;</pre></td></tr></table></pre>
106
-
107
- <div class='push'></div><!-- for sticky footer -->
108
- </div><!-- /wrapper -->
109
- <div class='footer quiet pad2 space-top1 center small'>
110
- Code coverage generated by
111
- <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
112
- at 2026-04-10T04:55:03.811Z
113
- </div>
114
- <script src="../../prettify.js"></script>
115
- <script>
116
- window.onload = function () {
117
- prettyPrint();
118
- };
119
- </script>
120
- <script src="../../sorter.js"></script>
121
- <script src="../../block-navigation.js"></script>
122
- </body>
123
- </html>
124
-
package/coverage/lcov-report/src/color-mode/normalize.js.html DELETED
@@ -1,112 +0,0 @@
1
-
2
- <!doctype html>
3
- <html lang="en">
4
-
5
- <head>
6
- <title>Code coverage report for src/color-mode/normalize.js</title>
7
- <meta charset="utf-8" />
8
- <link rel="stylesheet" href="../../prettify.css" />
9
- <link rel="stylesheet" href="../../base.css" />
10
- <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
11
- <meta name="viewport" content="width=device-width, initial-scale=1" />
12
- <style type='text/css'>
13
- .coverage-summary .sorter {
14
- background-image: url(../../sort-arrow-sprite.png);
15
- }
16
- </style>
17
- </head>
18
-
19
- <body>
20
- <div class='wrapper'>
21
- <div class='pad1'>
22
- <h1><a href="../../index.html">All files</a> / <a href="index.html">src/color-mode</a> normalize.js</h1>
23
- <div class='clearfix'>
24
-
25
- <div class='fl pad1y space-right2'>
26
- <span class="strong">100% </span>
27
- <span class="quiet">Statements</span>
28
- <span class='fraction'>5/5</span>
29
- </div>
30
-
31
-
32
- <div class='fl pad1y space-right2'>
33
- <span class="strong">100% </span>
34
- <span class="quiet">Branches</span>
35
- <span class='fraction'>6/6</span>
36
- </div>
37
-
38
-
39
- <div class='fl pad1y space-right2'>
40
- <span class="strong">100% </span>
41
- <span class="quiet">Functions</span>
42
- <span class='fraction'>1/1</span>
43
- </div>
44
-
45
-
46
- <div class='fl pad1y space-right2'>
47
- <span class="strong">100% </span>
48
- <span class="quiet">Lines</span>
49
- <span class='fraction'>5/5</span>
50
- </div>
51
-
52
-
53
- </div>
54
- <p class="quiet">
55
- Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
56
- </p>
57
- <template id="filterTemplate">
58
- <div class="quiet">
59
- Filter:
60
- <input type="search" id="fileSearch">
61
- </div>
62
- </template>
63
- </div>
64
- <div class='status-line high'></div>
65
- <pre><table class="coverage">
66
- <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
- <a name='L2'></a><a href='#L2'>2</a>
68
- <a name='L3'></a><a href='#L3'>3</a>
69
- <a name='L4'></a><a href='#L4'>4</a>
70
- <a name='L5'></a><a href='#L5'>5</a>
71
- <a name='L6'></a><a href='#L6'>6</a>
72
- <a name='L7'></a><a href='#L7'>7</a>
73
- <a name='L8'></a><a href='#L8'>8</a>
74
- <a name='L9'></a><a href='#L9'>9</a>
75
- <a name='L10'></a><a href='#L10'>10</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
76
- <span class="cline-any cline-yes">23x</span>
77
- <span class="cline-any cline-yes">5x</span>
78
- <span class="cline-any cline-neutral">&nbsp;</span>
79
- <span class="cline-any cline-yes">18x</span>
80
- <span class="cline-any cline-yes">6x</span>
81
- <span class="cline-any cline-neutral">&nbsp;</span>
82
- <span class="cline-any cline-yes">12x</span>
83
- <span class="cline-any cline-neutral">&nbsp;</span>
84
- <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">export function normalizeThemeUiColorMode(mode) {
85
- if (mode === 'light') {
86
- return 'default'
87
- }
88
- if (mode === 'dark' || mode === 'default') {
89
- return mode
90
- }
91
- return null
92
- }
93
- &nbsp;</pre></td></tr></table></pre>
94
-
95
- <div class='push'></div><!-- for sticky footer -->
96
- </div><!-- /wrapper -->
97
- <div class='footer quiet pad2 space-top1 center small'>
98
- Code coverage generated by
99
- <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
100
- at 2026-04-10T05:07:25.092Z
101
- </div>
102
- <script src="../../prettify.js"></script>
103
- <script>
104
- window.onload = function () {
105
- prettyPrint();
106
- };
107
- </script>
108
- <script src="../../sorter.js"></script>
109
- <script src="../../block-navigation.js"></script>
110
- </body>
111
- </html>
112
-
package/coverage/lcov-report/src/color-mode/resolve-theme-colors.js.html DELETED
@@ -1,154 +0,0 @@
1
-
2
- <!doctype html>
3
- <html lang="en">
4
-
5
- <head>
6
- <title>Code coverage report for src/color-mode/resolve-theme-colors.js</title>
7
- <meta charset="utf-8" />
8
- <link rel="stylesheet" href="../../prettify.css" />
9
- <link rel="stylesheet" href="../../base.css" />
10
- <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
11
- <meta name="viewport" content="width=device-width, initial-scale=1" />
12
- <style type='text/css'>
13
- .coverage-summary .sorter {
14
- background-image: url(../../sort-arrow-sprite.png);
15
- }
16
- </style>
17
- </head>
18
-
19
- <body>
20
- <div class='wrapper'>
21
- <div class='pad1'>
22
- <h1><a href="../../index.html">All files</a> / <a href="index.html">src/color-mode</a> resolve-theme-colors.js</h1>
23
- <div class='clearfix'>
24
-
25
- <div class='fl pad1y space-right2'>
26
- <span class="strong">100% </span>
27
- <span class="quiet">Statements</span>
28
- <span class='fraction'>6/6</span>
29
- </div>
30
-
31
-
32
- <div class='fl pad1y space-right2'>
33
- <span class="strong">100% </span>
34
- <span class="quiet">Branches</span>
35
- <span class='fraction'>18/18</span>
36
- </div>
37
-
38
-
39
- <div class='fl pad1y space-right2'>
40
- <span class="strong">100% </span>
41
- <span class="quiet">Functions</span>
42
- <span class='fraction'>2/2</span>
43
- </div>
44
-
45
-
46
- <div class='fl pad1y space-right2'>
47
- <span class="strong">100% </span>
48
- <span class="quiet">Lines</span>
49
- <span class='fraction'>6/6</span>
50
- </div>
51
-
52
-
53
- </div>
54
- <p class="quiet">
55
- Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
56
- </p>
57
- <template id="filterTemplate">
58
- <div class="quiet">
59
- Filter:
60
- <input type="search" id="fileSearch">
61
- </div>
62
- </template>
63
- </div>
64
- <div class='status-line high'></div>
65
- <pre><table class="coverage">
66
- <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
- <a name='L2'></a><a href='#L2'>2</a>
68
- <a name='L3'></a><a href='#L3'>3</a>
69
- <a name='L4'></a><a href='#L4'>4</a>
70
- <a name='L5'></a><a href='#L5'>5</a>
71
- <a name='L6'></a><a href='#L6'>6</a>
72
- <a name='L7'></a><a href='#L7'>7</a>
73
- <a name='L8'></a><a href='#L8'>8</a>
74
- <a name='L9'></a><a href='#L9'>9</a>
75
- <a name='L10'></a><a href='#L10'>10</a>
76
- <a name='L11'></a><a href='#L11'>11</a>
77
- <a name='L12'></a><a href='#L12'>12</a>
78
- <a name='L13'></a><a href='#L13'>13</a>
79
- <a name='L14'></a><a href='#L14'>14</a>
80
- <a name='L15'></a><a href='#L15'>15</a>
81
- <a name='L16'></a><a href='#L16'>16</a>
82
- <a name='L17'></a><a href='#L17'>17</a>
83
- <a name='L18'></a><a href='#L18'>18</a>
84
- <a name='L19'></a><a href='#L19'>19</a>
85
- <a name='L20'></a><a href='#L20'>20</a>
86
- <a name='L21'></a><a href='#L21'>21</a>
87
- <a name='L22'></a><a href='#L22'>22</a>
88
- <a name='L23'></a><a href='#L23'>23</a>
89
- <a name='L24'></a><a href='#L24'>24</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
90
- <span class="cline-any cline-yes">12x</span>
91
- <span class="cline-any cline-yes">6x</span>
92
- <span class="cline-any cline-neutral">&nbsp;</span>
93
- <span class="cline-any cline-yes">6x</span>
94
- <span class="cline-any cline-neutral">&nbsp;</span>
95
- <span class="cline-any cline-neutral">&nbsp;</span>
96
- <span class="cline-any cline-neutral">&nbsp;</span>
97
- <span class="cline-any cline-neutral">&nbsp;</span>
98
- <span class="cline-any cline-neutral">&nbsp;</span>
99
- <span class="cline-any cline-neutral">&nbsp;</span>
100
- <span class="cline-any cline-neutral">&nbsp;</span>
101
- <span class="cline-any cline-yes">2x</span>
102
- <span class="cline-any cline-yes">2x</span>
103
- <span class="cline-any cline-yes">2x</span>
104
- <span class="cline-any cline-neutral">&nbsp;</span>
105
- <span class="cline-any cline-neutral">&nbsp;</span>
106
- <span class="cline-any cline-neutral">&nbsp;</span>
107
- <span class="cline-any cline-neutral">&nbsp;</span>
108
- <span class="cline-any cline-neutral">&nbsp;</span>
109
- <span class="cline-any cline-neutral">&nbsp;</span>
110
- <span class="cline-any cline-neutral">&nbsp;</span>
111
- <span class="cline-any cline-neutral">&nbsp;</span>
112
- <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">function pickColor(value) {
113
- if (typeof value === 'string') {
114
- return value
115
- }
116
- return null
117
- }
118
- &nbsp;
119
- /**
120
- * Surface colors used by inline SSR/CSR scripts and fallbacks.
121
- * Pass the same Theme UI theme object as `ThemeUIProvider`.
122
- */
123
- export function resolveChronogroveSurfaceColors(theme) {
124
- const colors = theme?.colors || {}
125
- const dark = colors.modes?.dark || {}
126
- return {
127
- defaultBackgroundHex: pickColor(colors.background) || '#fdf8f5',
128
- darkBackgroundHex: pickColor(dark.background) || '#14141F',
129
- defaultTextHex: pickColor(colors.text) || '#111',
130
- defaultTextMutedHex: pickColor(colors.textMuted) || '#333',
131
- darkTextHex: pickColor(dark.text) || '#fff',
132
- darkTextMutedHex: pickColor(dark.textMuted) || '#d8d8d8'
133
- }
134
- }
135
- &nbsp;</pre></td></tr></table></pre>
136
-
137
- <div class='push'></div><!-- for sticky footer -->
138
- </div><!-- /wrapper -->
139
- <div class='footer quiet pad2 space-top1 center small'>
140
- Code coverage generated by
141
- <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
142
- at 2026-04-10T05:07:25.092Z
143
- </div>
144
- <script src="../../prettify.js"></script>
145
- <script>
146
- window.onload = function () {
147
- prettyPrint();
148
- };
149
- </script>
150
- <script src="../../sorter.js"></script>
151
- <script src="../../block-navigation.js"></script>
152
- </body>
153
- </html>
154
-
package/coverage/lcov-report/src/color-toggle.js.html DELETED
@@ -1,142 +0,0 @@
1
-
2
- <!doctype html>
3
- <html lang="en">
4
-
5
- <head>
6
- <title>Code coverage report for src/color-toggle.js</title>
7
- <meta charset="utf-8" />
8
- <link rel="stylesheet" href="../prettify.css" />
9
- <link rel="stylesheet" href="../base.css" />
10
- <link rel="shortcut icon" type="image/x-icon" href="../favicon.png" />
11
- <meta name="viewport" content="width=device-width, initial-scale=1" />
12
- <style type='text/css'>
13
- .coverage-summary .sorter {
14
- background-image: url(../sort-arrow-sprite.png);
15
- }
16
- </style>
17
- </head>
18
-
19
- <body>
20
- <div class='wrapper'>
21
- <div class='pad1'>
22
- <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> color-toggle.js</h1>
23
- <div class='clearfix'>
24
-
25
- <div class='fl pad1y space-right2'>
26
- <span class="strong">100% </span>
27
- <span class="quiet">Statements</span>
28
- <span class='fraction'>3/3</span>
29
- </div>
30
-
31
-
32
- <div class='fl pad1y space-right2'>
33
- <span class="strong">100% </span>
34
- <span class="quiet">Branches</span>
35
- <span class='fraction'>2/2</span>
36
- </div>
37
-
38
-
39
- <div class='fl pad1y space-right2'>
40
- <span class="strong">100% </span>
41
- <span class="quiet">Functions</span>
42
- <span class='fraction'>2/2</span>
43
- </div>
44
-
45
-
46
- <div class='fl pad1y space-right2'>
47
- <span class="strong">100% </span>
48
- <span class="quiet">Lines</span>
49
- <span class='fraction'>3/3</span>
50
- </div>
51
-
52
-
53
- </div>
54
- <p class="quiet">
55
- Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
56
- </p>
57
- <template id="filterTemplate">
58
- <div class="quiet">
59
- Filter:
60
- <input type="search" id="fileSearch">
61
- </div>
62
- </template>
63
- </div>
64
- <div class='status-line high'></div>
65
- <pre><table class="coverage">
66
- <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
- <a name='L2'></a><a href='#L2'>2</a>
68
- <a name='L3'></a><a href='#L3'>3</a>
69
- <a name='L4'></a><a href='#L4'>4</a>
70
- <a name='L5'></a><a href='#L5'>5</a>
71
- <a name='L6'></a><a href='#L6'>6</a>
72
- <a name='L7'></a><a href='#L7'>7</a>
73
- <a name='L8'></a><a href='#L8'>8</a>
74
- <a name='L9'></a><a href='#L9'>9</a>
75
- <a name='L10'></a><a href='#L10'>10</a>
76
- <a name='L11'></a><a href='#L11'>11</a>
77
- <a name='L12'></a><a href='#L12'>12</a>
78
- <a name='L13'></a><a href='#L13'>13</a>
79
- <a name='L14'></a><a href='#L14'>14</a>
80
- <a name='L15'></a><a href='#L15'>15</a>
81
- <a name='L16'></a><a href='#L16'>16</a>
82
- <a name='L17'></a><a href='#L17'>17</a>
83
- <a name='L18'></a><a href='#L18'>18</a>
84
- <a name='L19'></a><a href='#L19'>19</a>
85
- <a name='L20'></a><a href='#L20'>20</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
86
- <span class="cline-any cline-neutral">&nbsp;</span>
87
- <span class="cline-any cline-neutral">&nbsp;</span>
88
- <span class="cline-any cline-neutral">&nbsp;</span>
89
- <span class="cline-any cline-neutral">&nbsp;</span>
90
- <span class="cline-any cline-neutral">&nbsp;</span>
91
- <span class="cline-any cline-yes">2x</span>
92
- <span class="cline-any cline-neutral">&nbsp;</span>
93
- <span class="cline-any cline-yes">2x</span>
94
- <span class="cline-any cline-neutral">&nbsp;</span>
95
- <span class="cline-any cline-neutral">&nbsp;</span>
96
- <span class="cline-any cline-neutral">&nbsp;</span>
97
- <span class="cline-any cline-yes">2x</span>
98
- <span class="cline-any cline-neutral">&nbsp;</span>
99
- <span class="cline-any cline-neutral">&nbsp;</span>
100
- <span class="cline-any cline-neutral">&nbsp;</span>
101
- <span class="cline-any cline-neutral">&nbsp;</span>
102
- <span class="cline-any cline-neutral">&nbsp;</span>
103
- <span class="cline-any cline-neutral">&nbsp;</span>
104
- <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React from 'react'
105
- import { useColorMode } from 'theme-ui'
106
- import { Expand } from '@theme-toggles/react'
107
- import isDarkMode from '@chronogrove/ui/is-dark-mode'
108
- &nbsp;
109
- export default function ColorToggle() {
110
- const [colorMode, setColorMode] = useColorMode()
111
- &nbsp;
112
- return (
113
- &lt;Expand
114
- className='theme-toggle'
115
- toggled={isDarkMode(colorMode)}
116
- toggle={() =&gt; setColorMode(colorMode === 'default' ? 'dark' : 'default')}
117
- duration={750}
118
- aria-label='Toggle color mode'
119
- id='theme-toggle'
120
- /&gt;
121
- )
122
- }
123
- &nbsp;</pre></td></tr></table></pre>
124
-
125
- <div class='push'></div><!-- for sticky footer -->
126
- </div><!-- /wrapper -->
127
- <div class='footer quiet pad2 space-top1 center small'>
128
- Code coverage generated by
129
- <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
130
- at 2026-04-10T05:07:25.092Z
131
- </div>
132
- <script src="../prettify.js"></script>
133
- <script>
134
- window.onload = function () {
135
- prettyPrint();
136
- };
137
- </script>
138
- <script src="../sorter.js"></script>
139
- <script src="../block-navigation.js"></script>
140
- </body>
141
- </html>
142
-