Skip to content

Commit 9ccd250

Browse files
colegoldsmithcolegoldsmith
committed
theme toggle and more updates
1 parent 97a9e1f commit 9ccd250

20 files changed

+117
-65
lines changed

‎src/css/asciidoc/source-block.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,11 +78,11 @@
7878
}
7979

8080
html[data-theme="light"] .doc .source-toolbox {
81-
background: linear-gradient(to right, rgba(247, 247, 247, 0), rgb(247, 247, 247), rgb(247, 247, 247) 50%);
81+
background: linear-gradient(to right, rgba(250, 250, 250, 0), rgb(250, 250, 250), rgb(250, 250, 250) 50%);
8282
}
8383

8484
html[data-theme="dark"] .doc .source-toolbox {
85-
background: linear-gradient(to right, rgba(35, 35, 36, 0), rgb(35, 35, 36), rgb(35, 35, 36) 50%);
85+
background: linear-gradient(to right, rgba(39, 39, 42, 0), rgb(39, 39, 42), rgb(39, 39, 42) 50%);
8686
}
8787

8888
.doc .source-toolbox .copy-toast {

‎src/css/asciidoc/tabs.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,15 +67,15 @@ html[data-theme="light"] .tablist > .scroll-btn-left {
6767
}
6868

6969
html[data-theme="dark"] .tablist > .scroll-btn-left {
70-
background: linear-gradient(to left, rgba(9, 9, 9, 0), rgb(9, 9, 9), rgb(9, 9, 9) 50%);
70+
background: linear-gradient(to left, rgba(24, 24, 27, 0), rgb(24, 24, 27), rgb(24, 24, 27) 50%);
7171
}
7272

7373
html[data-theme="light"] .tablist > .scroll-btn-right {
7474
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgb(255, 255, 255) 50%);
7575
}
7676

7777
html[data-theme="dark"] .tablist > .scroll-btn-right {
78-
background: linear-gradient(to right, rgba(9, 9, 9, 0), rgb(9, 9, 9), rgb(9, 9, 9) 50%);
78+
background: linear-gradient(to right, rgba(24, 24, 27, 0), rgb(24, 24, 27), rgb(24, 24, 27) 50%);
7979
}
8080

8181
.tabs .tablist li::after {

‎src/css/base.css‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,15 @@
2121
tab-size: 4;
2222
}
2323

24+
html:has(dialog[open]) {
25+
overflow: hidden;
26+
}
27+
28+
::backdrop {
29+
background-color: var(--ds-background-backdrop);
30+
backdrop-filter: blur(4px);
31+
}
32+
2433
*,
2534
::before,
2635
::after {
@@ -77,12 +86,12 @@
7786
@media (pointer: fine) {
7887
@supports (scrollbar-width: thin) {
7988
html {
80-
scrollbar-color: var(--ds-neutral-outlined-border) var(--ds-background-body);
89+
scrollbar-color: var(--ds-text-placeholder) var(--ds-background-body);
8190
}
8291

8392
body * {
8493
scrollbar-width: thin;
85-
scrollbar-color: var(--ds-neutral-outlined-border) transparent;
94+
scrollbar-color: var(--ds-text-placeholder) transparent;
8695
}
8796
}
8897

@@ -99,7 +108,7 @@
99108

100109
::-webkit-scrollbar-thumb {
101110
background-clip: padding-box;
102-
background-color: var(--ds-neutral-outlined-border);
111+
background-color: var(--ds-text-placeholder);
103112
border: 3px solid transparent;
104113
border-radius: 12px;
105114
}
@@ -110,7 +119,7 @@
110119
}
111120

112121
::-webkit-scrollbar-thumb:hover {
113-
background-color: var(--ds-neutral-outlined-hover-border);
122+
background-color: var(--ds-text-tertiary);
114123
}
115124
}
116125
}

‎src/css/components/btn.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,27 +8,27 @@
88
}
99

1010
.btn-primary.btn-outlined {
11-
@apply border-[var(--ds-primary-outlined-border)] text-[var(--ds-primary-outlined-color)] hover:border-[var(--ds-primary-outlined-hover-border)] hover:bg-[var(--ds-primary-outlined-hover-bg)] hover:text-[var(--ds-primary-outlined-color)] disabled:border-[var(--ds-primary-outlined-disabled-border)] disabled:text-[var(--ds-primary-outlined-disabled-color)];
11+
@apply border-[var(--ds-primary-outlined-border)] text-[var(--ds-primary-outlined-color)] hover:border-[var(--ds-primary-outlined-hover-border)] hover:bg-[var(--ds-primary-outlined-hover-bg)] hover:text-[var(--ds-primary-outlined-color)] disabled:border-[var(--ds-text-disabled)] disabled:text-[var(--ds-disabled-color)];
1212
}
1313

1414
.btn-primary.btn-solid {
15-
@apply bg-[var(--ds-primary-solid-bg)] text-[var(--ds-primary-solid-color)] hover:bg-[var(--ds-primary-solid-hover-bg)] hover:text-[var(--ds-primary-solid-color)] disabled:bg-[var(--ds-primary-solid-disabled-bg)] disabled:text-[var(--ds-primary-solid-disabled-color)];
15+
@apply bg-[var(--ds-primary-solid-bg)] text-[var(--ds-primary-solid-color)] hover:bg-[var(--ds-primary-solid-hover-bg)] hover:text-[var(--ds-primary-solid-color)] disabled:bg-[var(--ds-disabled-bg)] disabled:text-[var(--ds-disabled-color)];
1616
}
1717

1818
.btn-primary.btn-soft {
19-
@apply bg-[var(--ds-primary-soft-bg)] text-[var(--ds-primary-soft-color)] hover:bg-[var(--ds-primary-soft-hover-bg)] hover:text-[var(--ds-primary-soft-color)] disabled:bg-[var(--ds-primary-soft-disabled-bg)] disabled:text-[var(--ds-primary-soft-disabled-color)];
19+
@apply bg-[var(--ds-primary-soft-bg)] text-[var(--ds-primary-soft-color)] hover:bg-[var(--ds-primary-soft-hover-bg)] hover:text-[var(--ds-primary-soft-color)] disabled:bg-[var(--ds-disabled-bg)] disabled:text-[var(--ds-disabled-color)];
2020
}
2121

2222
.btn-neutral.btn-outlined {
23-
@apply border-[var(--ds-neutral-outlined-border)] text-[var(--ds-neutral-outlined-color)] hover:border-[var(--ds-neutral-outlined-hover-border)] hover:bg-[var(--ds-neutral-outlined-hover-bg)] hover:text-[var(--ds-neutral-outlined-color)] disabled:border-[var(--ds-neutral-outlined-disabled-border)] disabled:text-[var(--ds-neutral-outlined-disabled-color)];
23+
@apply border-[var(--ds-neutral-outlined-border)] text-[var(--ds-neutral-outlined-color)] hover:border-[var(--ds-neutral-outlined-hover-border)] hover:bg-[var(--ds-neutral-outlined-hover-bg)] hover:text-[var(--ds-neutral-outlined-color)] disabled:border-[var(--ds-text-disabled)] disabled:text-[var(--ds-disabled-color)];
2424
}
2525

2626
.btn-neutral.btn-solid {
27-
@apply bg-[var(--ds-neutral-solid-bg)] text-[var(--ds-neutral-solid-color)] hover:bg-[var(--ds-neutral-solid-hover-bg)] hover:text-[var(--ds-neutral-solid-color)] disabled:bg-[var(--ds-neutral-solid-disabled-bg)] disabled:text-[var(--ds-neutral-solid-disabled-color)];
27+
@apply bg-[var(--ds-neutral-solid-bg)] text-[var(--ds-neutral-solid-color)] hover:bg-[var(--ds-neutral-solid-hover-bg)] hover:text-[var(--ds-neutral-solid-color)] disabled:bg-[var(--ds-disabled-bg)] disabled:text-[var(--ds-disabled-color)];
2828
}
2929

3030
.btn-neutral.btn-plain {
31-
@apply text-[var(--ds-neutral-plain-color)] hover:bg-[var(--ds-neutral-plain-hover-bg)] hover:text-[var(--ds-neutral-plain-color)] disabled:text-[var(--ds-neutral-plain-disabled-color)];
31+
@apply text-[var(--ds-neutral-plain-color)] hover:bg-[var(--ds-neutral-plain-hover-bg)] hover:text-[var(--ds-neutral-plain-color)] disabled:text-[var(--ds-disabled-color)];
3232
}
3333

3434
.btn-icon {

‎src/css/components/dialog.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@layer components {
22
.dialog {
3-
@apply rounded border;
3+
@apply rounded dark:border dark:shadow-none;
44

55
overscroll-behavior: contain;
66
box-shadow: 0 6px 16px 0 #0a0a0a1f;

‎src/css/docsearch.css‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,10 @@ html[data-theme="dark"] .DocSearch .DocSearch-Modal {
7676
display: none;
7777
}
7878

79+
.DocSearch .DocSearch-Container {
80+
backdrop-filter: blur(4px);
81+
}
82+
7983
.DocSearch .DocSearch-Button-Container::before,
8084
.DocSearch .DocSearch-MagnifierLabel::before {
8185
font-family: "Material Icons Outlined", sans-serif;
@@ -106,9 +110,7 @@ html[data-theme="dark"] .DocSearch .DocSearch-Modal {
106110
--docsearch-modal-width: 720px;
107111
--docsearch-modal-height: 600px;
108112
--docsearch-modal-background: var(--ds-background-body);
109-
--docsearch-modal-shadow:
110-
inset 1px 1px 0 0 rgba(255, 255, 255, 0.5),
111-
0 3px 8px 0 rgba(85, 90, 100, 1);
113+
--docsearch-modal-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.5), 0 3px 8px 0 rgba(85, 90, 100, 1);
112114

113115
/* searchbox */
114116
--docsearch-searchbox-height: var(--ds-space-7);

‎src/css/global-nav.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,13 @@ html[data-theme="light"] .global-nav > .scroll-btn-left {
2020
}
2121

2222
html[data-theme="dark"] .global-nav > .scroll-btn-left {
23-
background: linear-gradient(to left, rgba(9, 9, 9, 0), rgb(9, 9, 9), rgb(9, 9, 9) 50%);
23+
background: linear-gradient(to left, rgba(24, 24, 27, 0), rgb(24, 24, 27), rgb(24, 24, 27) 50%);
2424
}
2525

2626
html[data-theme="light"] .global-nav > .scroll-btn-right {
2727
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgb(255, 255, 255) 50%);
2828
}
2929

3030
html[data-theme="dark"] .global-nav > .scroll-btn-right {
31-
background: linear-gradient(to right, rgba(9, 9, 9, 0), rgb(9, 9, 9), rgb(9, 9, 9) 50%);
31+
background: linear-gradient(to right, rgba(24, 24, 27, 0), rgb(24, 24, 27), rgb(24, 24, 27) 50%);
3232
}

‎src/css/vars/dark.css‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
--ds-background-surface: theme(colors.zinc.900);
88
--ds-background-tooltip: theme(colors.white);
99
--ds-background-modal: theme(colors.zinc.900);
10+
--ds-background-backdrop: rgba(0, 0, 0, 0.5);
1011

1112
/* Text */
1213
--ds-text-disabled: theme(colors.zinc.700);
@@ -112,10 +113,6 @@
112113
display: none;
113114
}
114115

115-
html[data-theme="dark"] ::backdrop {
116-
--ds-background-backdrop: rgba(10, 10, 10, 0.6);
117-
}
118-
119116
@media (prefers-color-scheme: dark) {
120117
:root:not([data-theme="light"]):not([data-theme="dark"]) {
121118
@include dark-theme;

‎src/css/vars/light.css‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
@mixin light-theme {
2-
/* Background */
2+
/* Background */
33
--ds-background-body: theme(colors.white);
44
--ds-background-level1: theme(colors.zinc.50);
55
--ds-background-level2: theme(colors.zinc.100);
66
--ds-background-level3: theme(colors.zinc.200);
77
--ds-background-surface: theme(colors.white);
88
--ds-background-tooltip: theme(colors.black);
99
--ds-background-modal: theme(colors.white);
10+
--ds-background-backdrop: rgba(0, 0, 0, 0.5);
1011

1112
/* Text */
1213
--ds-text-disabled: theme(colors.zinc.200);
@@ -112,10 +113,6 @@
112113
display: none;
113114
}
114115

115-
html[data-theme="light"] ::backdrop {
116-
--ds-background-backdrop: rgba(0, 0, 0, 0.6);
117-
}
118-
119116
@media (prefers-color-scheme: light) {
120117
:root:not([data-theme="light"]):not([data-theme="dark"]) {
121118
@include light-theme;

‎src/js/03-theme-toggle.js‎

Lines changed: 31 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,40 @@
22
;(function () {
33
'use strict'
44

5-
var toggle = document.getElementById('theme-toggle')
5+
var toggleButtons = document.querySelectorAll('#theme-toggle .toggle-button')
6+
if (!toggleButtons) return
67

7-
var prefersTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
8-
var storedTheme = localStorage.getItem('theme') || prefersTheme
8+
var storedTheme = localStorage.getItem('themePreference')
9+
var theme = storedTheme || 'system'
910

10-
if (!toggle) return
11+
var toggleThumb = document.querySelector('#theme-toggle .thumb')
12+
toggleThumb.classList.add(theme)
1113

12-
toggle.onclick = function () {
13-
var currentTheme = document.documentElement.getAttribute('data-theme') || storedTheme || 'light'
14-
var targetTheme = 'light'
14+
var currentButton = document.querySelector(`#theme-toggle .toggle-button[value="${theme}"]`)
15+
if (currentButton) {
16+
currentButton.ariaPressed = 'true'
17+
currentButton.classList.add('active')
18+
}
1519

16-
if (currentTheme === 'light') {
17-
targetTheme = 'dark'
20+
toggleButtons.forEach((button) => {
21+
button.onclick = function () {
22+
var systemPreference = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
23+
var currentTheme = localStorage.getItem('themePreference') || systemPreference
24+
if (button.value === currentTheme) return
25+
if (button.value === 'system') {
26+
document.documentElement.setAttribute('data-theme', systemPreference)
27+
} else {
28+
document.documentElement.setAttribute('data-theme', button.value)
29+
}
30+
localStorage.setItem('themePreference', button.value)
31+
toggleThumb.classList.remove('system', 'light', 'dark')
32+
toggleThumb.classList.add(button.value)
33+
toggleButtons.forEach((btn) => {
34+
btn.ariaPressed = 'false'
35+
btn.classList.remove('active')
36+
})
37+
button.ariaPressed = 'true'
38+
button.classList.add('active')
1839
}
19-
20-
document.documentElement.setAttribute('data-theme', targetTheme)
21-
localStorage.setItem('theme', targetTheme)
22-
}
40+
})
2341
})()

0 commit comments

Comments
 (0)