2 gradient themes, Midnight Fairy & Neon City, and 1 related Tweak

themes/blue-nord.sable.css

@@ -68,11 +68,11 @@ body.sable-remote-theme {
   --sable-success-on-container: hsl(189, 46%, 87.6%);
 
   /* Warning */
-  --sable-warn-main: hsl(40, 100%, 100%);
-  --sable-warn-main-hover: hsl(40, 50%, 100%);
-  --sable-warn-main-active: hsl(40, 50%, 100%);
-  --sable-warn-main-line: hsl(40, 50%, 100%);
-  --sable-warn-on-main: hsl(40, 25%, 30%);
+  --sable-warn-main: hsl(0, 100%, 100%);
+  --sable-warn-main-hover: hsl(0, 50%, 100%);
+  --sable-warn-main-active: hsl(0, 50%, 100%);
+  --sable-warn-main-line: hsl(0, 50%, 100%);
+  --sable-warn-on-main: hsl(0, 25%, 30%);
   --sable-warn-container: hsl(40, 30%, 45%);
   --sable-warn-container-hover: hsl(40, 30%, 49.5%);
   --sable-warn-container-active: hsl(40, 30%, 54%);

themes/midnight-fairy.preview.sable.css

@@ -0,0 +1,20 @@
+/*
+@sable-theme
+id: midnight-fairy
+name: Midnight Fairy
+author: userspring
+kind: dark
+contrast: low
+tags: gradient, purple, violet blue, two-tone
+fullThemeUrl: https://raw.githubusercontent.com/SableClient/themes/main/themes/midnight-fairy.sable.css
+*/
+
+.sable-theme-preview {
+  --sable-bg-container: linear-gradient(to left, hsl(250, 40%, 28%), hsl(225, 40%, 25%));
+  --sable-bg-on-container: hsl(345, 30%, 88%);
+  --sable-surface-container: hsl(230, 35%, 33%);
+  --sable-surface-container-line: hsl(270, 25%, 30.94%);
+  --sable-surface-on-container: hsl(345, 25%, 92%);
+  --sable-primary-main: hsl(270, 25%, 34%);
+  --sable-primary-on-main: hsl(270, 12.5%, 85%);
+}

themes/midnight-fairy.sable.css

@@ -0,0 +1,124 @@
+/*
+@sable-theme
+id: midnight-fairy
+name: Midnight Fairy
+author: userspring
+kind: dark
+contrast: low
+tags: gradient, purple, violet blue, two-tone
+fullThemeUrl: https://raw.githubusercontent.com/SableClient/themes/main/themes/midnight-fairy.sable.css
+*/
+
+/* Comment: Keep --sides-grad for the "Solid Colors" tweak to work */
+
+  /* Center Box Gradient */
+body.sable-remote-theme [class*="ContainerColor_ContainerColor_variant_Surface"] {
+  --center-grad: radial-gradient(ellipse at right, hsl(250, 40%, 28%) 20%, hsl(210, 40%, 20%)) fixed;
+  background: var(--center-grad);
+}
+
+body.sable-remote-theme {
+
+  /* Side Panels Gradient */
+  --sides-grad: radial-gradient(ellipse at right, hsl(300, 100%, 30%), hsl(0, 0%, 0%)) fixed;
+  background: var(--sides-grad);
+
+  /* Background */
+  --sable-bg-container: hsla(270, 25%, 20.4%, 0.7); /*!*/
+  --sable-bg-container-hover: hsl(270, 25%, 22.44%);
+  --sable-bg-container-active: hsl(270, 25%, 24.48%);
+  --sable-bg-container-line: hsl(270, 25%, 26.52%);
+  --sable-bg-on-container: hsl(345, 30%, 88%);
+
+  /* Surface */
+  --sable-surface-container: hsl(230, 35%, 33%);
+  --sable-surface-container-hover: hsl(250, 25%, 30.18%);
+  --sable-surface-container-active: hsl(270, 25%, 28.56%);
+  --sable-surface-container-line: hsl(270, 25%, 30.94%);
+  --sable-surface-on-container: hsl(345, 25%, 92%);
+
+  /* Surface Variant */
+  --sable-surface-var-container: hsl(230, 40%, 30%);
+  --sable-surface-var-container-hover: hsl(270, 30%, 18.7%);
+  --sable-surface-var-container-active: hsl(270, 30%, 20.4%);
+  --sable-surface-var-container-line: hsl(270, 30%, 35%);
+  --sable-surface-var-on-container: hsl(270, 40%, 90%);
+
+  /* Primary */
+  --sable-primary-main: hsl(270, 25%, 34%);
+  --sable-primary-main-hover: hsl(270, 25%, 37.4%);
+  --sable-primary-main-active: hsl(270, 25%, 40.8%);
+  --sable-primary-main-line: hsl(270, 25%, 44.2%);
+  --sable-primary-on-main: hsl(270, 12.5%, 85%);
+  --sable-primary-container: hsl(270, 22%, 58%);
+  --sable-primary-container-hover: hsl(250, 25%, 40.18%);
+  --sable-primary-container-active: hsl(270, 20%, 53.04%);
+  --sable-primary-container-line: hsl(270, 20%, 57.46%);
+  --sable-primary-on-container: hsl(345, 25%, 92%);
+
+  /* Secondary */
+  --sable-sec-main: hsl(230, 32%, 65%);
+  --sable-sec-main-hover: hsl(230, 50%, 88%);
+  --sable-sec-main-active: hsl(230, 50%, 96%);
+  --sable-sec-main-line: hsl(230, 50%, 100%);
+  --sable-sec-on-main: hsl(230, 50%, 24%);
+  --sable-sec-container: hsl(230, 35%, 50%);
+  --sable-sec-container-hover: hsl(230, 35%, 44%);
+  --sable-sec-container-active: hsl(230, 35%, 48%);
+  --sable-sec-container-line: hsl(230, 35%, 52%);
+  --sable-sec-on-container: hsl(230, 50%, 96%);
+
+  /* Success */
+  --sable-success-main: hsl(345, 46%, 73%);
+  --sable-success-main-hover: hsl(345, 46%, 80.3%);
+  --sable-success-main-active: hsl(345, 46%, 87.6%);
+  --sable-success-main-line: hsl(345, 46%, 94.9%);
+  --sable-success-on-main: hsl(345, 23%, 14.6%);
+  --sable-success-container: hsl(345, 27.6%, 21.9%);
+  --sable-success-container-hover: hsl(345, 27.6%, 24.09%);
+  --sable-success-container-active: hsl(345, 27.6%, 26.28%);
+  --sable-success-container-line: hsl(345, 27.6%, 28.47%);
+  --sable-success-on-container: hsl(345, 46%, 87.6%);
+
+  /* Warning */
+  --sable-warn-main: hsl(0, 100%, 100%);
+  --sable-warn-main-hover: hsl(0, 50%, 100%);
+  --sable-warn-main-active: hsl(0, 50%, 100%);
+  --sable-warn-main-line: hsl(0, 50%, 100%);
+  --sable-warn-on-main: hsl(0, 25%, 30%);
+  --sable-warn-container: hsl(345, 30%, 45%);
+  --sable-warn-container-hover: hsl(345, 30%, 49.5%);
+  --sable-warn-container-active: hsl(345, 30%, 54%);
+  --sable-warn-container-line: hsl(345, 30%, 58.5%);
+  --sable-warn-on-container: hsl(345, 50%, 100%);
+
+  /* Critical */
+  --sable-crit-main: hsl(345, 73%, 68%);
+  --sable-crit-main-hover: hsl(345, 73%, 74.8%);
+  --sable-crit-main-active: hsl(345, 73%, 81.6%);
+  --sable-crit-main-line: hsl(345, 73%, 88.4%);
+  --sable-crit-on-main: hsl(345, 36.5%, 13.6%);
+  --sable-crit-container: hsl(345, 43.8%, 20.4%);
+  --sable-crit-container-hover: hsl(345, 43.8%, 22.44%);
+  --sable-crit-container-active: hsl(345, 43.8%, 24.48%);
+  --sable-crit-container-line: hsl(345, 43.8%, 26.52%);
+  --sable-crit-on-container: hsl(345, 73%, 81.6%);
+
+  /* Other */
+  --sable-focus-ring: hsla(270, 100%, 75%, 0.8);
+  --sable-shadow: hsla(270, 100%, 70%, 0.2);
+  --sable-overlay: hsla(270, 55%, 12%, 0.9);
+}
+
+/* Left Panel Buttons */
+body.sable-remote-theme button[class*="Sidebar_SidebarAvatar"]:hover {
+  background-color: hsl(270, 25%, 30.6%);
+}
+
+/* Tip - Rooms & Settings Left Panel Gradient Zone, useful for zero Translucence:
+
+body.sable-remote-theme [data-sentry-component="PageNav"][data-sentry-element="Box"] {
+background: linear-gradient(to top, hsla(200, 100%, 8%, 0.85) 20%, hsla(300, 100%, 2%, 0.85) 40%) fixed;
+}
+or like we did, set --sable-bg-container alpha to 0.7 and --side-grad saturation to 100% for low translucence
+*/

themes/neon-city.preview.sable.css

@@ -0,0 +1,20 @@
+/*
+@sable-theme
+id: neon-city
+name: Neon City
+author: userspring
+kind: dark
+contrast: high
+tags: gradient, purple, glow, translucent
+fullThemeUrl: https://raw.githubusercontent.com/SableClient/themes/main/themes/neon-city.sable.css
+*/
+
+.sable-theme-preview {
+  --sable-bg-container: linear-gradient(to top, hsl(300, 100%, 8%), hsl(300, 100%, 2%));
+  --sable-bg-on-container: hsla(270, 20.5%, 90%, 0.85);
+  --sable-surface-container: hsla(300, 30%, 5%, 0.67);
+  --sable-surface-container-line: hsla(270, 35%, 30.94%, 0.85);
+  --sable-surface-on-container: hsla(270, 0%, 95%, 1);
+  --sable-primary-main: hsla(270, 25%, 34%, 0.85);
+  --sable-primary-on-main: hsla(270, 12.5%, 85%, 0.85);
+}

themes/neon-city.sable.css

@@ -0,0 +1,140 @@
+/*
+@sable-theme
+id: neon-city
+name: Neon City
+author: userspring
+kind: dark
+contrast: high
+tags: gradient, purple, glow, translucent
+fullThemeUrl: https://raw.githubusercontent.com/SableClient/themes/main/themes/neon-city.sable.css
+*/
+
+/* Comment: Keep alpha vars & --sides-grad for the "Solid Colors" tweak to work */
+
+  /* Center Box Gradient */
+body.sable-remote-theme [class*="ContainerColor_ContainerColor_variant_Surface"] {
+  --center-grad: linear-gradient(to top, hsl(300, 100%, 5.5%) 20%, hsl(300, 100%, 2%) 40%) fixed;
+  background: var(--center-grad);
+}
+
+body.sable-remote-theme {
+
+  /* Side Panels Gradient */
+  --sides-grad: linear-gradient(to top, hsl(300, 100%, 7.5%) 20%, hsl(300, 100%, 2%) 40%) fixed;
+  background: var(--sides-grad);
+
+  /* Translucence - Don't add new vars */
+  --softest-alpha: 0;
+  --softer-alpha: 0.4;
+  --soft-alpha: 0.67;
+  --hard-alpha: 0.85;
+  --harder-alpha: meow;
+  --hardest-alpha: 1;
+
+  /* Background */
+  --sable-bg-container: hsla(300, 50%, 6%, 0.05); /*!*/
+  --sable-bg-container-hover: hsla(270, 25%, 22.44%, var(--hard-alpha));
+  --sable-bg-container-active: hsla(270, 25%, 24.48%, var(--hard-alpha));
+  --sable-bg-container-line: hsla(270, 45%, 26.52%, var(--hard-alpha));
+  --sable-bg-on-container: hsla(270, 20.5%, 90%, var(--hard-alpha));
+
+  /* Surface */
+  --sable-surface-container: hsla(300, 30%, 5%, var(--soft-alpha)); /*!*/
+  --sable-surface-container-hover: hsla(300, 25%, 11%, var(--hard-alpha));
+  --sable-surface-container-active: hsla(270, 25%, 28.56%, var(--hard-alpha));
+  --sable-surface-container-line: hsla(270, 35%, 30.94%, var(--hard-alpha));
+  --sable-surface-on-container: hsla(270, 0%, 95%, var(--hardest-alpha));
+
+  /* Surface Variant */
+  --sable-surface-var-container: hsla(270, 0%, 0%, var(--softer-alpha)); /*!*/
+  --sable-surface-var-container-hover: hsla(270, 30%, 18.7%, var(--hard-alpha));
+  --sable-surface-var-container-active: hsla(270, 30%, 20.4%, var(--hard-alpha));
+  --sable-surface-var-container-line: hsla(270, 35%, 42%, var(--hard-alpha));
+  --sable-surface-var-on-container: hsla(270, 40%, 90%, var(--hard-alpha));
+
+  /* Primary */
+  --sable-primary-main: hsla(270, 25%, 34%, var(--hard-alpha));
+  --sable-primary-main-hover: hsla(270, 25%, 37.4%, var(--hard-alpha));
+  --sable-primary-main-active: hsla(270, 25%, 40.8%, var(--hard-alpha));
+  --sable-primary-main-line: hsla(270, 35%, 44.2%, var(--hard-alpha));
+  --sable-primary-on-main: hsla(270, 12.5%, 85%, var(--hard-alpha));
+  --sable-primary-container: hsla(270, 20%, 20%, var(--hard-alpha));
+  --sable-primary-container-hover: hsla(272, 43.8%, 22.44%, var(--hard-alpha));
+  --sable-primary-container-active: hsla(270, 20%, 53.04%, var(--hard-alpha));
+  --sable-primary-container-line: hsla(270, 30%, 57.46%, var(--hard-alpha));
+  --sable-primary-on-container: hsla(272, 73%, 81.6%, var(--hard-alpha));
+
+  /* Secondary */
+  --sable-sec-main: hsla(270, 35%, 64%, var(--hard-alpha));
+  --sable-sec-main-hover: hsla(270, 50%, 88%, var(--hard-alpha));
+  --sable-sec-main-active: hsla(270, 50%, 96%, var(--hard-alpha));
+  --sable-sec-main-line: hsla(270, 50%, 100%, var(--hard-alpha));
+  --sable-sec-on-main: hsla(270, 50%, 24%, var(--hard-alpha));
+  --sable-sec-container: hsla(270, 35%, 5%, var(--hard-alpha));
+  --sable-sec-container-hover: hsla(270, 35%, 20%, var(--hard-alpha));
+  --sable-sec-container-active: hsla(270, 35%, 48%, var(--hard-alpha));
+  --sable-sec-container-line: hsla(270, 35%, 52%, var(--hard-alpha));
+  --sable-sec-on-container: hsla(270, 50%, 96%, var(--hard-alpha));
+
+  /* Success */
+  --sable-success-main: hsla(271, 46%, 73%, var(--hard-alpha));
+  --sable-success-main-hover: hsla(271, 46%, 80.3%, var(--hard-alpha));
+  --sable-success-main-active: hsla(271, 46%, 87.6%, var(--hard-alpha));
+  --sable-success-main-line: hsla(271, 46%, 94.9%, var(--hard-alpha));
+  --sable-success-on-main: hsla(271, 23%, 14.6%, var(--hard-alpha));
+  --sable-success-container: hsla(271, 27.6%, 21.9%, var(--hard-alpha));
+  --sable-success-container-hover: hsla(271, 27.6%, 24.09%, var(--hard-alpha));
+  --sable-success-container-active: hsla(271, 27.6%, 26.28%, var(--hard-alpha));
+  --sable-success-container-line: hsla(271, 37.6%, 28.47%, var(--hard-alpha));
+  --sable-success-on-container: hsla(271, 46%, 87.6%, var(--hard-alpha));
+
+  /* Warning */
+  --sable-warn-main: hsla(0, 100%, 100%, var(--hard-alpha));
+  --sable-warn-main-hover: hsla(0, 50%, 100%, var(--hard-alpha));
+  --sable-warn-main-active: hsla(0, 50%, 100%, var(--hard-alpha));
+  --sable-warn-main-line: hsla(0, 50%, 100%, var(--hard-alpha));
+  --sable-warn-on-main: hsla(0, 25%, 30%, var(--hard-alpha));
+  --sable-warn-container: hsla(270, 30%, 45%, var(--hard-alpha));
+  --sable-warn-container-hover: hsla(270, 30%, 49.5%, var(--hard-alpha));
+  --sable-warn-container-active: hsla(270, 30%, 54%, var(--hard-alpha));
+  --sable-warn-container-line: hsla(270, 35%, 58.5%, var(--hard-alpha));
+  --sable-warn-on-container: hsla(270, 50%, 100%, var(--hard-alpha));
+
+  /* Critical */
+  --sable-crit-main: hsla(272, 73%, 68%, var(--hard-alpha));
+  --sable-crit-main-hover: hsla(272, 73%, 74.8%, var(--hard-alpha));
+  --sable-crit-main-active: hsla(272, 73%, 81.6%, var(--hard-alpha));
+  --sable-crit-main-line: hsla(272, 73%, 88.4%, var(--hard-alpha));
+  --sable-crit-on-main: hsla(272, 36.5%, 13.6%, var(--hard-alpha));
+  --sable-crit-container: hsla(272, 43.8%, 20.4%, var(--hard-alpha));
+  --sable-crit-container-hover: hsla(272, 43.8%, 22.44%, var(--hard-alpha));
+  --sable-crit-container-active: hsla(272, 43.8%, 24.48%, var(--hard-alpha));
+  --sable-crit-container-line: hsla(272, 43.8%, 26.52%, var(--hard-alpha));
+  --sable-crit-on-container: hsla(272, 73%, 81.6%, var(--hard-alpha));
+
+  /* Other */
+  --sable-focus-ring: hsla(270, 100%, 75%, 0.8);
+  --sable-shadow: hsla(270, 100%, 70%, 0.6);
+  --sable-overlay: hsla(270, 55%, 12%, 0.9);
+}
+
+/* Left Panel Buttons Shadow */
+body.sable-remote-theme button[class*="Sidebar_SidebarAvatar"]:hover {
+  box-shadow: 0 0 9px 1px hsla(270, 100%, 75%, 0.65);
+  transition: box-shadow 0.2s ease;
+}
+
+  /* Text Box Shadow */
+*:focus-visible {
+  box-shadow: 0 10px 15px -10px hsla(270, 50%, 50%, 0.6);
+  outline: none;
+}
+
+
+/* Tip - Rooms & Settings Left Panel Gradient Zone, useful for zero Translucence:
+
+body.sable-remote-theme [data-sentry-component="PageNav"][data-sentry-element="Box"] {
+background: linear-gradient(to top, hsla(200, 100%, 8%, 0.85) 20%, hsla(300, 100%, 2%, 0.85) 40%) fixed;
+}
+or set --sable-bg-container alpha to 0.7 and --side-grad saturation to 100% for low translucence
+*/

themes/shark-deep-blue.sable.css

@@ -93,7 +93,7 @@ body.sable-remote-theme {
   --sable-sec-on-container: hsl(203, 78.9%, 98.99%);
 
   /* --- Success --- */
-  --sable-success-main: hsl(206, 72.59%, 79.17%);
+  --sable-success-main: hsl(353, 72.59%, 79.17%);
   --sable-success-main-hover: hsl(353, 69.43%, 72.67%);
   --sable-success-main-active: hsl(353, 67.85%, 67.90%);
   --sable-success-main-line: hsl(353, 66.28%, 63.68%);

tweaks/solid-colors.sable.css

@@ -0,0 +1,27 @@
+/*
+@sable-tweak
+id: solid-colors
+name: Solid Colors
+description: Remove transparency effects
+author: userspring
+tags: global, translucence
+*/
+
+/* Remove opacity on elements */
+body.sable-remote-theme,
+body.sable-remote-theme * {
+  --softest-alpha: 1 !important;
+  --softer-alpha: 1 !important;
+  --soft-alpha: 1 !important;
+  --hard-alpha: 1 !important;
+  --harder-alpha: 1 !important;
+  --hardest-alpha: 1 !important;
+}
+
+/* Fix for gradient themes - Settings Left Panel*/
+body.sable-remote-theme [data-sentry-component="PageNav"][data-sentry-element="Box"] {
+  background: linear-gradient(to top, var(--sable-bg-container), var(--sable-bg-container)), var(--sides-grad) !important;
+}
+
+
+/* Tip - Check 'Neon City' theme implementation*/