chore: themes language support and refactor

Author: anmolsinghbhatia

packages/constants/src/index.ts

@@ -14,5 +14,6 @@ export * from "./swr";
 export * from "./user";
 export * from "./workspace";
 export * from "./stickies";
+export * from "./themes";
 export * from "./profile";
 export * from "./workspace-drafts";

web/core/constants/themes.ts packages/constants/src/themes.tsweb/core/constants/themes.ts renamed to packages/constants/src/themes.ts

@@ -1,9 +1,15 @@
-export const THEMES = ["light", "dark", "light-contrast", "dark-contrast", "custom"];
+export const THEMES = [
+  "light",
+  "dark",
+  "light-contrast",
+  "dark-contrast",
+  "custom",
+];
 
 export interface I_THEME_OPTION {
   key: string;
   value: string;
-  label: string;
+  i18n_label: string;
   type: string;
   icon: {
     border: string;
@@ -16,7 +22,7 @@ export const THEME_OPTIONS: I_THEME_OPTION[] = [
   {
     key: "system_preference",
     value: "system",
-    label: "System preference",
+    i18n_label: "System preference",
     type: "light",
     icon: {
       border: "#DEE2E6",
@@ -27,7 +33,7 @@ export const THEME_OPTIONS: I_THEME_OPTION[] = [
   {
     key: "light",
     value: "light",
-    label: "Light",
+    i18n_label: "Light",
     type: "light",
     icon: {
       border: "#DEE2E6",
@@ -38,7 +44,7 @@ export const THEME_OPTIONS: I_THEME_OPTION[] = [
   {
     key: "dark",
     value: "dark",
-    label: "Dark",
+    i18n_label: "Dark",
     type: "dark",
     icon: {
       border: "#2E3234",
@@ -49,7 +55,7 @@ export const THEME_OPTIONS: I_THEME_OPTION[] = [
   {
     key: "light_contrast",
     value: "light-contrast",
-    label: "Light high contrast",
+    i18n_label: "Light high contrast",
     type: "light",
     icon: {
       border: "#000000",
@@ -60,7 +66,7 @@ export const THEME_OPTIONS: I_THEME_OPTION[] = [
   {
     key: "dark_contrast",
     value: "dark-contrast",
-    label: "Dark high contrast",
+    i18n_label: "Dark high contrast",
     type: "dark",
     icon: {
       border: "#FFFFFF",
@@ -71,7 +77,7 @@ export const THEME_OPTIONS: I_THEME_OPTION[] = [
   {
     key: "custom",
     value: "custom",
-    label: "Custom theme",
+    i18n_label: "Custom theme",
     type: "light",
     icon: {
       border: "#FFC9C9",

packages/i18n/src/locales/en/translations.json

@@ -960,5 +960,28 @@
         }
       }
     }
+  },
+
+  "themes": {
+    "theme_options": {
+      "system_preference": {
+        "label": "System preference"
+      },
+      "light": {
+        "label": "Light"
+      },
+      "dark": {
+        "label": "Dark"
+      },
+      "light_contrast": {
+        "label": "Light high contrast"
+      },
+      "dark_contrast": {
+        "label": "Dark high contrast"
+      },
+      "custom": {
+        "label": "Custom theme"
+      }
+    }
   }
 }

web/app/profile/appearance/page.tsx

@@ -3,6 +3,8 @@
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
+// plane imports
+import { I_THEME_OPTION, THEME_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { IUserTheme } from "@plane/types";
 import { setPromiseToast } from "@plane/ui";
@@ -11,7 +13,6 @@ import { LogoSpinner } from "@/components/common";
 import { CustomThemeSelector, ThemeSwitch, PageHead } from "@/components/core";
 import { ProfileSettingContentHeader, ProfileSettingContentWrapper } from "@/components/profile";
 // constants
-import { I_THEME_OPTION, THEME_OPTIONS } from "@/constants/themes";
 // helpers
 import { applyTheme, unsetCustomCssVariables } from "@/helpers/theme.helper";
 // hooks

web/core/components/command-palette/actions/theme-actions.tsx

@@ -5,9 +5,10 @@ import { Command } from "cmdk";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
 import { Settings } from "lucide-react";
+// plane imports
+import { THEME_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, setToast } from "@plane/ui";
-// constants
-import { THEME_OPTIONS } from "@/constants/themes";
 // hooks
 import { useUserProfile } from "@/hooks/store";
 
@@ -20,6 +21,7 @@ export const CommandPaletteThemeActions: FC<Props> = observer((props) => {
   const { setTheme } = useTheme();
   // hooks
   const { updateUserTheme } = useUserProfile();
+  const { t } = useTranslation();
   // states
   const [mounted, setMounted] = useState(false);
 
@@ -53,7 +55,7 @@ export const CommandPaletteThemeActions: FC<Props> = observer((props) => {
         >
           <div className="flex items-center gap-2 text-custom-text-200">
             <Settings className="h-4 w-4 text-custom-text-200" />
-            {theme.label}
+            {t(theme.i18n_label)}
           </div>
         </Command.Item>
       ))}

web/core/components/core/theme/theme-switch.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import { FC } from "react";
+// plane imports
+import { I_THEME_OPTION, THEME_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // constants
 import { CustomSelect } from "@plane/ui";
-import { THEME_OPTIONS, I_THEME_OPTION } from "@/constants/themes";
 // ui
 
 type Props = {