From 62546dc8290118d17cc840c53fa5dbfd7e7dbac9 Mon Sep 17 00:00:00 2001
From: Kyattsukuro <nikl.free44@gmail.com>
Date: Mon, 19 Jan 2026 22:04:03 +0100
Subject: [PATCH] added custom theme

---
 theme/main.scss | 587 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 587 insertions(+)
 create mode 100644 theme/main.scss

diff --git a/theme/main.scss b/theme/main.scss
new file mode 100644
index 0000000..253c894
--- /dev/null
+++ b/theme/main.scss
@@ -0,0 +1,587 @@
+@use 'sass:color';
+/* Latte Theme */
+$latte-rosewater: rgb(220, 138, 120);
+$latte-flamingo: rgb(221, 120, 120);
+$latte-pink: rgb(234, 118, 203);
+$latte-mauve: rgb(136, 57, 239);
+$latte-red: rgb(210, 15, 57);
+$latte-maroon: rgb(230, 69, 83);
+$latte-peach: rgb(254, 100, 11);
+$latte-yellow: rgb(223, 142, 29);
+$latte-green: rgb(64, 160, 43);
+$latte-teal: rgb(23, 146, 153);
+$latte-sky: rgb(4, 165, 229);
+$latte-sapphire: rgb(32, 159, 181);
+$latte-blue: rgb(30, 102, 245);
+$latte-lavender: rgb(114, 135, 253);
+$latte-text: rgb(76, 79, 105);
+$latte-subtext1: rgb(92, 95, 119);
+$latte-subtext0: rgb(108, 111, 133);
+$latte-overlay2: rgb(124, 127, 147);
+$latte-overlay1: rgb(140, 143, 161);
+$latte-overlay0: rgb(156, 160, 176);
+$latte-surface2: rgb(172, 176, 190);
+$latte-surface1: rgb(188, 192, 204);
+$latte-surface0: rgb(204, 208, 218);
+$latte-base: rgb(239, 241, 245);
+$latte-mantle: rgb(230, 233, 239);
+$latte-crust: rgb(220, 224, 232);
+
+/* Frappe Theme */
+$frappe-rosewater: rgb(242, 213, 207); 
+$frappe-flamingo: rgb(238, 190, 190);
+$frappe-pink: rgb(244, 184, 228);
+$frappe-mauve: rgb(202, 158, 230);
+$frappe-red: rgb(231, 130, 132);
+$frappe-maroon: rgb(234, 153, 156);
+$frappe-peach: rgb(239, 159, 118);
+$frappe-yellow: rgb(229, 200, 144);
+$frappe-green: rgb(166, 209, 137);
+$frappe-teal: rgb(129, 200, 190);
+$frappe-sky: rgb(153, 209, 219);
+$frappe-sapphire: rgb(133, 193, 220);
+$frappe-blue: rgb(140, 170, 238);
+$frappe-lavender: rgb(186, 187, 241);
+$frappe-text: rgb(198, 208, 245);
+$frappe-subtext1: rgb(181, 191, 226);
+$frappe-subtext0: rgb(165, 173, 206);
+$frappe-overlay2: rgb(148, 156, 187);
+$frappe-overlay1: rgb(131, 139, 167);
+$frappe-overlay0: rgb(115, 121, 148);
+$frappe-surface2: rgb(98, 104, 128);
+$frappe-surface1: rgb(81, 87, 109);
+$frappe-surface0: rgb(65, 69, 89);
+$frappe-base: rgb(48, 52, 70);
+$frappe-mantle: rgb(41, 44, 60);
+$frappe-crust: rgb(35, 38, 52);
+
+/* Macchiato Theme */
+$macchiato-rosewater: rgb(244, 219, 214);
+$macchiato-flamingo: rgb(240, 198, 198);
+$macchiato-pink: rgb(245, 189, 230);
+$macchiato-mauve: rgb(198, 160, 246);
+$macchiato-red: rgb(237, 135, 150);
+$macchiato-maroon: rgb(238, 153, 160);
+$macchiato-peach: rgb(245, 169, 127);
+$macchiato-yellow: rgb(238, 212, 159);
+$macchiato-green: rgb(166, 218, 149);
+$macchiato-teal: rgb(139, 213, 202);
+$macchiato-sky: rgb(145, 215, 227);
+$macchiato-sapphire: rgb(125, 196, 228);
+$macchiato-blue: rgb(138, 173, 244);
+$macchiato-lavender: rgb(183, 189, 248);
+$macchiato-text: rgb(202, 211, 245);
+$macchiato-subtext1: rgb(184, 192, 224);
+$macchiato-subtext0: rgb(165, 173, 203);
+$macchiato-overlay2: rgb(147, 154, 183);
+$macchiato-overlay1: rgb(128, 135, 162);
+$macchiato-overlay0: rgb(110, 115, 141);
+$macchiato-surface2: rgb(91, 96, 120);
+$macchiato-surface1: rgb(73, 77, 100);
+$macchiato-surface0: rgb(54, 58, 79);
+$macchiato-base: rgb(36, 39, 58);
+$macchiato-mantle: rgb(30, 32, 48);
+$macchiato-crust: rgb(24, 25, 38);
+
+/* Mocha Theme */
+$mocha-rosewater: rgb(245, 224, 220);
+$mocha-flamingo: rgb(242, 205, 205);
+$mocha-pink: rgb(245, 194, 231);
+$mocha-mauve: rgb(203, 166, 247);
+$mocha-red: rgb(243, 139, 168);
+$mocha-maroon: rgb(235, 160, 172);
+$mocha-peach: rgb(250, 179, 135);
+$mocha-yellow: rgb(249, 226, 175);
+$mocha-green: rgb(166, 227, 161);
+$mocha-teal: rgb(148, 226, 213);
+$mocha-sky: rgb(137, 220, 235);
+$mocha-sapphire: rgb(116, 199, 236);
+$mocha-blue: rgb(137, 180, 250);
+$mocha-lavender: rgb(180, 190, 254);
+$mocha-text: rgb(205, 214, 244);
+$mocha-subtext1: rgb(186, 194, 222);
+$mocha-subtext0: rgb(166, 173, 200);
+$mocha-overlay2: rgb(147, 153, 178);
+$mocha-overlay1: rgb(127, 132, 156);
+$mocha-overlay0: rgb(108, 112, 134);
+$mocha-surface2: rgb(88, 91, 112);
+$mocha-surface1: rgb(69, 71, 90);
+$mocha-surface0: rgb(49, 50, 68);
+$mocha-base: rgb(30, 30, 46);
+$mocha-mantle: rgb(24, 24, 37);
+$mocha-crust: rgb(17, 17, 27);
+
+
+[data-theme-light] {
+  //+0.05,
+      --color-main-background: #{rgba($latte-base, 0.93)} ;
+      --color-main-background-rgb: #{$latte-base};
+      --color-main-background-translucent: #{rgba($latte-base, .97)};
+      --color-main-background-blur: #{rgba($latte-base, .8)};
+      --filter-background-blur: #{blur(25px)};
+      --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
+      --color-background-hover: #{$latte-surface1};
+      --color-background-dark:  #{color.scale($latte-surface0, $lightness: 5%)};
+      --color-background-darker: #{$latte-surface0};
+      --color-placeholder-light: #{color.scale($latte-surface2, $lightness: 5%)};
+      --color-placeholder-dark: #{$latte-surface2};
+      --color-main-text: #{$latte-text};
+      --color-text-maxcontrast: #{$latte-subtext1};
+      --color-text-maxcontrast-default: #{color.scale($latte-subtext0, $lightness: 5%)};
+      --color-text-maxcontrast-background-blur: #{$latte-subtext0};
+      --color-text-light: #{var(--color-main-text)};
+      --color-text-lighter: #{var(--color-text-maxcontrast)};
+      --color-scrollbar: #{$latte-mauve};
+      --color-error: #{$latte-red};
+      --color-error-rgb: #{$latte-red};
+      --color-error-hover: #{color.scale($latte-red, $lightness: 5%)};
+      --color-error-text: #{color.scale($latte-red, $lightness: -10%)};
+      --color-warning: #{$latte-peach};
+      --color-warning-rgb: #{$latte-peach};
+      --color-warning-hover: #{color.scale($latte-peach, $lightness: 5%)};
+      --color-warning-text: #{color.scale($latte-peach, $lightness: -10%)};
+      --color-success: #{$latte-green};
+      --color-success-rgb: #{$latte-green};
+      --color-success-hover: #{color.scale($latte-green, $lightness: 5%)};
+      --color-success-text: #{color.scale($latte-green, $lightness: -10%)};
+      --color-info: #{$latte-blue};
+      --color-info-rgb: #{$latte-blue};
+      --color-info-hover: #{color.scale($latte-blue, $lightness: 5%)};
+      --color-info-text: #{color.scale($latte-blue, $lightness: -10%)};
+      --color-loading-light: #{$latte-overlay0};
+      --color-loading-dark: #{$latte-subtext1};
+      --color-box-shadow-rgb: #{color.scale($latte-crust, $lightness: 10%)};
+      --color-box-shadow: #{color.scale($latte-crust, $lightness: 15%)};
+      --color-border: #{$latte-crust};
+      --color-border-dark: #{color.scale($latte-crust, $lightness: 5%)};
+      --color-border-maxcontrast: #{color.scale($latte-crust, $lightness: -10%)};
+  
+  
+      --color-primary: #{$latte-maroon};
+      --color-primary-default: #{$latte-maroon};
+      --color-primary-text: #{$latte-crust};
+      --color-primary-hover: #{color.scale($latte-maroon, $lightness: -5%)};
+    
+      --color-primary-light: #{$latte-green};
+      --color-primary-light-text: #{$latte-crust};
+      --color-primary-light-hover: #{color.scale($latte-green, $lightness: -5%)};
+    
+      --color-primary-element: #{$latte-maroon};
+      --color-primary-element-hover: #{color.scale($latte-maroon, $lightness: -5%)};
+      --color-primary-element-text: #{$latte-crust};
+      --color-primary-element-text-dark: #{$latte-mantle};
+    
+      --color-primary-element-light: #{$latte-blue};
+      --color-primary-element-light-hover: #{color.scale($latte-blue, $lightness: -5%)};
+      --color-primary-element-light-text: #{$latte-crust};
+      --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
+      
+      //Unchanged
+      --font-face: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Ubuntu, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+      --default-font-size: 15px;
+      --animation-quick: 100ms;
+      --animation-slow: 300ms;
+      --border-radius: 3px;
+      --border-radius-large: 10px;
+      --border-radius-rounded: 28px;
+      --border-radius-pill: 100px;
+      --default-clickable-area: 44px;
+      --default-line-height: 24px;
+      --default-grid-baseline: 4px;
+      --header-height: 50px;
+      --navigation-width: 300px;
+      --sidebar-min-width: 300px;
+      --sidebar-max-width: 500px;
+      --list-min-width: 200px;
+      --list-max-width: 300px;
+      --header-menu-item-height: 44px;
+      --header-menu-profile-item-height: 66px;
+      --breakpoint-mobile: 1024px;
+      --background-invert-if-dark: invert(100%);
+      --background-invert-if-bright: no;
+      --background-image-invert-if-bright: no;
+      --primary-invert-if-bright: no;
+      --primary-invert-if-dark: invert(100%);
+}
+[data-theme-dark] {
+//+0.05,
+    --color-main-background: #{rgba($frappe-base, 0.93)} ;
+    --color-main-background-rgb: #{$frappe-base};
+    --color-main-background-translucent: #{rgba($frappe-base, .97)};
+    --color-main-background-blur: #{rgba($frappe-base, .8)};
+    --filter-background-blur: #{blur(25px)};
+    --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
+    --color-background-hover: #{$frappe-surface1};
+    --color-background-dark:  #{color.scale($frappe-surface0, $lightness: 5%)};
+    --color-background-darker: #{$frappe-surface0};
+    --color-placeholder-light: #{color.scale($frappe-surface2, $lightness: 5%)};
+    --color-placeholder-dark: #{$frappe-surface2};
+    --color-main-text: #{$frappe-text};
+    --color-text-maxcontrast: #{$frappe-subtext1};
+    --color-text-maxcontrast-default: #{color.scale($frappe-subtext0, $lightness: 5%)};
+    --color-text-maxcontrast-background-blur: #{$frappe-subtext0};
+    --color-text-light: #{var(--color-main-text)};
+    --color-text-lighter: #{var(--color-text-maxcontrast)};
+    --color-scrollbar: #{$frappe-mauve};
+    --color-error: #{$frappe-red};
+    --color-error-rgb: #{$frappe-red};
+    --color-error-hover: #{color.scale($frappe-red, $lightness: 5%)};
+    --color-error-text: #{color.scale($frappe-red, $lightness: -10%)};
+    --color-warning: #{$frappe-peach};
+    --color-warning-rgb: #{$frappe-peach};
+    --color-warning-hover: #{color.scale($frappe-peach, $lightness: 5%)};
+    --color-warning-text: #{color.scale($frappe-peach, $lightness: -10%)};
+    --color-success: #{$frappe-green};
+    --color-success-rgb: #{$frappe-green};
+    --color-success-hover: #{color.scale($frappe-green, $lightness: 5%)};
+    --color-success-text: #{color.scale($frappe-green, $lightness: -10%)};
+    --color-info: #{$frappe-blue};
+    --color-info-rgb: #{$frappe-blue};
+    --color-info-hover: #{color.scale($frappe-blue, $lightness: 5%)};
+    --color-info-text: #{color.scale($frappe-blue, $lightness: -10%)};
+    --color-loading-light: #{$frappe-overlay0};
+    --color-loading-dark: #{$frappe-subtext1};
+    --color-box-shadow-rgb: #{color.scale($frappe-crust, $lightness: 10%)};
+    --color-box-shadow: #{color.scale($frappe-crust, $lightness: 15%)};
+    --color-border: #{$frappe-crust};
+    --color-border-dark: #{color.scale($frappe-crust, $lightness: 5%)};
+    --color-border-maxcontrast: #{color.scale($frappe-crust, $lightness: -10%)};
+
+
+    --color-primary: #{$frappe-maroon};
+    --color-primary-default: #{$frappe-maroon};
+    --color-primary-text: #{$frappe-crust};
+    --color-primary-hover: #{color.scale($frappe-maroon, $lightness: -5%)};
+  
+    --color-primary-light: #{$frappe-green};
+    --color-primary-light-text: #{$frappe-crust};
+    --color-primary-light-hover: #{color.scale($frappe-green, $lightness: -5%)};
+  
+    --color-primary-element: #{$frappe-maroon};
+    --color-primary-element-hover: #{color.scale($frappe-maroon, $lightness: -5%)};
+    --color-primary-element-text: #{$frappe-crust};
+    --color-primary-element-text-dark: #{$frappe-mantle};
+  
+    --color-primary-element-light: #{$frappe-blue};
+    --color-primary-element-light-hover: #{color.scale($frappe-blue, $lightness: -5%)};
+    --color-primary-element-light-text: #{$frappe-crust};
+    --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
+    
+    //Unchanged
+    --font-face: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Ubuntu, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --default-font-size: 15px;
+    --animation-quick: 100ms;
+    --animation-slow: 300ms;
+    --border-radius: 3px;
+    --border-radius-large: 10px;
+    --border-radius-rounded: 28px;
+    --border-radius-pill: 100px;
+    --default-clickable-area: 44px;
+    --default-line-height: 24px;
+    --default-grid-baseline: 4px;
+    --header-height: 50px;
+    --navigation-width: 300px;
+    --sidebar-min-width: 300px;
+    --sidebar-max-width: 500px;
+    --list-min-width: 200px;
+    --list-max-width: 300px;
+    --header-menu-item-height: 44px;
+    --header-menu-profile-item-height: 66px;
+    --breakpoint-mobile: 1024px;
+    --background-invert-if-dark: invert(100%);
+    --background-invert-if-bright: no;
+    --background-image-invert-if-bright: no;
+    --primary-invert-if-bright: no;
+    --primary-invert-if-dark: invert(100%);
+}
+[data-theme-dark-highcontrast] {
+  //+0.05,
+      --color-main-background: #{rgba($mocha-base, 0.93)} ;
+      --color-main-background-rgb: #{$mocha-base};
+      --color-main-background-translucent: #{rgba($mocha-base, .97)};
+      --color-main-background-blur: #{rgba($mocha-base, .8)};
+      --filter-background-blur: #{blur(25px)};
+      --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
+      --color-background-hover: #{$mocha-surface1};
+      --color-background-dark:  #{color.scale($mocha-surface0, $lightness: 5%)};
+      --color-background-darker: #{$mocha-surface0};
+      --color-placeholder-light: #{color.scale($mocha-surface2, $lightness: 5%)};
+      --color-placeholder-dark: #{$mocha-surface2};
+      --color-main-text: #{$mocha-text};
+      --color-text-maxcontrast: #{$mocha-subtext1};
+      --color-text-maxcontrast-default: #{color.scale($mocha-subtext0, $lightness: 5%)};
+      --color-text-maxcontrast-background-blur: #{$mocha-subtext0};
+      --color-text-light: #{var(--color-main-text)};
+      --color-text-lighter: #{var(--color-text-maxcontrast)};
+      --color-scrollbar: #{$mocha-mauve};
+      --color-error: #{$mocha-red};
+      --color-error-rgb: #{$mocha-red};
+      --color-error-hover: #{color.scale($mocha-red, $lightness: 5%)};
+      --color-error-text: #{color.scale($mocha-red, $lightness: -10%)};
+      --color-warning: #{$mocha-peach};
+      --color-warning-rgb: #{$mocha-peach};
+      --color-warning-hover: #{color.scale($mocha-peach, $lightness: 5%)};
+      --color-warning-text: #{color.scale($mocha-peach, $lightness: -10%)};
+      --color-success: #{$mocha-green};
+      --color-success-rgb: #{$mocha-green};
+      --color-success-hover: #{color.scale($mocha-green, $lightness: 5%)};
+      --color-success-text: #{color.scale($mocha-green, $lightness: -10%)};
+      --color-info: #{$mocha-blue};
+      --color-info-rgb: #{$mocha-blue};
+      --color-info-hover: #{color.scale($mocha-blue, $lightness: 5%)};
+      --color-info-text: #{color.scale($mocha-blue, $lightness: -10%)};
+      --color-loading-light: #{$mocha-overlay0};
+      --color-loading-dark: #{$mocha-subtext1};
+      --color-box-shadow-rgb: #{color.scale($mocha-crust, $lightness: 10%)};
+      --color-box-shadow: #{color.scale($mocha-crust, $lightness: 15%)};
+      --color-border: #{$mocha-crust};
+      --color-border-dark: #{color.scale($mocha-crust, $lightness: 5%)};
+      --color-border-maxcontrast: #{color.scale($mocha-crust, $lightness: -10%)};
+  
+  
+      --color-primary: #{$mocha-maroon};
+      --color-primary-default: #{$mocha-maroon};
+      --color-primary-text: #{$mocha-crust};
+      --color-primary-hover: #{color.scale($mocha-maroon, $lightness: -5%)};
+    
+      --color-primary-light: #{$mocha-green};
+      --color-primary-light-text: #{$mocha-crust};
+      --color-primary-light-hover: #{color.scale($mocha-green, $lightness: -5%)};
+    
+      --color-primary-element: #{$mocha-maroon};
+      --color-primary-element-hover: #{color.scale($mocha-maroon, $lightness: -5%)};
+      --color-primary-element-text: #{$mocha-crust};
+      --color-primary-element-text-dark: #{$mocha-mantle};
+    
+      --color-primary-element-light: #{$mocha-blue};
+      --color-primary-element-light-hover: #{color.scale($mocha-blue, $lightness: -5%)};
+      --color-primary-element-light-text: #{$mocha-crust};
+      --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
+      
+      //Unchanged
+      --font-face: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Ubuntu, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+      --default-font-size: 15px;
+      --animation-quick: 100ms;
+      --animation-slow: 300ms;
+      --border-radius: 3px;
+      --border-radius-large: 10px;
+      --border-radius-rounded: 28px;
+      --border-radius-pill: 100px;
+      --default-clickable-area: 44px;
+      --default-line-height: 24px;
+      --default-grid-baseline: 4px;
+      --header-height: 50px;
+      --navigation-width: 300px;
+      --sidebar-min-width: 300px;
+      --sidebar-max-width: 500px;
+      --list-min-width: 200px;
+      --list-max-width: 300px;
+      --header-menu-item-height: 44px;
+      --header-menu-profile-item-height: 66px;
+      --breakpoint-mobile: 1024px;
+      --background-invert-if-dark: invert(100%);
+      --background-invert-if-bright: no;
+      --background-image-invert-if-bright: no;
+      --primary-invert-if-bright: no;
+      --primary-invert-if-dark: invert(100%);
+}
+[data-theme-light-highcontrast] {
+  //+0.05,
+      --color-main-background: #{rgba($macchiato-base, 0.93)} ;
+      --color-main-background-rgb: #{$macchiato-base};
+      --color-main-background-translucent: #{rgba($macchiato-base, .97)};
+      --color-main-background-blur: #{rgba($macchiato-base, .8)};
+      --filter-background-blur: #{blur(25px)};
+      --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
+      --color-background-hover: #{$macchiato-surface1};
+      --color-background-dark:  #{color.scale($macchiato-surface0, $lightness: 5%)};
+      --color-background-darker: #{$macchiato-surface0};
+      --color-placeholder-light: #{color.scale($macchiato-surface2, $lightness: 5%)};
+      --color-placeholder-dark: #{$macchiato-surface2};
+      --color-main-text: #{$macchiato-text};
+      --color-text-maxcontrast: #{$macchiato-subtext1};
+      --color-text-maxcontrast-default: #{color.scale($macchiato-subtext0, $lightness: 5%)};
+      --color-text-maxcontrast-background-blur: #{$macchiato-subtext0};
+      --color-text-light: #{var(--color-main-text)};
+      --color-text-lighter: #{var(--color-text-maxcontrast)};
+      --color-scrollbar: #{$macchiato-mauve};
+      --color-error: #{$macchiato-red};
+      --color-error-rgb: #{$macchiato-red};
+      --color-error-hover: #{color.scale($macchiato-red, $lightness: 5%)};
+      --color-error-text: #{color.scale($macchiato-red, $lightness: -10%)};
+      --color-warning: #{$macchiato-peach};
+      --color-warning-rgb: #{$macchiato-peach};
+      --color-warning-hover: #{color.scale($macchiato-peach, $lightness: 5%)};
+      --color-warning-text: #{color.scale($macchiato-peach, $lightness: -10%)};
+      --color-success: #{$macchiato-green};
+      --color-success-rgb: #{$macchiato-green};
+      --color-success-hover: #{color.scale($macchiato-green, $lightness: 5%)};
+      --color-success-text: #{color.scale($macchiato-green, $lightness: -10%)};
+      --color-info: #{$macchiato-blue};
+      --color-info-rgb: #{$macchiato-blue};
+      --color-info-hover: #{color.scale($macchiato-blue, $lightness: 5%)};
+      --color-info-text: #{color.scale($macchiato-blue, $lightness: -10%)};
+      --color-loading-light: #{$macchiato-overlay0};
+      --color-loading-dark: #{$macchiato-subtext1};
+      --color-box-shadow-rgb: #{color.scale($macchiato-crust, $lightness: 10%)};
+      --color-box-shadow: #{color.scale($macchiato-crust, $lightness: 15%)};
+      --color-border: #{$macchiato-crust};
+      --color-border-dark: #{color.scale($macchiato-crust, $lightness: 5%)};
+      --color-border-maxcontrast: #{color.scale($macchiato-crust, $lightness: -10%)};
+  
+  
+      --color-primary: #{$macchiato-maroon};
+      --color-primary-default: #{$macchiato-maroon};
+      --color-primary-text: #{$macchiato-crust};
+      --color-primary-hover: #{color.scale($macchiato-maroon, $lightness: -5%)};
+    
+      --color-primary-light: #{$macchiato-green};
+      --color-primary-light-text: #{$macchiato-crust};
+      --color-primary-light-hover: #{color.scale($macchiato-green, $lightness: -5%)};
+    
+      --color-primary-element: #{$macchiato-maroon};
+      --color-primary-element-hover: #{color.scale($macchiato-maroon, $lightness: -5%)};
+      --color-primary-element-text: #{$macchiato-crust};
+      --color-primary-element-text-dark: #{$macchiato-mantle};
+    
+      --color-primary-element-light: #{$macchiato-blue};
+      --color-primary-element-light-hover: #{color.scale($macchiato-blue, $lightness: -5%)};
+      --color-primary-element-light-text: #{$macchiato-crust};
+      --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
+      
+      //Unchanged
+      --font-face: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Ubuntu, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+      --default-font-size: 15px;
+      --animation-quick: 100ms;
+      --animation-slow: 300ms;
+      --border-radius: 3px;
+      --border-radius-large: 10px;
+      --border-radius-rounded: 28px;
+      --border-radius-pill: 100px;
+      --default-clickable-area: 44px;
+      --default-line-height: 24px;
+      --default-grid-baseline: 4px;
+      --header-height: 50px;
+      --navigation-width: 300px;
+      --sidebar-min-width: 300px;
+      --sidebar-max-width: 500px;
+      --list-min-width: 200px;
+      --list-max-width: 300px;
+      --header-menu-item-height: 44px;
+      --header-menu-profile-item-height: 66px;
+      --breakpoint-mobile: 1024px;
+      --background-invert-if-dark: invert(100%);
+      --background-invert-if-bright: no;
+      --background-image-invert-if-bright: no;
+      --primary-invert-if-bright: no;
+      --primary-invert-if-dark: invert(100%);
+}
+
+/*Theme selection hide old description*/
+.theming__preview .checkbox-radio-switch__text,
+.theming__preview--light h3, .theming__preview--light p,
+.theming__preview--dark h3, .theming__preview--dark p,
+.theming__preview--light-highcontrast h3, .theming__preview--light-highcontrast p,
+.theming__preview--dark-highcontrast h3, .theming__preview--dark-highcontrast p {
+  visibility: hidden;
+}
+
+//Replace old radio btn. lable
+.theming__preview .checkbox-radio-switch__text::before {
+  visibility: visible;
+  content: "Enable this theme";
+}
+
+//Show new theme description
+.theming__preview--light h3::before {
+  content: "Latte theme";
+  visibility: visible;
+}
+.theming__preview--light p::before {
+  content: "The catppuccino light theme";
+  visibility: visible;
+}
+.theming__preview--light .theming__preview-image,
+.theming__preview--dark .theming__preview-image,
+.theming__preview--light-highcontrast .theming__preview-image,
+.theming__preview--dark-highcontrast .theming__preview-image {
+  //background-image: TODO; !important;
+  display: none;
+}
+
+//Show new theme description
+.theming__preview--dark h3::before {
+  content: "Frappe Theme";
+  visibility: visible;
+}
+.theming__preview--dark p::before {
+  content: "The milde and cozy catppuccino dark theme";
+  visibility: visible;
+}
+
+//Show new theme description
+.theming__preview--light-highcontrast h3::before {
+  content: "Macchiato Theme";
+  visibility: visible;
+}
+.theming__preview--light-highcontrast p::before {
+  content: "Catpuccinos perfect mix between Mocha and Frappe";
+  visibility: visible;
+}
+
+//Show new theme description
+.theming__preview--dark-highcontrast h3::before {
+  content: "Mocha Theme";
+  visibility: visible;
+}
+.theming__preview--dark-highcontrast p::before {
+  content: "Catppuccinos dark theme withe bright colors";
+  visibility: visible;
+}
+
+
+/*Setting left nav Pannel to be transparent without blur*/
+.app-navigation {
+  background-color: var(--color-main-background) !important;
+  backdrop-filter: None !important;
+  }
+
+/*Setting markdown editor link color to primary light*/
+.paragraph-content a {
+color: var(--color-primary-element-light) !important; 
+}
+
+/*Fixing Dashboards toggel item widget visibility (e.g. weather)*/
+.action-item__menutoggle{
+background-color: var(--color-primary-element-light) !important;
+}
+/*Fixing Dashboard Welcome msg visibility*/
+.app-dashboard h2:nth-child(1) {
+  color: var(--color-main-text) !important;
+  }
+
+/*Fixing Mail sidebar 1 text visibility when selected*/
+.app-navigation-entry.active a{
+  color: var(--color-primary-element-text) !important;
+}
+/*Fixing Mail sidebar 2 text visibility when selected*/
+.list-item__wrapper.list-item__wrapper--active .list-item-content__main span,
+.list-item__wrapper.list-item__wrapper--active .list-item-content__main span .envelope__preview-text{
+  color: var(--color-primary-element-text) !important;
+}
+
+/*Fixing visibility of left header label and right header icons*/
+.header-right .header-menu button,
+.headeu-main li .app-menu-entry--label{
+  color: var(--color-main-text) !important;
+}
+
+/*Fixing share link folder icon*/
+.files-public-content .thumbnail
+{
+    filter: brightness(0) saturate(100%) invert(93%) sepia(17%) saturate(7243%) hue-rotate(295deg) brightness(97%) contrast(89%);
+}
+
+.files-public-content .files-fileList .date {
+  color: var(--color-main-text) !important;
+}
\ No newline at end of file