From e00f92917988e5b149ff2cc965167393a9c84c81 Mon Sep 17 00:00:00 2001
From: Victor Lavaud <victor.lavaud@pm.me>
Date: Sat, 21 Mar 2026 13:32:43 +0100
Subject: [PATCH] Add Catppuccin colorscheme

---
 src/web/html/index.html                       |   4 +
 src/web/stylesheets/index.css                 |   4 +
 .../stylesheets/themes/_catppuccin_frappe.css | 159 ++++++++++++++++++
 .../stylesheets/themes/_catppuccin_latte.css  | 159 ++++++++++++++++++
 .../themes/_catppuccin_macchiato.css          | 159 ++++++++++++++++++
 .../stylesheets/themes/_catppuccin_mocha.css  | 159 ++++++++++++++++++
 6 files changed, 644 insertions(+)
 create mode 100755 src/web/stylesheets/themes/_catppuccin_frappe.css
 create mode 100755 src/web/stylesheets/themes/_catppuccin_latte.css
 create mode 100755 src/web/stylesheets/themes/_catppuccin_macchiato.css
 create mode 100644 src/web/stylesheets/themes/_catppuccin_mocha.css

diff --git a/src/web/html/index.html b/src/web/html/index.html
index a064e8cf..91517da4 100755
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -448,6 +448,10 @@
                                 <option value="nord">Nord</option>
                                 <option value="solarizedDark">Solarized Dark</option>
                                 <option value="solarizedLight">Solarized Light</option>
+                                <option value="catppuccin-latte">Catppuccin Latte</option>
+                                <option value="catppuccin-frappe">Catppuccin Frappé</option>
+                                <option value="catppuccin-macchiato">Catppuccin Macchiato</option>
+                                <option value="catppuccin-mocha">Catppuccin Mocha</option>
                             </select>
                         </div>
 
diff --git a/src/web/stylesheets/index.css b/src/web/stylesheets/index.css
index 3f0d3e4f..48523c3b 100755
--- a/src/web/stylesheets/index.css
+++ b/src/web/stylesheets/index.css
@@ -13,6 +13,10 @@
 @import "./themes/_nord.css";
 @import "./themes/_solarizedDark.css";
 @import "./themes/_solarizedLight.css";
+@import "./themes/_catppuccin_frappe.css";
+@import "./themes/_catppuccin_latte.css";
+@import "./themes/_catppuccin_macchiato.css";
+@import "./themes/_catppuccin_mocha.css";
 
 /* Utilities */
 @import "./utils/_overrides.css";
diff --git a/src/web/stylesheets/themes/_catppuccin_frappe.css b/src/web/stylesheets/themes/_catppuccin_frappe.css
new file mode 100755
index 00000000..a9672d67
--- /dev/null
+++ b/src/web/stylesheets/themes/_catppuccin_frappe.css
@@ -0,0 +1,159 @@
+/**
+ * Catppuccin Frappé theme definitions
+ *
+ * Based on the Catppuccin color palette
+ * https://catppuccin.com/
+ *
+ * @copyright Crown Copyright 2025
+ * @license Apache-2.0
+ */
+
+:root.catppuccin-frappe {
+    /* Catppuccin Frappé Color Palette */
+    --frappe-rosewater: #f2d5cf;
+    --frappe-flamingo: #eebebe;
+    --frappe-pink: #f4b8e4;
+    --frappe-mauve: #ca9ee6;
+    --frappe-red: #e78284;
+    --frappe-maroon: #ea999c;
+    --frappe-peach: #ef9f76;
+    --frappe-yellow: #e5c890;
+    --frappe-green: #a6d189;
+    --frappe-teal: #81c8be;
+    --frappe-sky: #99d1db;
+    --frappe-sapphire: #85c1dc;
+    --frappe-blue: #8caaee;
+    --frappe-lavender: #babbf1;
+    --frappe-text: #c6d0f5;
+    --frappe-subtext1: #b5bfe2;
+    --frappe-subtext0: #a5adce;
+    --frappe-overlay2: #949cbb;
+    --frappe-overlay1: #838ba7;
+    --frappe-overlay0: #737994;
+    --frappe-surface2: #626880;
+    --frappe-surface1: #51576d;
+    --frappe-surface0: #414559;
+    --frappe-base: #303446; /* Primary Background */
+    --frappe-mantle: #292c3c; /* Secondary Background */
+    --frappe-crust: #232634; /* Borders, accessory background */
+
+    /* General */
+    --primary-font-family:
+        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+        Arial, sans-serif;
+    --primary-font-colour: var(--frappe-text);
+    --primary-font-size: 14px;
+    --primary-line-height: 20px;
+
+    --fixed-width-font-family:
+        SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+        "Courier New", monospace;
+    --fixed-width-font-colour: var(--frappe-text);
+    --fixed-width-font-size: inherit;
+
+    --subtext-font-colour: var(--frappe-subtext0);
+    --subtext-font-size: 13px;
+
+    --primary-background-colour: var(--frappe-base);
+    --secondary-background-colour: var(--frappe-mantle);
+
+    --primary-border-colour: var(--frappe-surface1);
+    --secondary-border-colour: var(--frappe-surface0);
+
+    --title-colour: var(--frappe-text);
+    --title-weight: bold;
+    --title-background-colour: var(--frappe-mantle);
+
+    --banner-font-colour: var(--frappe-base);
+    --banner-bg-colour: var(--frappe-blue);
+    --banner-url-colour: var(--frappe-sky);
+
+    --category-list-font-colour: var(--frappe-text);
+
+    --loader-background-colour: var(--frappe-mantle);
+    --loader-outer-colour: var(--frappe-blue);
+    --loader-middle-colour: var(--frappe-sky);
+    --loader-inner-colour: var(--frappe-sapphire);
+
+    /* Operation colours */
+    --op-list-operation-font-colour: var(--frappe-text);
+    --op-list-operation-bg-colour: var(--frappe-base);
+    --op-list-operation-border-colour: var(--frappe-surface0);
+
+    --rec-list-operation-font-colour: var(--frappe-base);
+    --rec-list-operation-bg-colour: var(--frappe-sapphire);
+    --rec-list-operation-border-colour: var(--frappe-sky);
+
+    --selected-operation-font-color: var(--frappe-base);
+    --selected-operation-bg-colour: var(--frappe-blue);
+    --selected-operation-border-colour: var(--frappe-sapphire);
+
+    --breakpoint-font-colour: var(--frappe-base);
+    --breakpoint-bg-colour: var(--frappe-red);
+    --breakpoint-border-colour: var(--frappe-red);
+
+    --disabled-font-colour: var(--frappe-overlay1);
+    --disabled-bg-colour: var(--frappe-surface0);
+    --disabled-border-colour: var(--frappe-surface1);
+
+    --fc-operation-font-colour: var(--frappe-base);
+    --fc-operation-bg-colour: var(--frappe-mauve);
+    --fc-operation-border-colour: var(--frappe-mauve);
+
+    --fc-breakpoint-operation-font-colour: var(--frappe-base);
+    --fc-breakpoint-operation-bg-colour: var(--frappe-red);
+    --fc-breakpoint-operation-border-colour: var(--frappe-maroon);
+
+    /* Operation arguments */
+    --op-title-font-weight: bold;
+    --arg-font-colour: var(--frappe-subtext1);
+    --arg-background: var(--frappe-mantle);
+    --arg-border-colour: var(--frappe-surface1);
+    --arg-disabled-background: var(--frappe-surface0);
+    --arg-label-colour: var(--frappe-blue);
+
+    /* Operation buttons */
+    --disable-icon-colour: var(--frappe-text);
+    --disable-icon-selected-colour: var(--frappe-peach);
+    --breakpoint-icon-colour: var(--frappe-text);
+    --breakpoint-icon-selected-colour: var(--frappe-red);
+
+    /* Buttons */
+    --btn-default-font-colour: var(--frappe-text);
+    --btn-default-bg-colour: var(--frappe-surface0);
+    --btn-default-border-colour: var(--frappe-surface1);
+
+    --btn-default-hover-font-colour: var(--frappe-text);
+    --btn-default-hover-bg-colour: var(--frappe-surface1);
+    --btn-default-hover-border-colour: var(--frappe-surface2);
+
+    --btn-success-font-colour: var(--frappe-base);
+    --btn-success-bg-colour: var(--frappe-green);
+    --btn-success-border-colour: var(--frappe-green);
+
+    --btn-success-hover-font-colour: var(--frappe-base);
+    --btn-success-hover-bg-colour: #b1d992; /* Lighter frappe-green */
+    --btn-success-hover-border-colour: #b1d992;
+
+    /* Highlighter colours */
+    --hl1: var(--frappe-yellow);
+    --hl2: var(--frappe-sky);
+    --hl3: var(--frappe-red);
+    --hl4: var(--frappe-mauve);
+    --hl5: var(--frappe-green);
+
+    /* Scrollbar */
+    --scrollbar-track: var(--frappe-mantle);
+    --scrollbar-thumb: var(--frappe-surface1);
+    --scrollbar-hover: var(--frappe-surface2);
+
+    /* Misc. */
+    --drop-file-border-colour: var(--frappe-blue);
+    --table-border-colour: var(--frappe-surface0);
+    --popover-background: var(--frappe-crust);
+    --popover-border-colour: var(--frappe-surface1);
+    --code-background: var(--frappe-mantle);
+    --code-font-colour: var(--frappe-subtext1);
+    --input-highlight-colour: var(--frappe-blue);
+    --input-border-colour: var(--frappe-surface1);
+}
diff --git a/src/web/stylesheets/themes/_catppuccin_latte.css b/src/web/stylesheets/themes/_catppuccin_latte.css
new file mode 100755
index 00000000..abef95ef
--- /dev/null
+++ b/src/web/stylesheets/themes/_catppuccin_latte.css
@@ -0,0 +1,159 @@
+/**
+ * Catppuccin Latte theme definitions
+ *
+ * Based on the Catppuccin color palette
+ * https://catppuccin.com/
+ *
+ * @copyright Crown Copyright 2025
+ * @license Apache-2.0
+ */
+
+:root.catppuccin-latte {
+    /* Catppuccin Latte Color Palette */
+    --latte-rosewater: #dc8a78;
+    --latte-flamingo: #dd7878;
+    --latte-pink: #ea76cb;
+    --latte-mauve: #8839ef;
+    --latte-red: #d20f39;
+    --latte-maroon: #e64553;
+    --latte-peach: #fe640b;
+    --latte-yellow: #df8e1d;
+    --latte-green: #40a02b;
+    --latte-teal: #179299;
+    --latte-sky: #04a5e5;
+    --latte-sapphire: #209fb5;
+    --latte-blue: #1e66f5;
+    --latte-lavender: #7287fd;
+    --latte-text: #4c4f69;
+    --latte-subtext1: #5c5f77;
+    --latte-subtext0: #6c6f85;
+    --latte-overlay2: #7c7f93;
+    --latte-overlay1: #8c8fa1;
+    --latte-overlay0: #9ca0b0;
+    --latte-surface2: #acb0be;
+    --latte-surface1: #bcc0cc;
+    --latte-surface0: #ccd0da;
+    --latte-base: #eff1f5; /* Primary Background */
+    --latte-mantle: #e6e9ef; /* Secondary Background */
+    --latte-crust: #dce0e8; /* Borders, accessory background */
+
+    /* General */
+    --primary-font-family:
+        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+        Arial, sans-serif;
+    --primary-font-colour: var(--latte-text);
+    --primary-font-size: 14px;
+    --primary-line-height: 20px;
+
+    --fixed-width-font-family:
+        SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+        "Courier New", monospace;
+    --fixed-width-font-colour: var(--latte-text);
+    --fixed-width-font-size: inherit;
+
+    --subtext-font-colour: var(--latte-subtext0);
+    --subtext-font-size: 13px;
+
+    --primary-background-colour: var(--latte-base);
+    --secondary-background-colour: var(--latte-mantle);
+
+    --primary-border-colour: var(--latte-surface1);
+    --secondary-border-colour: var(--latte-surface0);
+
+    --title-colour: var(--latte-text);
+    --title-weight: bold;
+    --title-background-colour: var(--latte-mantle);
+
+    --banner-font-colour: var(--latte-base);
+    --banner-bg-colour: var(--latte-blue);
+    --banner-url-colour: var(--latte-sky);
+
+    --category-list-font-colour: var(--latte-text);
+
+    --loader-background-colour: var(--latte-mantle);
+    --loader-outer-colour: var(--latte-blue);
+    --loader-middle-colour: var(--latte-sky);
+    --loader-inner-colour: var(--latte-sapphire);
+
+    /* Operation colours */
+    --op-list-operation-font-colour: var(--latte-text);
+    --op-list-operation-bg-colour: var(--latte-base);
+    --op-list-operation-border-colour: var(--latte-surface0);
+
+    --rec-list-operation-font-colour: var(--latte-base);
+    --rec-list-operation-bg-colour: var(--latte-sapphire);
+    --rec-list-operation-border-colour: var(--latte-sky);
+
+    --selected-operation-font-color: var(--latte-base);
+    --selected-operation-bg-colour: var(--latte-blue);
+    --selected-operation-border-colour: var(--latte-sapphire);
+
+    --breakpoint-font-colour: var(--latte-base);
+    --breakpoint-bg-colour: var(--latte-red);
+    --breakpoint-border-colour: var(--latte-red);
+
+    --disabled-font-colour: var(--latte-overlay1);
+    --disabled-bg-colour: var(--latte-surface0);
+    --disabled-border-colour: var(--latte-surface1);
+
+    --fc-operation-font-colour: var(--latte-base);
+    --fc-operation-bg-colour: var(--latte-mauve);
+    --fc-operation-border-colour: var(--latte-mauve);
+
+    --fc-breakpoint-operation-font-colour: var(--latte-base);
+    --fc-breakpoint-operation-bg-colour: var(--latte-red);
+    --fc-breakpoint-operation-border-colour: var(--latte-maroon);
+
+    /* Operation arguments */
+    --op-title-font-weight: bold;
+    --arg-font-colour: var(--latte-subtext1);
+    --arg-background: var(--latte-mantle);
+    --arg-border-colour: var(--latte-surface1);
+    --arg-disabled-background: var(--latte-surface0);
+    --arg-label-colour: var(--latte-blue);
+
+    /* Operation buttons */
+    --disable-icon-colour: var(--latte-text);
+    --disable-icon-selected-colour: var(--latte-peach);
+    --breakpoint-icon-colour: var(--latte-text);
+    --breakpoint-icon-selected-colour: var(--latte-red);
+
+    /* Buttons */
+    --btn-default-font-colour: var(--latte-text);
+    --btn-default-bg-colour: var(--latte-surface0);
+    --btn-default-border-colour: var(--latte-surface1);
+
+    --btn-default-hover-font-colour: var(--latte-text);
+    --btn-default-hover-bg-colour: var(--latte-surface1);
+    --btn-default-hover-border-colour: var(--latte-surface2);
+
+    --btn-success-font-colour: var(--latte-base);
+    --btn-success-bg-colour: var(--latte-green);
+    --btn-success-border-colour: var(--latte-green);
+
+    --btn-success-hover-font-colour: var(--latte-base);
+    --btn-success-hover-bg-colour: #57b340; /* Lighter latte-green */
+    --btn-success-hover-border-colour: #57b340;
+
+    /* Highlighter colours */
+    --hl1: var(--latte-yellow);
+    --hl2: var(--latte-sky);
+    --hl3: var(--latte-red);
+    --hl4: var(--latte-mauve);
+    --hl5: var(--latte-green);
+
+    /* Scrollbar */
+    --scrollbar-track: var(--latte-mantle);
+    --scrollbar-thumb: var(--latte-surface1);
+    --scrollbar-hover: var(--latte-surface2);
+
+    /* Misc. */
+    --drop-file-border-colour: var(--latte-blue);
+    --table-border-colour: var(--latte-surface0);
+    --popover-background: var(--latte-crust);
+    --popover-border-colour: var(--latte-surface1);
+    --code-background: var(--latte-mantle);
+    --code-font-colour: var(--latte-subtext1);
+    --input-highlight-colour: var(--latte-blue);
+    --input-border-colour: var(--latte-surface1);
+}
diff --git a/src/web/stylesheets/themes/_catppuccin_macchiato.css b/src/web/stylesheets/themes/_catppuccin_macchiato.css
new file mode 100755
index 00000000..85235cd0
--- /dev/null
+++ b/src/web/stylesheets/themes/_catppuccin_macchiato.css
@@ -0,0 +1,159 @@
+/**
+ * Catppuccin Macchiato theme definitions
+ *
+ * Based on the Catppuccin color palette
+ * https://catppuccin.com/
+ *
+ * @copyright Crown Copyright 2025
+ * @license Apache-2.0
+ */
+
+:root.catppuccin-macchiato {
+    /* Catppuccin Macchiato Color Palette */
+    --macchiato-rosewater: #f4dbd6;
+    --macchiato-flamingo: #f0c6c6;
+    --macchiato-pink: #f5bde6;
+    --macchiato-mauve: #c6a0f6;
+    --macchiato-red: #ed8796;
+    --macchiato-maroon: #ee99a0;
+    --macchiato-peach: #f5a97f;
+    --macchiato-yellow: #eed49f;
+    --macchiato-green: #a6da95;
+    --macchiato-teal: #8bd5ca;
+    --macchiato-sky: #91d7e3;
+    --macchiato-sapphire: #7dc4e4;
+    --macchiato-blue: #8aadf4;
+    --macchiato-lavender: #b7bdf8;
+    --macchiato-text: #cad3f5;
+    --macchiato-subtext1: #b8c0e0;
+    --macchiato-subtext0: #a5adce;
+    --macchiato-overlay2: #939ab7;
+    --macchiato-overlay1: #8087a2;
+    --macchiato-overlay0: #6e738d;
+    --macchiato-surface2: #5b6078;
+    --macchiato-surface1: #494d64;
+    --macchiato-surface0: #363a4f;
+    --macchiato-base: #24273a; /* Primary Background */
+    --macchiato-mantle: #1e2030; /* Secondary Background */
+    --macchiato-crust: #181926; /* Borders, accessory background */
+
+    /* General */
+    --primary-font-family:
+        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+        Arial, sans-serif;
+    --primary-font-colour: var(--macchiato-text);
+    --primary-font-size: 14px;
+    --primary-line-height: 20px;
+
+    --fixed-width-font-family:
+        SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+        "Courier New", monospace;
+    --fixed-width-font-colour: var(--macchiato-text);
+    --fixed-width-font-size: inherit;
+
+    --subtext-font-colour: var(--macchiato-subtext0);
+    --subtext-font-size: 13px;
+
+    --primary-background-colour: var(--macchiato-base);
+    --secondary-background-colour: var(--macchiato-mantle);
+
+    --primary-border-colour: var(--macchiato-surface1);
+    --secondary-border-colour: var(--macchiato-surface0);
+
+    --title-colour: var(--macchiato-text);
+    --title-weight: bold;
+    --title-background-colour: var(--macchiato-mantle);
+
+    --banner-font-colour: var(--macchiato-base);
+    --banner-bg-colour: var(--macchiato-blue);
+    --banner-url-colour: var(--macchiato-sky);
+
+    --category-list-font-colour: var(--macchiato-text);
+
+    --loader-background-colour: var(--macchiato-mantle);
+    --loader-outer-colour: var(--macchiato-blue);
+    --loader-middle-colour: var(--macchiato-sky);
+    --loader-inner-colour: var(--macchiato-sapphire);
+
+    /* Operation colours */
+    --op-list-operation-font-colour: var(--macchiato-text);
+    --op-list-operation-bg-colour: var(--macchiato-base);
+    --op-list-operation-border-colour: var(--macchiato-surface0);
+
+    --rec-list-operation-font-colour: var(--macchiato-base);
+    --rec-list-operation-bg-colour: var(--macchiato-sapphire);
+    --rec-list-operation-border-colour: var(--macchiato-sky);
+
+    --selected-operation-font-color: var(--macchiato-base);
+    --selected-operation-bg-colour: var(--macchiato-blue);
+    --selected-operation-border-colour: var(--macchiato-sapphire);
+
+    --breakpoint-font-colour: var(--macchiato-base);
+    --breakpoint-bg-colour: var(--macchiato-red);
+    --breakpoint-border-colour: var(--macchiato-red);
+
+    --disabled-font-colour: var(--macchiato-overlay1);
+    --disabled-bg-colour: var(--macchiato-surface0);
+    --disabled-border-colour: var(--macchiato-surface1);
+
+    --fc-operation-font-colour: var(--macchiato-base);
+    --fc-operation-bg-colour: var(--macchiato-mauve);
+    --fc-operation-border-colour: var(--macchiato-mauve);
+
+    --fc-breakpoint-operation-font-colour: var(--macchiato-base);
+    --fc-breakpoint-operation-bg-colour: var(--macchiato-red);
+    --fc-breakpoint-operation-border-colour: var(--macchiato-maroon);
+
+    /* Operation arguments */
+    --op-title-font-weight: bold;
+    --arg-font-colour: var(--macchiato-subtext1);
+    --arg-background: var(--macchiato-mantle);
+    --arg-border-colour: var(--macchiato-surface1);
+    --arg-disabled-background: var(--macchiato-surface0);
+    --arg-label-colour: var(--macchiato-blue);
+
+    /* Operation buttons */
+    --disable-icon-colour: var(--macchiato-text);
+    --disable-icon-selected-colour: var(--macchiato-peach);
+    --breakpoint-icon-colour: var(--macchiato-text);
+    --breakpoint-icon-selected-colour: var(--macchiato-red);
+
+    /* Buttons */
+    --btn-default-font-colour: var(--macchiato-text);
+    --btn-default-bg-colour: var(--macchiato-surface0);
+    --btn-default-border-colour: var(--macchiato-surface1);
+
+    --btn-default-hover-font-colour: var(--macchiato-text);
+    --btn-default-hover-bg-colour: var(--macchiato-surface1);
+    --btn-default-hover-border-colour: var(--macchiato-surface2);
+
+    --btn-success-font-colour: var(--macchiato-base);
+    --btn-success-bg-colour: var(--macchiato-green);
+    --btn-success-border-colour: var(--macchiato-green);
+
+    --btn-success-hover-font-colour: var(--macchiato-base);
+    --btn-success-hover-bg-colour: #b4e3a3; /* Lighter macchiato-green */
+    --btn-success-hover-border-colour: #b4e3a3;
+
+    /* Highlighter colours */
+    --hl1: var(--macchiato-yellow);
+    --hl2: var(--macchiato-sky);
+    --hl3: var(--macchiato-red);
+    --hl4: var(--macchiato-mauve);
+    --hl5: var(--macchiato-green);
+
+    /* Scrollbar */
+    --scrollbar-track: var(--macchiato-mantle);
+    --scrollbar-thumb: var(--macchiato-surface1);
+    --scrollbar-hover: var(--macchiato-surface2);
+
+    /* Misc. */
+    --drop-file-border-colour: var(--macchiato-blue);
+    --table-border-colour: var(--macchiato-surface0);
+    --popover-background: var(--macchiato-crust);
+    --popover-border-colour: var(--macchiato-surface1);
+    --code-background: var(--macchiato-mantle);
+    --code-font-colour: var(--macchiato-subtext1);
+    --input-highlight-colour: var(--macchiato-blue);
+    --input-border-colour: var(--macchiato-surface1);
+}
diff --git a/src/web/stylesheets/themes/_catppuccin_mocha.css b/src/web/stylesheets/themes/_catppuccin_mocha.css
new file mode 100644
index 00000000..9381dd37
--- /dev/null
+++ b/src/web/stylesheets/themes/_catppuccin_mocha.css
@@ -0,0 +1,159 @@
+/**
+ * Catppuccin Mocha theme definitions
+ *
+ * Based on the Catppuccin color palette
+ * https://catppuccin.com/
+ *
+ * @copyright Crown Copyright 2025
+ * @license Apache-2.0
+ */
+
+:root.catppuccin-mocha {
+    /* Catppuccin Mocha Color Palette */
+    --mocha-rosewater: #f5e0dc;
+    --mocha-flamingo: #f2cdcd;
+    --mocha-pink: #f5c2e7;
+    --mocha-mauve: #cba6f7;
+    --mocha-red: #f38ba8;
+    --mocha-maroon: #eba0ac;
+    --mocha-peach: #fab387;
+    --mocha-yellow: #f9e2af;
+    --mocha-green: #a6e3a1;
+    --mocha-teal: #94e2d5;
+    --mocha-sky: #89dceb;
+    --mocha-sapphire: #74c7ec;
+    --mocha-blue: #89b4fa;
+    --mocha-lavender: #b4befe;
+    --mocha-text: #cdd6f4;
+    --mocha-subtext1: #bac2de;
+    --mocha-subtext0: #a6adc8;
+    --mocha-overlay2: #9399b2;
+    --mocha-overlay1: #7f849c;
+    --mocha-overlay0: #6c7086;
+    --mocha-surface2: #585b70;
+    --mocha-surface1: #45475a;
+    --mocha-surface0: #313244;
+    --mocha-base: #1e1e2e; /* Primary Background */
+    --mocha-mantle: #181825; /* Secondary Background */
+    --mocha-crust: #11111b; /* Borders, accessory background */
+
+    /* General */
+    --primary-font-family:
+        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+        Arial, sans-serif;
+    --primary-font-colour: var(--mocha-text);
+    --primary-font-size: 14px;
+    --primary-line-height: 20px;
+
+    --fixed-width-font-family:
+        SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+        "Courier New", monospace;
+    --fixed-width-font-colour: var(--mocha-text);
+    --fixed-width-font-size: inherit;
+
+    --subtext-font-colour: var(--mocha-subtext0);
+    --subtext-font-size: 13px;
+
+    --primary-background-colour: var(--mocha-base);
+    --secondary-background-colour: var(--mocha-mantle);
+
+    --primary-border-colour: var(--mocha-surface1);
+    --secondary-border-colour: var(--mocha-surface0);
+
+    --title-colour: var(--mocha-text);
+    --title-weight: bold;
+    --title-background-colour: var(--mocha-mantle);
+
+    --banner-font-colour: var(--mocha-base);
+    --banner-bg-colour: var(--mocha-blue);
+    --banner-url-colour: var(--mocha-sky);
+
+    --category-list-font-colour: var(--mocha-text);
+
+    --loader-background-colour: var(--mocha-mantle);
+    --loader-outer-colour: var(--mocha-blue);
+    --loader-middle-colour: var(--mocha-sky);
+    --loader-inner-colour: var(--mocha-sapphire);
+
+    /* Operation colours */
+    --op-list-operation-font-colour: var(--mocha-text);
+    --op-list-operation-bg-colour: var(--mocha-base);
+    --op-list-operation-border-colour: var(--mocha-surface0);
+
+    --rec-list-operation-font-colour: var(--mocha-base);
+    --rec-list-operation-bg-colour: var(--mocha-sapphire);
+    --rec-list-operation-border-colour: var(--mocha-sky);
+
+    --selected-operation-font-color: var(--mocha-base);
+    --selected-operation-bg-colour: var(--mocha-blue);
+    --selected-operation-border-colour: var(--mocha-sapphire);
+
+    --breakpoint-font-colour: var(--mocha-base);
+    --breakpoint-bg-colour: var(--mocha-red);
+    --breakpoint-border-colour: var(--mocha-red);
+
+    --disabled-font-colour: var(--mocha-overlay1);
+    --disabled-bg-colour: var(--mocha-surface0);
+    --disabled-border-colour: var(--mocha-surface1);
+
+    --fc-operation-font-colour: var(--mocha-base);
+    --fc-operation-bg-colour: var(--mocha-mauve);
+    --fc-operation-border-colour: var(--mocha-mauve);
+
+    --fc-breakpoint-operation-font-colour: var(--mocha-base);
+    --fc-breakpoint-operation-bg-colour: var(--mocha-red);
+    --fc-breakpoint-operation-border-colour: var(--mocha-maroon);
+
+    /* Operation arguments */
+    --op-title-font-weight: bold;
+    --arg-font-colour: var(--mocha-subtext1);
+    --arg-background: var(--mocha-mantle);
+    --arg-border-colour: var(--mocha-surface1);
+    --arg-disabled-background: var(--mocha-surface0);
+    --arg-label-colour: var(--mocha-blue);
+
+    /* Operation buttons */
+    --disable-icon-colour: var(--mocha-text);
+    --disable-icon-selected-colour: var(--mocha-peach);
+    --breakpoint-icon-colour: var(--mocha-text);
+    --breakpoint-icon-selected-colour: var(--mocha-red);
+
+    /* Buttons */
+    --btn-default-font-colour: var(--mocha-text);
+    --btn-default-bg-colour: var(--mocha-surface0);
+    --btn-default-border-colour: var(--mocha-surface1);
+
+    --btn-default-hover-font-colour: var(--mocha-text);
+    --btn-default-hover-bg-colour: var(--mocha-surface1);
+    --btn-default-hover-border-colour: var(--mocha-surface2);
+
+    --btn-success-font-colour: var(--mocha-base);
+    --btn-success-bg-colour: var(--mocha-green);
+    --btn-success-border-colour: var(--mocha-green);
+
+    --btn-success-hover-font-colour: var(--mocha-base);
+    --btn-success-hover-bg-colour: #bce8ba; /* Lighter mocha-green */
+    --btn-success-hover-border-colour: #bce8ba;
+
+    /* Highlighter colours */
+    --hl1: var(--mocha-yellow);
+    --hl2: var(--mocha-sky);
+    --hl3: var(--mocha-red);
+    --hl4: var(--mocha-mauve);
+    --hl5: var(--mocha-green);
+
+    /* Scrollbar */
+    --scrollbar-track: var(--mocha-mantle);
+    --scrollbar-thumb: var(--mocha-surface1);
+    --scrollbar-hover: var(--mocha-surface2);
+
+    /* Misc. */
+    --drop-file-border-colour: var(--mocha-blue);
+    --table-border-colour: var(--mocha-surface0);
+    --popover-background: var(--mocha-crust);
+    --popover-border-colour: var(--mocha-surface1);
+    --code-background: var(--mocha-mantle);
+    --code-font-colour: var(--mocha-subtext1);
+    --input-highlight-colour: var(--mocha-blue);
+    --input-border-colour: var(--mocha-surface1);
+}