feat(site/blog): dark mode btn

qhanw · Oct 8, 2024 · e074975 · e074975
1 parent 3db1f6b
commit e074975
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/site/blog/app/(web)/code-snippets/[slug]/styles.scss b/site/blog/app/(web)/code-snippets/[slug]/styles.scss
@@ -1,9 +1,16 @@
-.prose pre.shiki.vitesse-light {
-  font-family: DM Mono, Input Mono, Fira Code, monospace;
+.prose pre.shiki {
+  font-family:
+    DM Mono,
+    Input Mono,
+    Fira Code,
+    monospace;
   font-size: 0.92em;
   line-height: 1.4;
   // margin: 0.5em 0;
 
   background-color: #f9f9f9 !important;
 }
 
+.dark .prose pre.shiki {
+  background-color: rgb(15 23 42) !important;
+}
diff --git a/site/blog/app/(web)/components/Theme.tsx b/site/blog/app/(web)/components/Theme.tsx
@@ -1,5 +1,4 @@
 "use client";
-import clsx from "clsx";
 import { useTheme } from "next-themes";
 
 export default function Theme() {
@@ -12,9 +11,7 @@ export default function Theme() {
       onClick={() => setTheme(isDark ? "light" : "dark")}
       className="text-slate-800 dark:text-white cursor-pointer"
     >
-      <i
-        className={clsx({ "i-ri:sun-fill": !isDark, "i-ri:moon-fill": isDark })}
-      />
+      <i className={isDark ? "i-ri:sun-fill" : "i-ri:moon-fill"} />
     </a>
   );
 }