Custom Themes

main/main.js

@@ -109,7 +109,7 @@ const template = [{
 {
     label: 'Find',
     accelerator: 'CmdOrCtrl+F',
-    click: function() {
+    click: function () {
         mainWindow.webContents.executeJavaScript('toggleFind()');
     }
 },
@@ -119,7 +119,7 @@ const template = [{
     click: function () {
         mainWindow.webContents.toggleDevTools();
     },
-    
+
 }/*
     {
         label: "Check for Updates",
@@ -158,7 +158,21 @@ ipcMain.handle('loadExt', async (event, ext) => {
 
 ipcMain.handle('read-user-data', async (event, fileName) => {
     const path = app.getPath('userData');
-    const buf = fs.readFileSync(`${path}/${fileName}`, { encoding: 'utf8', flag: 'r' });
+    try {
+        const buf = fs.readFileSync(`${path}/${fileName}`, { encoding: 'utf8', flag: 'r' });
+    } catch {
+        return;
+    }
+    return buf;
+});
+
+if (!fs.existsSync(`${app.getPath('userData')}/themes`)) {
+    fs.mkdirSync(`${app.getPath('userData')}/themes`)
+}
+
+ipcMain.handle('get-themes', async (event) => {
+    const path = app.getPath('userData');
+    const buf = fs.readdirSync(`${path}/themes`, { encoding: 'utf8', flag: 'r' });
     return buf;
 });
 

main/preload.js

@@ -22,6 +22,33 @@ contextBridge.exposeInMainWorld('cat', {
             }
         );
     },
+    getThemes: () => {
+        const themes = ipcRenderer.invoke('get-themes').then(
+            result => {
+                themeSelect = document.getElementById('pref-theme')
+                for (x in result) {
+                    let sel = document.createElement('option')
+                    sel.value = result[x]
+                    sel.innerText = result[x].replace(".css", "")
+                    themeSelect.appendChild(sel)
+                }
+            }
+        )
+    },
+    loadTheme: (theme) => {
+        const file = ipcRenderer.invoke('read-user-data', `themes/${theme}`).then(
+            result => {
+                let el = document.createElement('style');
+                el.type = 'text/css';
+                el.innerText = result;
+                el.classList.add("theme")
+                document.head.appendChild(el);
+            }
+        )
+    },
+    unloadTheme: () => {
+        document.getElementsByClassName('theme')[0].remove()
+    },  
     enableAdBlocker: () => ipcRenderer.invoke('enable-ad-blocker'),
     ipcToggleFs: () => ipcRenderer.invoke('toggle-full-screen'),
 });

src/index.html

@@ -82,6 +82,11 @@ <h1 class="font-bold text-xl">Preferences</h1>
                 id="pref-darkmode" type="checkbox" class="" disabled />
             <p class="text-sm">Toggle dark mode</p>
             <br />
+            <label for="pref-theme">Theme</label>
+            <select name="pref-theme" id="pref-theme">
+                <option value="0">Default</option>
+            </select>
+            <br />
             <label for="pref-autocomplete">Autocomplete </label>
             <input id="pref-autocomplete" type="checkbox" class="" />
             <p class="text-sm">Search Autocomplete</p>

src/preferences.js

@@ -25,13 +25,14 @@ function togglePreferences() {
         addCheckboxListener(document.getElementById('pref-adblk'), 'adblk');
         if (preferences.agent.toString().length > 1) {
             document.getElementById('pref-useragent').value =
-				preferences.agent || 'Catalyst/{{version}}';
+                preferences.agent || 'Catalyst/{{version}}';
         } else {
             document.getElementById('pref-useragent').value = preferences.agent;
         }
         addTextListener(document.getElementById('pref-useragent'), 'agent');
         addCheckboxListener(document.getElementById('pref-homewidgets'), 'homewidgets');
         document.getElementById('pref-homewidgets').checked = preferences.homewidgets;
+        addSelectListener(document.getElementById('pref-theme'), 'theme')
     }
 }
 
@@ -77,6 +78,13 @@ function addTextListener(element, prefKey) {
     });
 }
 
+function addSelectListener(element, prefKey) {
+    element.addEventListener('change', () => {
+        preferences[prefKey] = element.value;
+        updatePreferences();
+    })
+}
+
 /**
  * Updates the preferences in LocalStorage to the new preferences and evaluates the new ones
  */
@@ -100,6 +108,15 @@ function evaluatePreferences() {
     if (preferences.adblk) {
         cat.enableAdBlocker();
     }
+    if (preferences.theme) {
+        if (document.getElementsByClassName('theme').length > 0) {
+            cat.unloadTheme();
+        }
+        if (preferences.theme == 0) {
+            return;
+        }
+        cat.loadTheme(preferences.theme)
+    }
 }
 
 var enginespref = document.querySelector('#se');

src/startup.js

@@ -17,4 +17,6 @@ if (!localStorage.getItem('home-postfix')) {
 
 if (localStorage.getItem('bookmarks') < 1) {
     document.querySelector('#bookmarks').innerText = 'When you add bookmarks they will appear here!';
-}
+}
+
+cat.getThemes();