Starting theme support

src/main/base/browserwindow.ts

@@ -150,6 +150,20 @@ export class BrowserWindow {
             res.render("main", this.EnvironmentVariables);
         });
 
+        app.get("/themes/:theme", (req, res) => {
+            const theme = req.params.theme.toLowerCase();
+            const themePath = path.join(utils.getPath('srcPath'), "./renderer/themes/", theme);
+            const userThemePath = path.join(utils.getPath('themes'), theme);
+            if (fs.existsSync(userThemePath)) {
+                res.sendFile(userThemePath);
+            } else if (fs.existsSync(themePath)) {
+                res.sendFile(themePath);
+            } else {
+                res.send(`// Theme not found - ${userThemePath}`);
+            }
+
+        });
+
         app.get("/audio.webm", (req, res) => {
             try {
                 req.socket.setTimeout(Number.MAX_SAFE_INTEGER);
@@ -276,6 +290,14 @@ export class BrowserWindow {
             event.returnValue = process.platform;
         });
 
+        ipcMain.on("get-themes", (event, key) => {
+            if (fs.existsSync(utils.getPath("themes"))) {
+                event.returnValue = fs.readdirSync(utils.getPath("themes"));
+            } else {
+                event.returnValue = [];
+            }
+        });
+
         ipcMain.on("get-i18n", (event, key) => {
             event.returnValue = utils.getLocale(key);
         });

src/renderer/index.js

@@ -586,6 +586,7 @@ const app = new Vue({
         },
         async init() {
             let self = this
+            this.setTheme()
             this.setLz(this.cfg.general.language)
             this.setLzManual()
             clearTimeout(this.hangtimer)
@@ -840,6 +841,18 @@ const app = new Vue({
                 this.$forceUpdate()
             }, 500)
         },
+        setTheme(theme = "") {
+            if(this.cfg.visual.theme == "") {
+                this.cfg.visual.theme = "default.less"
+            }
+            if(theme == ""){
+                theme = this.cfg.visual.theme
+            }else{
+                this.cfg.visual.theme = theme
+            }
+            document.querySelector("#userTheme").href = `themes/${this.cfg.visual.theme}`
+            document.querySelectorAll(`[id*='less']`).forEach(el => { el.remove() });less.refresh()
+        },
         unauthorize() {
             this.mk.unauthorize()
             document.location.reload()

src/renderer/themes/WIP.md

@@ -0,0 +1,14 @@
+# Themes (WIP)
+
+## Making a theme
+* If one does not already exist, create a new theme directory in the user data folder.
+  * **Windows:** `%appdata%/Cider/themes`
+  * **Mac:** `~/Library/Application Support/Cider/themes`
+  * **Linux:** `~/.config/Cider/themes`
+* Create a `theme.less` file with the name of the theme.
+* In Cider, select the theme in the settings.
+* To enable hot reloading for the theme, open the DevTools and enter `less.watch()` in the console.
+
+## Resources
+* The default styles.less can be found in: [src/renderer/style.less](https://github.com/ciderapp/Cider/tree/main/src/renderer/style.less)
+* [Less.js documentation](https://lesscss.org/)

src/renderer/themes/default.less

@@ -0,0 +1 @@
+// Default theme

src/renderer/views/main.ejs

@@ -16,6 +16,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
     <title>Cider</title>
     <link rel="stylesheet/less" type="text/css" href="style.less"/>
+    <link rel="stylesheet/less" type="text/css" id="userTheme" href="themes/default.less"/>
     <script src="./js/less.js"></script>
     <script src="<%- (env.dev ? "./js/vue.js" : "./js/vue.dev.js") %>"></script>
     <script src="./js/vuex.min.js"></script>

src/renderer/views/pages/settings.ejs

@@ -97,6 +97,17 @@
                 <span>{{$root.getLz('settings.header.visual')}}</span>
             </div>
             <div class="settings-option-body">
+                <div class="md-option-line">
+                    <div class="md-option-segment">
+                        Theme
+                    </div>
+                    <div class="md-option-segment md-option-segment_auto">
+                        <select class="md-select" @change="$root.setTheme($root.cfg.visual.theme)" v-model="$root.cfg.visual.theme">
+                            <option value="default.less">Cider</option>
+                            <option v-for="theme in themes" :value="theme">{{ theme }}</option>
+                        </select>
+                    </div>
+                </div>
                 <div class="md-option-line">
                     <div class="md-option-segment">
                         {{$root.getLz('settings.option.visual.windowBackgroundStyle')}}
@@ -623,16 +634,7 @@
                     <span>{{$root.getLz('settings.header.unfinished')}}</span>
                 </div>
                 <div class="settings-option-body">
-                    <div class="md-option-line">
+
-                        <div class="md-option-segment">
-                            Theme
-                        </div>
-                        <div class="md-option-segment md-option-segment_auto">
-                            <select class="md-select">
-                                <option value="0">Cider</option>
-                            </select>
-                        </div>
-                    </div>
                     <div class="md-option-line">
                         <div class="md-option-segment">
                             Theme Options
@@ -694,7 +696,8 @@
 		props: [],
 		data: function () {
 			return {
-				app: this.$root
+				app: this.$root,
+                themes: ipcRenderer.sendSync("get-themes")
 			}
 		},
 		mounted: function () {