fix: dark styles

moebiusmania · Jun 30, 2024 · fc2d1d6 · fc2d1d6
1 parent 8dc86e2
commit fc2d1d6
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 3 deletions.
diff --git a/components/PostsList.vue b/components/PostsList.vue
@@ -6,7 +6,7 @@
 
 <style scoped>
 ul {
-  border-top: 1px solid rgb(229, 231, 235);
+  border-top: 1px solid var(--border);
   margin: var(--sp-4) 0;
   padding: 0;
 }

diff --git a/globals.css b/globals.css
@@ -23,9 +23,11 @@ html.light {
   --text-content-dark: inherit;
   --text-base-content: oklch(0.223899 0.031305 278.072);
   --text-secodary-content: oklch(0.653694 0.054756 256.688);
+  --bg: var(--white);
   --bg-neutral: oklch(0.958796 0.008588 247.915);
 
   --header-link-hover: inherit;
+  --border: rgb(229, 231, 235);
 
   --badge-bg: var(--primary);
   --badge-text: oklch(1 0 0);
@@ -36,14 +38,20 @@ html.dark {
   --text-dark: oklch(0.22 0.019 237.69);
   --text-content-dark: oklch(0.773835 0.043586 245.097);
   --text-base-content: var(--text-content-dark);
+  --bg: var(--text-dark);
   --bg-neutral: var(--text-dark);
 
   --header-link-hover: oklch(0.7 0.019 237.69);
+  --border: #4B5563;
 
   --badge-bg: var(--primary);
   --badge-text: var(--text-dark);
 }
 
+html {
+  background-color: var(--bg-neutral);
+}
+
 /* TYPOGRAPHY ELEMENTS */
 
 h1 {

diff --git a/pages/about.vue b/pages/about.vue
@@ -30,7 +30,7 @@ article {
 
   & hr {
     border: 0;
-    border-top: 1px solid rgb(229, 231, 235);
+    border-top: 1px solid var(--border);
     margin: var(--sp-4) 0;
   }
 

diff --git a/pages/post/page/[page].vue b/pages/post/page/[page].vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { ParsedContent } from "@nuxt/content/dist/runtime/types";
+import type { ParsedContent } from "@nuxt/content/";
 import type { Ref } from "vue";
 import { ref } from "vue";