diff --git a/app/assets/main.css b/app/assets/main.css
index 1d279645bb..23d41a7c98 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -5,84 +5,83 @@
box-sizing: border-box;
}
-/* :root:not([data-theme='light']), */
-/* :root[data-theme='dark'] { */
-/* background colors */
-/* --bg: var(--bg-color, oklch(0.171 0 0)); */
-/* --bg-subtle: var(--bg-subtle-color, oklch(0.198 0 0)); */
-/* --bg-muted: var(--bg-muted-color, oklch(0.236 0 0)); */
-/* --bg-elevated: var(--bg-elevated-color, oklch(0.266 0 0)); */
-
-/* text colors */
-/* --fg: oklch(0.982 0 0); */
-/* --fg-muted: oklch(0.749 0 0); */
-/* --fg-subtle: oklch(0.673 0 0); */
-
-/* border, separator colors */
-/* --border: oklch(0.269 0 0); */
-/* --border-subtle: oklch(0.239 0 0); */
-/* --border-hover: oklch(0.371 0 0); */
-
-/* accent color, set by user from settings */
-/* --accent: var(--accent-color, oklch(0.787 0.128 230.318)); */
-/* --accent-muted: var(--accent-color, oklch(0.922 0 0)); */
-
-/* accent colors */
-/* --swatch-sky: oklch(0.787 0.128 230.318); */
-/* --swatch-coral: oklch(0.704 0.177 14.75); */
-/* --swatch-amber: oklch(0.828 0.165 84.429); */
-/* --swatch-emerald: oklch(0.792 0.153 166.95); */
-/* --swatch-violet: oklch(0.78 0.148 286.067); */
-/* --swatch-magenta: oklch(0.78 0.15 330); */
-/* --swatch-neutral: oklch(1 0 0); */
-
-/* syntax highlighting colors */
-/* --syntax-fn: oklch(0.727 0.137 299.149); */
-/* --syntax-str: oklch(0.829 0.088 252.458); */
-/* --syntax-kw: oklch(0.721 0.162 15.494); */
-/* --syntax-comment: oklch(0.551 0.019 250.976); */
-
-/* badge colors for background & text */
-/* --badge-orange: oklch(0.67 0.185 55); */
-/* --badge-yellow: oklch(0.588 0.183 91); */
-/* --badge-green: oklch(0.566 0.202 165); */
-/* --badge-cyan: oklch(0.571 0.181 210); */
-/* --badge-blue: oklch(0.579 0.191 252); */
-/* --badge-indigo: oklch(0.573 0.262 276.966); */
-/* --badge-purple: oklch(0.495 0.172 295); */
-/* --badge-pink: oklch(0.584 0.189 343); */
-/* } */
-
-/* :root[data-theme='dark'][data-bg-theme='slate'] { */
-/* --bg: oklch(0.151 0.018 264.695); */
-/* --bg-subtle: oklch(0.179 0.015 262.421); */
-/* --bg-muted: oklch(0.214 0.018 261.234); */
-/* --bg-elevated: oklch(0.259 0.021 260.031); */
-/* } */
-
-/* :root[data-theme='dark'][data-bg-theme='zinc'] { */
-/* --bg: oklch(0.158 0.005 285.823); */
-/* --bg-subtle: oklch(0.188 0.005 285.894); */
-/* --bg-muted: oklch(0.219 0.005 285.929); */
-/* --bg-elevated: oklch(0.256 0.006 286.033); */
-/* } */
-
-/* :root[data-theme='dark'][data-bg-theme='stone'] { */
-/* --bg: oklch(0.164 0.004 89.25); */
-/* --bg-subtle: oklch(0.198 0.008 89.321); */
-/* --bg-muted: oklch(0.228 0.015 89.386); */
-/* --bg-elevated: oklch(0.252 0.018 84.298); */
-/* } */
-
-/* :root[data-theme='dark'][data-bg-theme='black'] { */
-/* --bg: oklch(0 0 0); */
-/* --bg-subtle: oklch(0.148 0 0); */
-/* --bg-muted: oklch(0.204 0 0); */
-/* --bg-elevated: oklch(0.264 0 0); */
-/* } */
-
-/* :root[data-theme='light'] { */
-:root {
+:root:not([data-theme='light']),
+:root[data-theme='dark'] {
+ /* background colors */
+ --bg: var(--bg-color, oklch(0.171 0 0));
+ --bg-subtle: var(--bg-subtle-color, oklch(0.198 0 0));
+ --bg-muted: var(--bg-muted-color, oklch(0.236 0 0));
+ --bg-elevated: var(--bg-elevated-color, oklch(0.266 0 0));
+
+ /* text colors */
+ --fg: oklch(0.982 0 0);
+ --fg-muted: oklch(0.749 0 0);
+ --fg-subtle: oklch(0.673 0 0);
+
+ /* border, separator colors */
+ --border: oklch(0.269 0 0);
+ --border-subtle: oklch(0.239 0 0);
+ --border-hover: oklch(0.371 0 0);
+
+ /* accent color, set by user from settings */
+ --accent: var(--accent-color, oklch(0.787 0.128 230.318));
+ --accent-muted: var(--accent-color, oklch(0.922 0 0));
+
+ /* accent colors */
+ --swatch-sky: oklch(0.787 0.128 230.318);
+ --swatch-coral: oklch(0.704 0.177 14.75);
+ --swatch-amber: oklch(0.828 0.165 84.429);
+ --swatch-emerald: oklch(0.792 0.153 166.95);
+ --swatch-violet: oklch(0.78 0.148 286.067);
+ --swatch-magenta: oklch(0.78 0.15 330);
+ --swatch-neutral: oklch(1 0 0);
+
+ /* syntax highlighting colors */
+ --syntax-fn: oklch(0.727 0.137 299.149);
+ --syntax-str: oklch(0.829 0.088 252.458);
+ --syntax-kw: oklch(0.721 0.162 15.494);
+ --syntax-comment: oklch(0.551 0.019 250.976);
+
+ /* badge colors for background & text */
+ --badge-orange: oklch(0.67 0.185 55);
+ --badge-yellow: oklch(0.588 0.183 91);
+ --badge-green: oklch(0.566 0.202 165);
+ --badge-cyan: oklch(0.571 0.181 210);
+ --badge-blue: oklch(0.579 0.191 252);
+ --badge-indigo: oklch(0.573 0.262 276.966);
+ --badge-purple: oklch(0.495 0.172 295);
+ --badge-pink: oklch(0.584 0.189 343);
+}
+
+:root[data-theme='dark'][data-bg-theme='slate'] {
+ --bg: oklch(0.151 0.018 264.695);
+ --bg-subtle: oklch(0.179 0.015 262.421);
+ --bg-muted: oklch(0.214 0.018 261.234);
+ --bg-elevated: oklch(0.259 0.021 260.031);
+}
+
+:root[data-theme='dark'][data-bg-theme='zinc'] {
+ --bg: oklch(0.158 0.005 285.823);
+ --bg-subtle: oklch(0.188 0.005 285.894);
+ --bg-muted: oklch(0.219 0.005 285.929);
+ --bg-elevated: oklch(0.256 0.006 286.033);
+}
+
+:root[data-theme='dark'][data-bg-theme='stone'] {
+ --bg: oklch(0.164 0.004 89.25);
+ --bg-subtle: oklch(0.198 0.008 89.321);
+ --bg-muted: oklch(0.228 0.015 89.386);
+ --bg-elevated: oklch(0.252 0.018 84.298);
+}
+
+:root[data-theme='dark'][data-bg-theme='black'] {
+ --bg: oklch(0 0 0);
+ --bg-subtle: oklch(0.148 0 0);
+ --bg-muted: oklch(0.204 0 0);
+ --bg-elevated: oklch(0.264 0 0);
+}
+
+:root[data-theme='light'] {
--bg: var(--bg-color, oklch(1 0 0));
--bg-subtle: var(--bg-subtle-color, oklch(0.979 0.001 286.375));
--bg-muted: var(--bg-muted-color, oklch(0.955 0.001 286.76));
@@ -123,50 +122,44 @@
--badge-cyan: oklch(0.571 0.181 210);
}
-/* :root[data-theme='light'][data-bg-theme='slate'] { */
-:root[data-bg-theme='slate'] {
+:root[data-theme='light'][data-bg-theme='slate'] {
--bg: oklch(1 0 0);
--bg-subtle: oklch(0.982 0.008 269.62);
--bg-muted: oklch(0.96 0.008 261.234);
--bg-elevated: oklch(0.943 0.012 255.52);
}
-/* :root[data-theme='light'][data-bg-theme='zinc'] { */
-:root[data-bg-theme='zinc'] {
+:root[data-theme='light'][data-bg-theme='zinc'] {
--bg: oklch(1 0 0);
--bg-subtle: oklch(0.979 0.004 286.53);
--bg-muted: oklch(0.958 0.004 286.39);
--bg-elevated: oklch(0.939 0.004 286.32);
}
-/* :root[data-theme='light'][data-bg-theme='stone'] { */
-:root[data-bg-theme='stone'] {
+:root[data-theme='light'][data-bg-theme='stone'] {
--bg: oklch(1 0 0);
--bg-subtle: oklch(0.979 0.004 88.762);
--bg-muted: oklch(0.958 0.005 88.743);
--bg-elevated: oklch(0.943 0.005 88.731);
}
-/* :root[data-theme='light'][data-bg-theme='black'] { */
-:root[data-bg-theme='black'] {
+:root[data-theme='light'][data-bg-theme='black'] {
--bg-subtle: var(--bg-subtle-color, oklch(0.979 0 0));
}
@media (prefers-contrast: more) {
- /* :root[data-theme='dark'] { */
- /* text colors */
- /* --fg: oklch(1 0 0); */
- /* --fg-muted: oklch(0.769 0 0); */
- /* --fg-subtle: oklch(0.693 0 0); */
-
- /* border, separator colors */
- /* --border: oklch(0.769 0 0); */
- /* --border-subtle: oklch(0.739 0 0); */
- /* --border-hover: oklch(0.771 0 0); */
- /* } */
+ :root[data-theme='dark'] {
+ /* text colors */
+ --fg: oklch(1 0 0);
+ --fg-muted: oklch(0.769 0 0);
+ --fg-subtle: oklch(0.693 0 0);
+ /* border, separator colors */
+ --border: oklch(0.769 0 0);
+ --border-subtle: oklch(0.739 0 0);
+ --border-hover: oklch(0.771 0 0);
+ }
- /* :root[data-theme='light'] { */
- :root {
+ :root[data-theme='light'] {
/* text colors */
--fg: oklch(0 0 0);
--fg-muted: oklch(0.329 0 0);
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 2f094d3a1a..48c5575b00 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -92,16 +92,6 @@ defineOgImageComponent('Default', {
- Update: - We’ve completed our user experience research and carefully reviewed the results. To - deliver the best possible experience, we’ve decided to remove the dark theme. We’re - committed to making decisions based on what works best for our users and are glad we took - the time to validate this through - user research. Thank you for participating 🤍 -