Added theme switcher

swarajbachu · Jul 7, 2023 · e06dff3 · e06dff3
1 parent 3aa3579
commit e06dff3
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 82 deletions.
diff --git a/app/menu.tsx b/app/menu.tsx
@@ -7,10 +7,28 @@ import {
 } from "@/ui/primitives/popover";
 import { useContext } from "react";
 import { AppContext } from "./providers";
-import { Check, Menu as MenuIcon } from "lucide-react";
+import { Check, Menu as MenuIcon, Monitor, Moon, SunDim } from "lucide-react";
+import { useTheme } from "next-themes";
+
+const fonts = ["Default", "Serif", "Mono"];
+const appearances = [
+  {
+    theme: "System",
+    icon: <Monitor className="h-4 w-4" />,
+  },
+  {
+    theme: "Light",
+    icon: <SunDim className="h-4 w-4" />,
+  },
+  {
+    theme: "Dark",
+    icon: <Moon className="h-4 w-4" />,
+  },
+];
 
 export default function Menu() {
   const { font: currentFont, setFont } = useContext(AppContext);
+  const { theme: currentTheme, setTheme } = useTheme();
 
   return (
     <Popover>
@@ -19,8 +37,8 @@ export default function Menu() {
       </PopoverTrigger>
       <PopoverContent className="w-52 divide-y divide-stone-200" align="end">
         <div className="p-2">
-          <p className="text-sm font-medium text-stone-500">Style</p>
-          {["Default", "Serif", "Mono"].map((font) => (
+          <p className="p-2 text-xs font-medium text-stone-500">Font</p>
+          {fonts.map((font) => (
             <button
               key={font}
               className="flex w-full items-center justify-between rounded px-2 py-1 text-sm text-stone-600 hover:bg-stone-100"
@@ -36,6 +54,28 @@ export default function Menu() {
             </button>
           ))}
         </div>
+        <div className="p-2">
+          <p className="p-2 text-xs font-medium text-stone-500">Appearance</p>
+          {appearances.map(({ theme, icon }) => (
+            <button
+              key={theme}
+              className="flex w-full items-center justify-between rounded px-2 py-1.5 text-sm text-stone-600 hover:bg-stone-100"
+              onClick={() => {
+                setTheme(theme.toLowerCase());
+              }}
+            >
+              <div className="flex items-center space-x-2">
+                <div className="rounded-sm border border-stone-200 p-1">
+                  {icon}
+                </div>
+                <span>{theme}</span>
+              </div>
+              {currentTheme === theme.toLowerCase() && (
+                <Check className="h-4 w-4" />
+              )}
+            </button>
+          ))}
+        </div>
       </PopoverContent>
     </Popover>
   );

diff --git a/styles/globals.css b/styles/globals.css
@@ -3,6 +3,7 @@
 @tailwind utilities;
 
 :root {
+  --novel-black: rgb(0 0 0);
   --novel-white: rgb(255 255 255);
   --novel-stone-50: rgb(250 250 249);
   --novel-stone-100: rgb(245 245 244);
@@ -27,17 +28,18 @@
 }
 
 .dark-theme {
+  --novel-black: rgb(255 255 255);
   --novel-white: rgb(25 25 25);
-  --novel-stone-50: rgb(30 30 29);
-  --novel-stone-100: rgb(35 35 34);
-  --novel-stone-200: rgb(41 37 36);
-  --novel-stone-300: rgb(66 69 71);
-  --novel-stone-400: rgb(112 118 123);
-  --novel-stone-500: rgb(160 167 173);
-  --novel-stone-600: rgb(193 199 204);
-  --novel-stone-700: rgb(212 217 221);
-  --novel-stone-800: rgb(229 232 235);
-  --novel-stone-900: rgb(232 234 235);
+  --novel-stone-50: rgb(35 35 34);
+  --novel-stone-100: rgb(41 37 36);
+  --novel-stone-200: rgb(66 69 71);
+  --novel-stone-300: rgb(112 118 123);
+  --novel-stone-400: rgb(160 167 173);
+  --novel-stone-500: rgb(193 199 204);
+  --novel-stone-600: rgb(212 217 221);
+  --novel-stone-700: rgb(229 232 235);
+  --novel-stone-800: rgb(232 234 235);
+  --novel-stone-900: rgb(240, 240, 241);
 
   --novel-highlight-default: #000000;
   --novel-highlight-purple: #3f2c4b;

diff --git a/ui/editor/components/color-selector.tsx b/ui/editor/components/color-selector.tsx
@@ -16,7 +16,7 @@ interface ColorSelectorProps {
 const TEXT_COLORS: BubbleColorMenuItem[] = [
   {
     name: "Default",
-    color: "#000000",
+    color: "var(--novel-black)",
   },
   {
     name: "Purple",

diff --git a/ui/editor/components/link-selector.tsx b/ui/editor/components/link-selector.tsx
@@ -57,7 +57,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({
           />
           {editor.getAttributes("link").href ? (
             <button
-              className="flex items-center rounded-sm p-1 text-red-600 transition-all hover:bg-red-100"
+              className="flex items-center rounded-sm p-1 text-red-600 transition-all hover:bg-red-100 dark:hover:bg-red-800"
               onClick={() => {
                 editor.chain().focus().unsetLink().run();
                 setIsOpen(false);

diff --git a/ui/editor/components/theme-switcher.tsx b/ui/editor/components/theme-switcher.tsx
diff --git a/ui/primitives/leaflet.tsx b/ui/primitives/leaflet.tsx
@@ -59,16 +59,16 @@ export default function Leaflet({
         dragConstraints={{ top: 0, bottom: 0 }}
       >
         <div
-          className={`rounded-t-4xl -mb-1 flex h-7 w-full items-center justify-center border-t border-gray-200`}
+          className={`rounded-t-4xl -mb-1 flex h-7 w-full items-center justify-center border-t border-stone-200`}
         >
-          <div className="-mr-1 h-1 w-6 rounded-full bg-gray-300 transition-all group-active:rotate-12" />
-          <div className="h-1 w-6 rounded-full bg-gray-300 transition-all group-active:-rotate-12" />
+          <div className="-mr-1 h-1 w-6 rounded-full bg-stone-300 transition-all group-active:rotate-12" />
+          <div className="h-1 w-6 rounded-full bg-stone-300 transition-all group-active:-rotate-12" />
         </div>
         {children}
       </motion.div>
       <motion.div
         key="leaflet-backdrop"
-        className="fixed inset-0 z-30 bg-gray-100 bg-opacity-10 backdrop-blur"
+        className="fixed inset-0 z-30 bg-stone-100 bg-opacity-10 backdrop-blur"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}