working theming

src/ui/App.tsx

@@ -18,9 +18,10 @@ import Game from './components/menu/Game'
 import RightBar from './components/RightBar'
 import { getConfigOption, setConfigOption } from '../utils/configuration'
 import { invoke } from '@tauri-apps/api'
-import { dataDir } from '@tauri-apps/api/path'
+import { appDir, dataDir } from '@tauri-apps/api/path'
 import { appWindow } from '@tauri-apps/api/window'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
+import { getTheme, loadTheme } from '../utils/themes'
 
 interface IProps {
   [key: string]: never;
@@ -82,6 +83,13 @@ class App extends React.Component<IProps, IState> {
     const game_path = game_exe.substring(0, game_exe.replace(/\\/g, '/').lastIndexOf('/'))
     const root_path = game_path.substring(0, game_path.replace(/\\/g, '/').lastIndexOf('/'))
 
+    // Load a theme if it exists
+    const theme = await getConfigOption('theme')
+    if (theme) {
+      const themeObj = await getTheme(theme)
+      loadTheme(themeObj, document)
+    }
+
     if(!custom_bg || !/png|jpg|jpeg$/.test(custom_bg)) {
       if(game_path) {
         // Get the bg by invoking, then set the background to that bg.

src/ui/components/menu/Options.tsx

@@ -1,13 +1,15 @@
 import React from 'react'
+import { invoke } from '@tauri-apps/api'
+import { dataDir } from '@tauri-apps/api/path'
 import DirInput from '../common/DirInput'
 import Menu from './Menu'
 import Tr, { getLanguages } from '../../../utils/language'
-import './Options.css'
 import { setConfigOption, getConfig, getConfigOption } from '../../../utils/configuration'
 import Checkbox from '../common/Checkbox'
 import Divider from './Divider'
-import { invoke } from '@tauri-apps/api'
-import { dataDir } from '@tauri-apps/api/path'
+import { getThemeList } from '../../../utils/themes'
+
+import './Options.css'
 
 interface IProps {
   closeFn: () => void;
@@ -21,6 +23,8 @@ interface IState {
   language_options: { [key: string]: string }[],
   current_language: string
   bg_url_or_path: string
+  themes: string[]
+  theme: string
 }
 
 export default class Options extends React.Component<IProps, IState> {
@@ -34,7 +38,9 @@ export default class Options extends React.Component<IProps, IState> {
       grasscutter_with_game: false,
       language_options: [],
       current_language: 'en',
-      bg_url_or_path: ''
+      bg_url_or_path: '',
+      themes: ['default'],
+      theme: ''
     }
 
     this.toggleGrasscutterWithGame = this.toggleGrasscutterWithGame.bind(this)
@@ -52,7 +58,9 @@ export default class Options extends React.Component<IProps, IState> {
       grasscutter_with_game: config.grasscutter_with_game || false,
       language_options: languages,
       current_language: config.language || 'en',
-      bg_url_or_path: config.customBackground || ''
+      bg_url_or_path: config.customBackground || '',
+      themes: (await getThemeList()).map(t => t.name),
+      theme: config.theme || 'default'
     })
 
     this.forceUpdate()
@@ -70,8 +78,14 @@ export default class Options extends React.Component<IProps, IState> {
     setConfigOption('java_path', value)
   }
 
-  setLanguage(value: string) {
-    setConfigOption('language', value)
+  async setLanguage(value: string) {
+    await setConfigOption('language', value)
+    window.location.reload()
+  }
+
+  async setTheme(value: string) {
+    await setConfigOption('theme', value)
+    window.location.reload()
   }
 
   async toggleGrasscutterWithGame() {
@@ -140,6 +154,28 @@ export default class Options extends React.Component<IProps, IState> {
 
         <Divider />
 
+        <div className='OptionSection'>
+          <div className='OptionLabel'>
+            <Tr text="options.theme" />
+          </div>
+          <div className='OptionValue'>
+            <select value={this.state.theme} onChange={(event) => {
+              this.setTheme(event.target.value)
+            }}>
+              {this.state.themes.map(t => (
+                <option
+                  key={t}
+                  value={t}>
+
+                  {t}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+
+        <Divider />
+
         <div className='OptionSection'>
           <div className='OptionLabel'>
             <Tr text="options.java_path" />