feat: add catppuccin mocha theme

Author: prplwtf

src/configuration/RenderConfiguration.js

@@ -4,18 +4,11 @@ async function RenderConfiguration() {
 
   // Apply active theme
   let ActiveTheme = './themes/'+(window.Configuration.Information.Theme || "Default")+'.css'
-  fetch(ActiveTheme)
-    .then(response => {
-      if (!response.ok) {throw new Error(`Network response was not ok: ${response.status}`)}
-
-      let ComputedThemeConfig = getComputedStyle(document.querySelector("writea-theme-config"))
-      var ThemeConfig = {
-        "themeColor": ComputedThemeConfig.getPropertyValue('--theme-color')
-      }
-
-      AppColor.content = ThemeConfig.themeColor || "#E87C86"
-
-      return AppTheme.innerHTML = `${response}`
-    })
+  AppTheme.innerHTML = `@import url('${ActiveTheme}')`
+  let ComputedThemeConfig = getComputedStyle(document.querySelector("writea-theme-config"))
+  var ThemeConfig = {
+    "themeColor": ComputedThemeConfig.getPropertyValue('--theme-color')
+  }
+  AppColor.content = ThemeConfig.themeColor || "#E87C86"
   return;
 }

themes/CatppuccinMocha.css

@@ -0,0 +1,58 @@
+/* 
+ * Catppuccin Mocha writea theme
+ *
+ * Colors from https://catppuccin.com
+ * Ported by https://github.com/prplwtf
+ */
+
+ writea-theme-config {
+  --theme-color: #cba6f7;
+}
+
+:root {
+  color-scheme: dark;
+
+  --bs-body-color: #ced4da;
+  --bs-body-color-rgb: 206,212,218;
+  --bs-body-bg: #11111b;
+  --bs-body-bg-rgb: 22,25,29;
+  --bs-surface-color: #dee2e6;
+  --bs-surface-color-rgb: 222,226,230;
+  --bs-surface-bg: #212529;
+  --bs-surface-bg-rgb: 33,37,41;
+  --bs-surface-bg-hover: #25292d;
+
+  --bs-emphasis-color: #fff;
+  --bs-emphasis-color-rgb: 255,255,255;
+  --bs-muted-color: #868e96;
+  --bs-heading-color: inherit;
+
+  --bs-primary: #cba6f7;
+  --bs-primary-hover: #d3b7f5;
+  --bs-primary-active: #dbc0fc;
+  --bs-primary-subtle: #3d2857;
+  --bs-primary-subtle-hover: #472f64;
+  --bs-primary-subtle-active: #4d3569;
+  --bs-primary-emphasis: #cba6f7;
+  --bs-primary-emphasis-hover: #d3b7f5;
+  --bs-primary-border-subtle: #472f64;
+  --bs-primary-rgb: 203, 166, 247;
+  --bs-text-on-primary: #000000;
+
+  --bs-dark: #45475a;
+  --bs-dark-rgb: 111,113,116;
+  --bs-dark-hover: #585b70;
+  --bs-dark-active: #6c7086;
+  --bs-dark-subtle: #1e1e2e;
+  --bs-dark-subtle-hover: #313244;
+  --bs-dark-subtle-active: #45475a;
+  --bs-dark-emphasis: #9399b2;
+  --bs-dark-emphasis-hover: #a6adc8;
+  --bs-text-on-dark: #cdd6f4;
+  --bs-dark-border-subtle: #585b70;
+
+  --bs-border-color: #6c7086;
+  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
+  --bs-border-radius: 1rem;
+  --bs-border-width: 1px;
+}