Theming system implemented, started work on "The Network" theme

www/js/themeManager.js

@@ -0,0 +1,77 @@
+/*Canopy - The next generation of stoner streaming software
+Copyright (C) 2024-2026 Rainbownapkin and the TTN Community
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
+
+/**
+ * Class to manage
+ */
+class themeManager{
+    /**
+     * Instantiates new Theme Manager 
+     */
+    constructor(){
+        /**
+         * Map of all available themes
+         */
+        this.themes = new Map([
+            ["Movie Night", "/css/theme/movie-night.css"],
+            ["The Network", "/css/theme/the-network.css"]
+        ]);
+
+        /**
+         * Define property to hold theme link DOM node
+         */
+        this.themeLink = null;
+
+        //Set theme from preference
+        this.setTheme(localStorage.getItem("theme"));
+    }
+
+    /**
+     * Sets theme by name
+     * @param {String} theme - name of theme to set, keep blank for default theme
+     */
+    setTheme(theme){
+        //If we didnt get a theme to set
+        if(theme == null){
+            //Use the first theme in the list
+            theme = Array.from(this.themes.keys())[0];
+        }
+
+        //If we have a link already setup
+        if(this.themeLink != null){
+            //Get Ridda it!
+            this.themeLink.remove();
+        }
+
+        //Create new link element and use it to set themeLink
+        this.themeLink = document.createElement('link');
+
+        //Set themeLink attributes
+        this.themeLink.type = "text/css";
+        this.themeLink.rel = "stylesheet";
+
+        //Set theme href to theme location
+        this.themeLink.href = this.themes.get(theme);
+
+        //Append themeLink to header
+        document.querySelector('head').appendChild(this.themeLink);
+
+        //Save theme choice to local storage
+        localStorage.setItem("theme", theme);
+    }
+}
+
+ThemeManager = new themeManager();