From 0620a2f74781b80eedb3a777aafe9600a17e4ee1 Mon Sep 17 00:00:00 2001 From: Alexander Medvedev Date: Sun, 27 Sep 2026 09:12:41 +0200 Subject: [PATCH] fix: theme --- app/assets/css/main.css | 63 ++++++++++-- app/components/BlogList.vue | 10 +- app/components/Nav.vue | 39 ++++++-- app/pages/[...slug].vue | 11 +-- bun.lock | 186 ++++++++---------------------------- nuxt.config.ts | 9 +- package.json | 1 + 7 files changed, 142 insertions(+), 177 deletions(-) diff --git a/app/assets/css/main.css b/app/assets/css/main.css index a5d33bc..36b2e71 100644 --- a/app/assets/css/main.css +++ b/app/assets/css/main.css @@ -1,11 +1,15 @@ @import "tailwindcss"; +@plugin "@tailwindcss/typography"; + +@custom-variant dark (&:where(.dark, .dark *)); @theme { - --color-background: #0d0d0d; - --color-surface: #1a1a1a; + --color-background: #ffffff; + --color-surface: #f4f4f5; - --color-foreground: #f0f0f0; - --color-muted: #999; + --color-foreground: #18181b; + --color-muted: #52525b; + --color-border: #e4e4e7; --color-primary: #ff6b2c; --color-blue: #4169e1; @@ -26,12 +30,34 @@ --radius-none: 0; } +@layer theme { + .dark { + --color-background: #0d0d0d; + --color-surface: #1a1a1a; + + --color-foreground: #f0f0f0; + --color-muted: #999999; + --color-border: #27272a; + } +} + +.dark { + --color-background: #0d0d0d; + --color-surface: #1a1a1a; + + --color-foreground: #f0f0f0; + --color-muted: #999999; + --color-border: #27272a; +} + html { - font-size: 20px; + font-size: 20px; + color-scheme: light dark; } body { font-size: 1.1rem; + transition: background-color 0.2s ease, color 0.2s ease; } @layer base { @@ -40,11 +66,11 @@ body { } h1 { @apply text-5xl font-black mb-10 text-foreground tracking-tight; } - h2 { @apply text-3xl font-bold mt-16 mb-6 text-primary uppercase tracking-widest border-b border-surface pb-2; } + h2 { @apply text-3xl font-bold mt-16 mb-6 text-primary uppercase tracking-widest border-b border-border dark:border-surface pb-2; } h3 { @apply text-2xl font-bold mt-10 mb-4 text-foreground/90; } .prose p { - @apply mb-8 text-foreground/85 max-w-3xl; + @apply mb-8 text-foreground/90 max-w-3xl; } .prose a, @@ -56,16 +82,33 @@ body { } .prose p a { - @apply text-primary font-semibold hover:text-white; + @apply text-primary font-semibold hover:text-foreground transition-colors; } .prose blockquote { - @apply border-l-4 border-primary bg-surface/50 py-2 px-6 italic my-10 text-foreground/90; + @apply border-l-4 border-primary bg-surface/70 py-2 px-6 italic my-10 text-foreground/90; } .prose code { - @apply bg-surface text-primary px-1.5 py-0.5 rounded font-mono text-sm; + @apply bg-surface text-primary px-1.5 py-0.5 rounded font-mono text-sm border border-border; } + + .prose pre { + @apply border border-border dark:border-white/10; + } +} + +/* Shiki dual themes */ +html.dark .shiki, +html.dark .shiki span { + color: var(--shiki-dark) !important; + background-color: var(--shiki-dark-bg) !important; +} + +html:not(.dark) .shiki, +html:not(.dark) .shiki span { + color: var(--shiki-light) !important; + background-color: var(--shiki-light-bg) !important; } /* responsive container for youtube/video embeds generated by markdown */ diff --git a/app/components/BlogList.vue b/app/components/BlogList.vue index 832bd29..402ab91 100644 --- a/app/components/BlogList.vue +++ b/app/components/BlogList.vue @@ -14,12 +14,12 @@ const { data: posts } = await useAsyncData("blog-posts", () => { v-for="post in posts" :to="post.path" :key="post.id" - class="no-underline text-inherit block mb-5" + class="group no-underline text-inherit block mb-5" > -
-

{{ post.title }}

-

{{ post.description }}

-
+
+

{{ post.title }}

+

{{ post.description }}

+
{{ post.author.name }} • {{ diff --git a/app/components/Nav.vue b/app/components/Nav.vue index 36b4082..bedb15b 100644 --- a/app/components/Nav.vue +++ b/app/components/Nav.vue @@ -1,15 +1,21 @@ - + + -