Skip to content

Commit d3f60cb

Browse files
alexdlnalexdln
authored
chore: restore color modes (#2361)
1 parent 95c2aae commit d3f60cb

File tree

4 files changed

+95
-116
lines changed

4 files changed

+95
-116
lines changed

‎app/assets/main.css‎

Lines changed: 92 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -5,84 +5,83 @@
55
box-sizing: border-box;
66
}
77

8-
/* :root:not([data-theme='light']), */
9-
/* :root[data-theme='dark'] { */
10-
/* background colors */
11-
/* --bg: var(--bg-color, oklch(0.171 0 0)); */
12-
/* --bg-subtle: var(--bg-subtle-color, oklch(0.198 0 0)); */
13-
/* --bg-muted: var(--bg-muted-color, oklch(0.236 0 0)); */
14-
/* --bg-elevated: var(--bg-elevated-color, oklch(0.266 0 0)); */
15-
16-
/* text colors */
17-
/* --fg: oklch(0.982 0 0); */
18-
/* --fg-muted: oklch(0.749 0 0); */
19-
/* --fg-subtle: oklch(0.673 0 0); */
20-
21-
/* border, separator colors */
22-
/* --border: oklch(0.269 0 0); */
23-
/* --border-subtle: oklch(0.239 0 0); */
24-
/* --border-hover: oklch(0.371 0 0); */
25-
26-
/* accent color, set by user from settings */
27-
/* --accent: var(--accent-color, oklch(0.787 0.128 230.318)); */
28-
/* --accent-muted: var(--accent-color, oklch(0.922 0 0)); */
29-
30-
/* accent colors */
31-
/* --swatch-sky: oklch(0.787 0.128 230.318); */
32-
/* --swatch-coral: oklch(0.704 0.177 14.75); */
33-
/* --swatch-amber: oklch(0.828 0.165 84.429); */
34-
/* --swatch-emerald: oklch(0.792 0.153 166.95); */
35-
/* --swatch-violet: oklch(0.78 0.148 286.067); */
36-
/* --swatch-magenta: oklch(0.78 0.15 330); */
37-
/* --swatch-neutral: oklch(1 0 0); */
38-
39-
/* syntax highlighting colors */
40-
/* --syntax-fn: oklch(0.727 0.137 299.149); */
41-
/* --syntax-str: oklch(0.829 0.088 252.458); */
42-
/* --syntax-kw: oklch(0.721 0.162 15.494); */
43-
/* --syntax-comment: oklch(0.551 0.019 250.976); */
44-
45-
/* badge colors for background & text */
46-
/* --badge-orange: oklch(0.67 0.185 55); */
47-
/* --badge-yellow: oklch(0.588 0.183 91); */
48-
/* --badge-green: oklch(0.566 0.202 165); */
49-
/* --badge-cyan: oklch(0.571 0.181 210); */
50-
/* --badge-blue: oklch(0.579 0.191 252); */
51-
/* --badge-indigo: oklch(0.573 0.262 276.966); */
52-
/* --badge-purple: oklch(0.495 0.172 295); */
53-
/* --badge-pink: oklch(0.584 0.189 343); */
54-
/* } */
55-
56-
/* :root[data-theme='dark'][data-bg-theme='slate'] { */
57-
/* --bg: oklch(0.151 0.018 264.695); */
58-
/* --bg-subtle: oklch(0.179 0.015 262.421); */
59-
/* --bg-muted: oklch(0.214 0.018 261.234); */
60-
/* --bg-elevated: oklch(0.259 0.021 260.031); */
61-
/* } */
62-
63-
/* :root[data-theme='dark'][data-bg-theme='zinc'] { */
64-
/* --bg: oklch(0.158 0.005 285.823); */
65-
/* --bg-subtle: oklch(0.188 0.005 285.894); */
66-
/* --bg-muted: oklch(0.219 0.005 285.929); */
67-
/* --bg-elevated: oklch(0.256 0.006 286.033); */
68-
/* } */
69-
70-
/* :root[data-theme='dark'][data-bg-theme='stone'] { */
71-
/* --bg: oklch(0.164 0.004 89.25); */
72-
/* --bg-subtle: oklch(0.198 0.008 89.321); */
73-
/* --bg-muted: oklch(0.228 0.015 89.386); */
74-
/* --bg-elevated: oklch(0.252 0.018 84.298); */
75-
/* } */
76-
77-
/* :root[data-theme='dark'][data-bg-theme='black'] { */
78-
/* --bg: oklch(0 0 0); */
79-
/* --bg-subtle: oklch(0.148 0 0); */
80-
/* --bg-muted: oklch(0.204 0 0); */
81-
/* --bg-elevated: oklch(0.264 0 0); */
82-
/* } */
83-
84-
/* :root[data-theme='light'] { */
85-
:root {
8+
:root:not([data-theme='light']),
9+
:root[data-theme='dark'] {
10+
/* background colors */
11+
--bg: var(--bg-color, oklch(0.171 0 0));
12+
--bg-subtle: var(--bg-subtle-color, oklch(0.198 0 0));
13+
--bg-muted: var(--bg-muted-color, oklch(0.236 0 0));
14+
--bg-elevated: var(--bg-elevated-color, oklch(0.266 0 0));
15+
16+
/* text colors */
17+
--fg: oklch(0.982 0 0);
18+
--fg-muted: oklch(0.749 0 0);
19+
--fg-subtle: oklch(0.673 0 0);
20+
21+
/* border, separator colors */
22+
--border: oklch(0.269 0 0);
23+
--border-subtle: oklch(0.239 0 0);
24+
--border-hover: oklch(0.371 0 0);
25+
26+
/* accent color, set by user from settings */
27+
--accent: var(--accent-color, oklch(0.787 0.128 230.318));
28+
--accent-muted: var(--accent-color, oklch(0.922 0 0));
29+
30+
/* accent colors */
31+
--swatch-sky: oklch(0.787 0.128 230.318);
32+
--swatch-coral: oklch(0.704 0.177 14.75);
33+
--swatch-amber: oklch(0.828 0.165 84.429);
34+
--swatch-emerald: oklch(0.792 0.153 166.95);
35+
--swatch-violet: oklch(0.78 0.148 286.067);
36+
--swatch-magenta: oklch(0.78 0.15 330);
37+
--swatch-neutral: oklch(1 0 0);
38+
39+
/* syntax highlighting colors */
40+
--syntax-fn: oklch(0.727 0.137 299.149);
41+
--syntax-str: oklch(0.829 0.088 252.458);
42+
--syntax-kw: oklch(0.721 0.162 15.494);
43+
--syntax-comment: oklch(0.551 0.019 250.976);
44+
45+
/* badge colors for background & text */
46+
--badge-orange: oklch(0.67 0.185 55);
47+
--badge-yellow: oklch(0.588 0.183 91);
48+
--badge-green: oklch(0.566 0.202 165);
49+
--badge-cyan: oklch(0.571 0.181 210);
50+
--badge-blue: oklch(0.579 0.191 252);
51+
--badge-indigo: oklch(0.573 0.262 276.966);
52+
--badge-purple: oklch(0.495 0.172 295);
53+
--badge-pink: oklch(0.584 0.189 343);
54+
}
55+
56+
:root[data-theme='dark'][data-bg-theme='slate'] {
57+
--bg: oklch(0.151 0.018 264.695);
58+
--bg-subtle: oklch(0.179 0.015 262.421);
59+
--bg-muted: oklch(0.214 0.018 261.234);
60+
--bg-elevated: oklch(0.259 0.021 260.031);
61+
}
62+
63+
:root[data-theme='dark'][data-bg-theme='zinc'] {
64+
--bg: oklch(0.158 0.005 285.823);
65+
--bg-subtle: oklch(0.188 0.005 285.894);
66+
--bg-muted: oklch(0.219 0.005 285.929);
67+
--bg-elevated: oklch(0.256 0.006 286.033);
68+
}
69+
70+
:root[data-theme='dark'][data-bg-theme='stone'] {
71+
--bg: oklch(0.164 0.004 89.25);
72+
--bg-subtle: oklch(0.198 0.008 89.321);
73+
--bg-muted: oklch(0.228 0.015 89.386);
74+
--bg-elevated: oklch(0.252 0.018 84.298);
75+
}
76+
77+
:root[data-theme='dark'][data-bg-theme='black'] {
78+
--bg: oklch(0 0 0);
79+
--bg-subtle: oklch(0.148 0 0);
80+
--bg-muted: oklch(0.204 0 0);
81+
--bg-elevated: oklch(0.264 0 0);
82+
}
83+
84+
:root[data-theme='light'] {
8685
--bg: var(--bg-color, oklch(1 0 0));
8786
--bg-subtle: var(--bg-subtle-color, oklch(0.979 0.001 286.375));
8887
--bg-muted: var(--bg-muted-color, oklch(0.955 0.001 286.76));
@@ -123,50 +122,44 @@
123122
--badge-cyan: oklch(0.571 0.181 210);
124123
}
125124

126-
/* :root[data-theme='light'][data-bg-theme='slate'] { */
127-
:root[data-bg-theme='slate'] {
125+
:root[data-theme='light'][data-bg-theme='slate'] {
128126
--bg: oklch(1 0 0);
129127
--bg-subtle: oklch(0.982 0.008 269.62);
130128
--bg-muted: oklch(0.96 0.008 261.234);
131129
--bg-elevated: oklch(0.943 0.012 255.52);
132130
}
133131

134-
/* :root[data-theme='light'][data-bg-theme='zinc'] { */
135-
:root[data-bg-theme='zinc'] {
132+
:root[data-theme='light'][data-bg-theme='zinc'] {
136133
--bg: oklch(1 0 0);
137134
--bg-subtle: oklch(0.979 0.004 286.53);
138135
--bg-muted: oklch(0.958 0.004 286.39);
139136
--bg-elevated: oklch(0.939 0.004 286.32);
140137
}
141138

142-
/* :root[data-theme='light'][data-bg-theme='stone'] { */
143-
:root[data-bg-theme='stone'] {
139+
:root[data-theme='light'][data-bg-theme='stone'] {
144140
--bg: oklch(1 0 0);
145141
--bg-subtle: oklch(0.979 0.004 88.762);
146142
--bg-muted: oklch(0.958 0.005 88.743);
147143
--bg-elevated: oklch(0.943 0.005 88.731);
148144
}
149145

150-
/* :root[data-theme='light'][data-bg-theme='black'] { */
151-
:root[data-bg-theme='black'] {
146+
:root[data-theme='light'][data-bg-theme='black'] {
152147
--bg-subtle: var(--bg-subtle-color, oklch(0.979 0 0));
153148
}
154149

155150
@media (prefers-contrast: more) {
156-
/* :root[data-theme='dark'] { */
157-
/* text colors */
158-
/* --fg: oklch(1 0 0); */
159-
/* --fg-muted: oklch(0.769 0 0); */
160-
/* --fg-subtle: oklch(0.693 0 0); */
161-
162-
/* border, separator colors */
163-
/* --border: oklch(0.769 0 0); */
164-
/* --border-subtle: oklch(0.739 0 0); */
165-
/* --border-hover: oklch(0.771 0 0); */
166-
/* } */
151+
:root[data-theme='dark'] {
152+
/* text colors */
153+
--fg: oklch(1 0 0);
154+
--fg-muted: oklch(0.769 0 0);
155+
--fg-subtle: oklch(0.693 0 0);
156+
/* border, separator colors */
157+
--border: oklch(0.769 0 0);
158+
--border-subtle: oklch(0.739 0 0);
159+
--border-hover: oklch(0.771 0 0);
160+
}
167161

168-
/* :root[data-theme='light'] { */
169-
:root {
162+
:root[data-theme='light'] {
170163
/* text colors */
171164
--fg: oklch(0 0 0);
172165
--fg-muted: oklch(0.329 0 0);

‎app/pages/index.vue‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -92,16 +92,6 @@ defineOgImageComponent('Default', {
9292
</search>
9393

9494
<BuildEnvironment class="mt-4" />
95-
<p class="max-w-3xl mx-auto text-center">
96-
<b>Update:</b>
97-
We’ve completed our user experience research and carefully reviewed the results. To
98-
deliver the best possible experience, we’ve decided to <b>remove the dark theme</b>. We’re
99-
committed to making decisions based on what works best for our users and are glad we took
100-
the time to validate this through
101-
<a href="/theme-research" target="_blank" rel="noopener noreferrer" class="underline"
102-
>user research</a
103-
>. Thank you for participating 🤍
104-
</p>
10595
</header>
10696

10797
<nav

‎app/pages/settings.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
const router = useRouter()
33
const { settings } = useSettings()
44
const { locale: currentLocale, locales, setLocale: setNuxti18nLocale } = useI18n()
5-
// const colorMode = useColorMode()
5+
const colorMode = useColorMode()
66
const { currentLocaleStatus, isSourceLocale } = useI18nStatus()
77
const keyboardShortcutsEnabled = useKeyboardShortcuts()
88
@@ -66,7 +66,7 @@ const setLocale: typeof setNuxti18nLocale = newLocale => {
6666
</h2>
6767
<div class="bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 space-y-6">
6868
<!-- Theme selector -->
69-
<!-- <div class="space-y-2">
69+
<div class="space-y-2">
7070
<label for="theme-select" class="block text-sm text-fg font-medium">
7171
{{ $t('settings.theme') }}
7272
</label>
@@ -82,7 +82,7 @@ const setLocale: typeof setNuxti18nLocale = newLocale => {
8282
{ label: $t('settings.theme_dark'), value: 'dark' },
8383
]"
8484
/>
85-
</div> -->
85+
</div>
8686

8787
<!-- Accent colors -->
8888
<div class="space-y-3">

‎vercel.json‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@
22
"$schema": "https://openapi.vercel.sh/vercel.json",
33
"trailingSlash": false,
44
"redirects": [
5-
{
6-
"source": "/theme-research",
7-
"destination": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
8-
},
95
{
106
"source": "/(.*)",
117
"has": [

0 commit comments

Comments
 (0)