refactor: simplify theme management and localization

- Removed scaled and mono theme options from the theme selector and related components to streamline theme management.
- Updated localization files to reflect the removal of unused theme translations.
- Cleaned up CSS by eliminating unnecessary theme styles, enhancing maintainability and performance.
- Adjusted the WebsiteMetadata interface to remove references to obsolete themes, improving code clarity.

messages/en.json

@@ -18,17 +18,11 @@
     },
     "theme": {
       "label": "Toggle theme",
-      "default-theme": "Default Theme",
       "default": "Default",
       "blue": "Blue",
       "green": "Green",
       "amber": "Amber",
-      "neutral": "Neutral",
-      "scaled-theme": "Scaled Theme",
-      "blue-scaled": "Blue Scaled",
-      "default-scaled": "Default Scaled",
-      "mono-theme": "Mono Theme",
-      "mono-scaled": "Mono Scaled"
+      "neutral": "Neutral"
     },
     "copy": "Copy",
     "saving": "Saving...",

messages/zh.json

@@ -18,17 +18,11 @@
     },
     "theme": {
       "label": "切换主题",
-      "default-theme": "默认主题",
       "default": "默认",
       "blue": "蓝色",
       "green": "绿色",
       "amber": "橙色",
-      "neutral": "中性",
-      "scaled-theme": "缩放主题",
-      "default-scaled": "默认缩放",
-      "blue-scaled": "蓝色缩放",
-      "mono-theme": "等宽主题",
-      "mono-scaled": "等宽缩放"
+      "neutral": "中性"
     },
     "copy": "复制",
     "save": "保存",

src/components/layout/active-theme-provider.tsx

@@ -55,9 +55,6 @@ export function ActiveThemeProvider({
         document.body.classList.remove(className);
       });
     document.body.classList.add(`theme-${activeTheme}`);
-    if (activeTheme.endsWith("-scaled")) {
-      document.body.classList.add("theme-scaled");
-    }
   }, [activeTheme]);
 
   return (

src/components/layout/theme-selector.tsx

@@ -7,12 +7,11 @@ import {
   SelectGroup,
   SelectItem,
   SelectLabel,
-  SelectSeparator,
   SelectTrigger,
-  SelectValue,
+  SelectValue
 } from "@/components/ui/select";
-import { useThemeConfig } from "./active-theme-provider";
 import { useTranslations } from "next-intl";
+import { useThemeConfig } from "./active-theme-provider";
 
 /**
  * 1. The component allows the user to select the theme of the website
@@ -48,24 +47,6 @@ export function ThemeSelector() {
     },
   ];
 
-  const SCALED_THEMES = [
-    {
-      name: t('default-scaled'),
-      value: "default-scaled",
-    },
-    {
-      name: t('blue-scaled'),
-      value: "blue-scaled",
-    },
-  ];
-
-  const MONO_THEMES = [
-    {
-      name: t('mono-scaled'),
-      value: "mono-scaled",
-    },
-  ];
-
   return (
     <div className="flex items-center gap-2">
       <Label htmlFor="theme-selector" className="sr-only">
@@ -81,7 +62,6 @@ export function ThemeSelector() {
         </SelectTrigger>
         <SelectContent align="end">
           <SelectGroup>
-            <SelectLabel>{t('default-theme')}</SelectLabel>
             {DEFAULT_THEMES.map((theme) => (
               <SelectItem key={theme.name} value={theme.value}
                 className="cursor-pointer"
@@ -90,27 +70,6 @@ export function ThemeSelector() {
               </SelectItem>
             ))}
           </SelectGroup>
-          <SelectSeparator />
-          <SelectGroup>
-            <SelectLabel>{t('scaled-theme')}</SelectLabel>
-            {SCALED_THEMES.map((theme) => (
-              <SelectItem key={theme.name} value={theme.value}
-                className="cursor-pointer"
-              >
-                {theme.name}
-              </SelectItem>
-            ))}
-          </SelectGroup>
-          <SelectGroup>
-            <SelectLabel>{t('mono-theme')}</SelectLabel>
-            {MONO_THEMES.map((theme) => (
-              <SelectItem key={theme.name} value={theme.value}
-                className="cursor-pointer"
-              >
-                {theme.name}
-              </SelectItem>
-            ))}
-          </SelectGroup>
         </SelectContent>
       </Select>
     </div>

src/styles/globals.css

@@ -204,35 +204,18 @@ body {
 }
 
 /*
- * All the themes are copied from the shadcn-ui dashboard example
+ * 1. all the themes are copied from the shadcn-ui dashboard example
  * https://github.com/shadcn-ui/ui/blob/main/apps/v4/app/(examples)/dashboard/theme.css
  * https://github.com/TheOrcDev/orcish-dashboard/blob/main/app/globals.css
+ *
+ * 2. we suggest always using the default theme for better user experience,
+ * and then override the .theme-default to customize the theme
  */
-.theme-scaled {
-  @media (min-width: 1024px) {
-    --radius: 0.6rem;
-    --text-lg: 1.05rem;
-    --text-base: 0.85rem;
-    --text-sm: 0.8rem;
-    --spacing: 0.222222rem;
-  }
-
-  [data-slot="card"] {
-    --spacing: 0.16rem;
-  }
-
-  [data-slot="select-trigger"],
-  [data-slot="toggle-group-item"] {
-    --spacing: 0.222222rem;
-  }
-}
-
 .theme-default{
   /* default theme */
 }
 
-.theme-neutral,
-.theme-neutral-scaled {
+.theme-neutral {
   --primary: var(--color-neutral-600);
   --primary-foreground: var(--color-neutral-50);
 
@@ -242,8 +225,7 @@ body {
   }
 }
 
-.theme-blue,
-.theme-blue-scaled {
+.theme-blue {
   --primary: var(--color-blue-600);
   --primary-foreground: var(--color-blue-50);
 
@@ -253,8 +235,7 @@ body {
   }
 }
 
-.theme-green,
-.theme-green-scaled {
+.theme-green {
   --primary: var(--color-lime-600);
   --primary-foreground: var(--color-lime-50);
 
@@ -264,8 +245,7 @@ body {
   }
 }
 
-.theme-amber,
-.theme-amber-scaled {
+.theme-amber {
   --primary: var(--color-amber-600);
   --primary-foreground: var(--color-amber-50);
 
@@ -273,38 +253,4 @@ body {
     --primary: var(--color-amber-500);
     --primary-foreground: var(--color-amber-50);
   }
-}
-
-.theme-mono,
-.theme-mono-scaled {
-  --font-sans: var(--font-mono);
-  --primary: var(--color-neutral-600);
-  --primary-foreground: var(--color-neutral-50);
-
-  @variant dark {
-    --primary: var(--color-neutral-500);
-    --primary-foreground: var(--color-neutral-50);
-  }
-
-  .rounded-xs,
-  .rounded-sm,
-  .rounded-md,
-  .rounded-lg,
-  .rounded-xl {
-    @apply !rounded-none;
-    border-radius: 0;
-  }
-
-  .shadow-xs,
-  .shadow-sm,
-  .shadow-md,
-  .shadow-lg,
-  .shadow-xl {
-    @apply !shadow-none;
-  }
-
-  [data-slot="toggle-group"],
-  [data-slot="toggle-group-item"] {
-    @apply !rounded-none !shadow-none;
-  }
-}
+}

src/types/index.d.ts

@@ -17,11 +17,11 @@ export type WebsiteConfig = {
  * Website metadata
  */
 export interface WebsiteMetadata {
-  theme?: "default" | "blue" | "green" | "amber" | "neutral" | "default-scaled" | "blue-scaled" | "mono-scaled"; // The theme
-  ogImage?: string;                     // The image as Open Graph image
-  logoLight?: string;                   // The light logo image
-  logoDark?: string;                    // The dark logo image
-  social: SocialConfig;                 // The social media configuration
+  theme?: "default" | "blue" | "green" | "amber" | "neutral"; // The theme
+  ogImage?: string;                                           // The image as Open Graph image
+  logoLight?: string;                                         // The light logo image
+  logoDark?: string;                                          // The dark logo image
+  social: SocialConfig;                                       // The social media configuration
 }
 
 /**