feat: add theme toggle button (#142)

app/components/editor/index.tsx

@@ -50,7 +50,7 @@ export const EditorScreen = () => {
     const { message } = extractPageContent(boxType, t, lang);
     return message;
   };
-  const { t, lang, theme } = useLang();
+  const { t, lang, theme, toggleTheme } = useLang();
 
   useEffect(() => {
     const fetchCasbinVersion = async () => {
@@ -464,6 +464,20 @@ export const EditorScreen = () => {
             {echo}
           </div>
           <div className="mr-3">
+            <button
+              onClick={toggleTheme}
+              aria-label={theme !== 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
+              className="theme-toggle-button mr-2"
+            >
+              <img
+                src={theme !== 'dark' ? 'sun.svg' : 'moon.svg'}
+                alt={theme !== 'dark' ? 'Light mode' : 'Dark mode'}
+                className="w-6 h-6 transition-opacity duration-300"
+                style={{
+                  filter: theme === 'dark' ? 'invert(1)' : 'invert(0)',
+                }}
+              />
+            </button>
             <LanguageMenu />
           </div>
         </div>

app/context/LangContext.tsx

@@ -39,12 +39,13 @@ export const LangProvider = ({ children }: { children: ReactNode }) => {
     const urlParams = new URLSearchParams(window.location.search);
     const urlTheme = urlParams.get('theme');
     const savedLang = localStorage.getItem('lang');
+    const savedTheme = localStorage.getItem('theme') as 'light' | 'dark' | null;
 
     if (savedLang) {
       setLangState(savedLang);
     } else {
       const browserLang = navigator.language.split('-')[0];
-      const supportedLangs = ['en', 'zh', 'hant', 'ja', 'fr', 'de'];
+      const supportedLangs = ['en', 'zh', 'hant', 'ja', 'fr', 'de', 'es', 'id', 'ko', 'ru', 'vi', 'pt', 'it', 'ms', 'tr', 'ar'];
       const defaultLang = supportedLangs.includes(browserLang) ? browserLang : 'en';
       setLangState(defaultLang);
       localStorage.setItem('lang', defaultLang);
@@ -53,6 +54,8 @@ export const LangProvider = ({ children }: { children: ReactNode }) => {
     if (urlTheme === 'dark' || urlTheme === 'light') {
       setTheme(urlTheme);
       localStorage.setItem('theme', urlTheme);
+    } else if (savedTheme) {
+      setTheme(savedTheme);
     } else {
       const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
       setTheme(prefersDark ? 'dark' : 'light');
@@ -62,6 +65,14 @@ export const LangProvider = ({ children }: { children: ReactNode }) => {
     setIsLoading(false);
   }, []);
 
+  useEffect(() => {
+    if (theme === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, [theme]);
+
   const setLang = (newLang: string) => {
     setLangState(newLang);
     localStorage.setItem('lang', newLang);

app/globals.css

@@ -6,6 +6,10 @@ button:hover img {
   filter: brightness(0) invert(1);
 }
 
+.custom-theme-button:hover img {
+  filter: none !important;
+}
+
 .dropdown-content {
   max-height: var(--radix-dropdown-menu-content-available-height);
   overflow-y: auto;

app/page.tsx

@@ -15,10 +15,12 @@
 'use client';
 import { EditorScreen } from '@/app/components/editor';
 import { clsx } from 'clsx';
+import { useLang } from '@/app/context/LangContext';
 
 export default function Home() {
+  const { theme } = useLang();
   return (
-    <main className="flex flex-col h-screen">
+    <main className={`flex flex-col h-screen ${theme === 'dark' ? 'bg-customDark' : 'bg-white'}`}>
       <div className="flex-grow overflow-hidden">
         <EditorScreen />
       </div>

tailwind.config.ts

@@ -1,17 +1,15 @@
 import type { Config } from 'tailwindcss';
 
 const config: Config = {
-  content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
+  content: ['./pages/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}'],
   theme: {
     extend: {
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      },
+      colors: {
+        customDark: 'rgb(36, 37, 38)',
       },
     },
   },