Themes and a theme picker

baked.c

@@ -19,6 +19,7 @@ INCBIN(favicon_ico, "./etc/favicon.ico");
 #if MY_DEBUG
 INCBIN(hotreload_js, "./etc/hotreload.js");
 #endif
+INCBIN(theme_js, "./etc/theme.js");
 INCBIN(me_jpg, "./etc/me.jpg");
 INCBIN(tmoa_engine_jpg, "./etc/tmoa-engine.jpg");
 INCBIN(tmoa_garbage_jpg, "./etc/tmoa-garbage.jpg");
@@ -64,6 +65,7 @@ void init_baked_resources(void)
 #if MY_DEBUG
     add_baked_resource("hotreload.js", hotreload_js_data, hotreload_js_size);
 #endif
+    add_baked_resource("theme.js", theme_js_data, theme_js_size);
     add_baked_resource("me.jpg", me_jpg_data, me_jpg_size);
     add_baked_resource("tmoa-engine.jpg", tmoa_engine_jpg_data, tmoa_engine_jpg_size);
     add_baked_resource("tmoa-garbage.jpg", tmoa_garbage_jpg_data, tmoa_garbage_jpg_size);

baked.h

@@ -15,6 +15,7 @@ INCBIN_EXTERN(favicon_ico);
 #if MY_DEBUG
 INCBIN_EXTERN(hotreload_js);
 #endif
+INCBIN_EXTERN(theme_js);
 INCBIN_EXTERN(me_jpg);
 INCBIN_EXTERN(tmoa_engine_jpg);
 INCBIN_EXTERN(tmoa_garbage_jpg);

build.c

@@ -37,6 +37,7 @@ int main(int argc, char ** argv)
                 "./tmpls/blog.html",
 
                 "./etc/hotreload.js",
+                "./etc/theme.js",
                 "./etc/simple.css",
                 "./etc/favicon.ico",
                 "./etc/me.jpg",

etc/simple.css

@@ -8,18 +8,18 @@
   --standard-border-radius: 5px;
   --border-width: 1px;
 
-  --bg: #FFFFEC;
+--bg: #F0F2F5;
-  --accent-bg: #EEEEA7;
+--accent-bg: #E3E6EA;
-  --text: #424242;
+--text: #2C2C2C;
-  --text-light: #999957;
+--text-light: #9A9A9A;
-  --border: #B7B19C;
+--border: #D1D7DC;
-  --accent: #030093;
+--accent: #3454D1;
-  --accent-hover: #2A8DC5;
+--accent-hover: #6A8ED8;
-  --accent-text: var(--bg);
+--accent-text: var(--bg);
-  --code: #57864E;       
+--code: #3C9E47;
-  --preformatted: #424242;
+--preformatted: #2C2C2C;
-  --marked: #B85C57;     
+--marked: #D6674B;
-  --disabled: #EAEBDB;  
+--disabled: #F1F3F6;
 }
 
 /* Reset box-sizing */

etc/theme.js

@@ -0,0 +1,114 @@
+if (!localStorage.getItem("theme")) {
+    localStorage.setItem("theme", "light-breeze");
+}
+
+function plan9_acme()
+{
+    document.documentElement.style.setProperty("--bg", "#FFFFEC");
+    document.documentElement.style.setProperty("--accent-bg", "#EEEEA7");
+    document.documentElement.style.setProperty("--text", "#424242");
+    document.documentElement.style.setProperty("--text-light", "#999957");
+    document.documentElement.style.setProperty("--border", "#B7B19C");
+    document.documentElement.style.setProperty("--accent", "#030093");
+    document.documentElement.style.setProperty("--accent-hover", "#2A8DC5");
+    document.documentElement.style.setProperty("--accent-text", "var(--bg)");
+    document.documentElement.style.setProperty("--code", "#57864E");
+    document.documentElement.style.setProperty("--preformatted", "#424242");
+    document.documentElement.style.setProperty("--marked", "#B85C57");
+    document.documentElement.style.setProperty("--disabled", "#EAEBDB");
+}
+
+function light_breeze()
+{
+    document.documentElement.style.setProperty("--bg", "#F0F2F5");
+    document.documentElement.style.setProperty("--accent-bg", "#E3E6EA");
+    document.documentElement.style.setProperty("--text", "#2C2C2C");
+    document.documentElement.style.setProperty("--text-light", "#9A9A9A");
+    document.documentElement.style.setProperty("--border", "#D1D7DC");
+    document.documentElement.style.setProperty("--accent", "#3454D1");
+    document.documentElement.style.setProperty("--accent-hover", "#6A8ED8");
+    document.documentElement.style.setProperty("--accent-text", "var(--bg)");
+    document.documentElement.style.setProperty("--code", "#3C9E47");
+    document.documentElement.style.setProperty("--preformatted", "#2C2C2C");
+    document.documentElement.style.setProperty("--marked", "#D6674B");
+    document.documentElement.style.setProperty("--disabled", "#F1F3F6");
+}
+
+function bold_navy()
+{
+    document.documentElement.style.setProperty("--bg", "#F0F4FF");
+    document.documentElement.style.setProperty("--accent-bg", "#E0E6F1");
+    document.documentElement.style.setProperty("--text", "#2D3A58");
+    document.documentElement.style.setProperty("--text-light", "#7A8C9E");
+    document.documentElement.style.setProperty("--border", "#BCC6D8");
+    document.documentElement.style.setProperty("--accent", "#1E2A5B");
+    document.documentElement.style.setProperty("--accent-hover", "#2A3F80");
+    document.documentElement.style.setProperty("--accent-text", "var(--bg)");
+    document.documentElement.style.setProperty("--code", "#4A7C2F");
+    document.documentElement.style.setProperty("--preformatted", "#2D3A58");
+    document.documentElement.style.setProperty("--marked", "#F18F5D");
+    document.documentElement.style.setProperty("--disabled", "#E8ECF5");
+}
+
+function soft_lavander()
+{
+    document.documentElement.style.setProperty("--bg", "#F5F2FF");
+    document.documentElement.style.setProperty("--accent-bg", "#E1D1FF");
+    document.documentElement.style.setProperty("--text", "#3D2B6F");
+    document.documentElement.style.setProperty("--text-light", "#8D8B9B");
+    document.documentElement.style.setProperty("--border", "#C1B5D6");
+    document.documentElement.style.setProperty("--accent", "#7A4FE3");
+    document.documentElement.style.setProperty("--accent-hover", "#8D6DE8");
+    document.documentElement.style.setProperty("--accent-text", "var(--bg)");
+    document.documentElement.style.setProperty("--code", "#5D7C42");
+    document.documentElement.style.setProperty("--preformatted", "#3D2B6F");
+    document.documentElement.style.setProperty("--marked", "#F77A63");
+    document.documentElement.style.setProperty("--disabled", "#E9E4FF");
+}
+
+function neon_cyber()
+{
+    document.documentElement.style.setProperty("--bg", "#121212");
+    document.documentElement.style.setProperty("--accent-bg", "#1C1C1C");
+    document.documentElement.style.setProperty("--text", "#00FF00");
+    document.documentElement.style.setProperty("--text-light", "#A1FF3D");
+    document.documentElement.style.setProperty("--border", "#006400");
+    document.documentElement.style.setProperty("--accent", "#FF007F");
+    document.documentElement.style.setProperty("--accent-hover", "#FF3399");
+    document.documentElement.style.setProperty("--accent-text", "var(--bg)");
+    document.documentElement.style.setProperty("--code", "#2AFF32");
+    document.documentElement.style.setProperty("--preformatted", "#00FF00");
+    document.documentElement.style.setProperty("--marked", "#FF6F00");
+    document.documentElement.style.setProperty("--disabled", "#333333");
+}
+
+const themes = {
+    "light-breeze": light_breeze,
+    "plan9-acme": plan9_acme,
+    "bold-navy": bold_navy,
+    "soft-lavander": soft_lavander,
+    "neon-cyber": neon_cyber,
+};
+
+
+const footer = document.getElementsByTagName("footer")[0];
+const select = document.createElement("select");
+select.id = "theme-picker";
+footer.children[0].appendChild(select);
+for (const prop in themes) {
+    const option = document.createElement("option");
+    option.value = prop;
+    option.innerHTML = prop;
+    if (prop == localStorage.getItem("theme")) {
+        option.selected = true;
+    }
+    select.appendChild(option);
+}
+
+const theme_picker = document.getElementById("theme-picker");
+theme_picker.addEventListener("change", function (e) {
+    const theme_name = e.target.value;
+    localStorage.setItem("theme", theme_name);
+    themes[localStorage.getItem("theme")]()
+}); 
+themes[localStorage.getItem("theme")]()

main.c

@@ -238,7 +238,10 @@ void populate_etc_dump(char *etc_dump)
 {
     static char *files[] = {
         "favicon.ico",
+#if MY_DEBUG
         "hotreload.js",
+#endif
+        "theme.js",
         "simple.css",
         "me.jpg",
         "tmoa-engine.jpg",

tmpls/blog.html

@@ -26,5 +26,6 @@
         <#ifdef HOTRELOAD>
             <script src="/etc/hotreload.js"></script>
         <#endif>
+        <script src="/etc/theme.js"></script>
     </body>
 </html>

tmpls/home.html

@@ -67,5 +67,6 @@
         <#ifdef HOTRELOAD>
             <script src="/etc/hotreload.js"></script>
         <#endif>
+        <script src="/etc/theme.js"></script>
     </body>
 </html>

tmpls/page-missing.html

@@ -21,5 +21,6 @@
         <#ifdef HOTRELOAD>
             <script src="/etc/hotreload.js"></script>
         <#endif>
+        <script src="/etc/theme.js"></script>
     </body>
 </html>

tmpls/template-blog.html

@@ -23,5 +23,6 @@
         <#ifdef HOTRELOAD>
             <script src="/etc/hotreload.js"></script>
         <#endif>
+        <script src="/etc/theme.js"></script>
     </body>
 </html>