refs #4795 Switch theme

locales/en/translation.json

@@ -166,7 +166,8 @@
   "settings": {
     "title": "Settings",
     "language": "Language",
-    "font_size": "Font size"
+    "font_size": "Font size",
+    "theme": "Color theme"
   },
   "thirdparty": {
     "title": "Third-party licenses"

renderer/components/Settings.tsx

@@ -24,9 +24,21 @@ const languages = [
   }
 ]
 
+const themes = [
+  {
+    label: 'Blue',
+    value: 'theme-blue'
+  },
+  {
+    label: 'Orange',
+    value: 'theme-orange'
+  }
+]
+
 export default function Settings(props: Props) {
   const [language, setLanguage] = useState<localeType>('en')
   const [fontSize, setFontSize] = useState<number>(16)
+  const [theme, setTheme] = useState<string>('theme-blue')
 
   useEffect(() => {
     if (typeof localStorage !== 'undefined') {
@@ -55,6 +67,14 @@ export default function Settings(props: Props) {
     props.reloadSettings()
   }
 
+  const themeChanged = (e: string) => {
+    setTheme(e)
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem('theme', e)
+    }
+    props.reloadSettings()
+  }
+
   return (
     <Dialog open={props.opened} handler={props.close} size="sm">
       <DialogHeader>
@@ -88,6 +108,22 @@ export default function Settings(props: Props) {
               </Select>
             </div>
           </div>
+          <div>
+            <div className="mb-2">
+              <Typography>
+                <FormattedMessage id="settings.theme" />
+              </Typography>
+            </div>
+            <div>
+              <Select id="theme" onChange={themeChanged} value={theme}>
+                {themes.map(t => (
+                  <Option key={t.value} value={t.value}>
+                    {t.label}
+                  </Option>
+                ))}
+              </Select>
+            </div>
+          </div>
         </div>
       </DialogBody>
     </Dialog>

renderer/components/layouts/account.tsx

@@ -33,6 +33,7 @@ export default function Layout({ children }: LayoutProps) {
   const [openThirdparty, setOpenThirdparty] = useState(false)
   const [style, setStyle] = useState<CSSProperties>({})
   const [openPopover, setOpenPopover] = useState(false)
+  const [theme, setTheme] = useState('theme-blue')
 
   const { switchLang } = useContext(Context)
   const router = useRouter()
@@ -116,11 +117,15 @@ export default function Layout({ children }: LayoutProps) {
           fontSize: `${fontSize}px`
         })
       }
+      const t = localStorage.getItem('theme')
+      if (t && t.length > 0) {
+        setTheme(t)
+      }
     }
   }
 
   return (
-    <div className="app flex flex-col min-h-screen theme-blue" style={style}>
+    <div className={`app flex flex-col min-h-screen ${theme}`} style={style}>
       <main className="flex w-full box-border my-0 mx-auto min-h-screen">
         <aside className="w-16 theme-account-bg flex flex-col justify-between">
           <div>