OLED fixes (#3022)

* Make sidebar darker in OLED theme * Fix experimental styles in OLED mode --------- Co-authored-by: Geometrically <[email protected]>
modrinth · Dec 15, 2024 · ac25a36 · ac25a36
1 parent f2e653b
commit ac25a36
Showing 1 changed file with 38 additions and 40 deletions.
diff --git a/packages/assets/styles/variables.scss b/packages/assets/styles/variables.scss
@@ -3,6 +3,7 @@
   --color-raised-bg: #ffffff;
   --color-super-raised-bg: #e9e9e9;
   --color-button-bg: hsl(220, 13%, 91%);
+  --color-button-border: rgba(161, 161, 161, 0.35);
   --color-scrollbar: #96a2b0;
 
   --color-divider: #babfc5;
@@ -63,6 +64,21 @@
   --color-button-text-selected: var(--color-accent-contrast);
 
   --loading-bar-gradient: linear-gradient(to right, var(--color-brand) 0%, #00af5c 100%);
+
+  --color-platform-fabric: #8a7b71;
+  --color-platform-quilt: #8b61b4;
+  --color-platform-forge: #5b6197;
+  --color-platform-neoforge: #dc895c;
+  --color-platform-liteloader: #4c90de;
+  --color-platform-bukkit: #e78362;
+  --color-platform-bungeecord: #c69e39;
+  --color-platform-folia: #6aa54f;
+  --color-platform-paper: #e67e7e;
+  --color-platform-purpur: #7763a3;
+  --color-platform-spigot: #cd7a21;
+  --color-platform-velocity: #4b98b0;
+  --color-platform-waterfall: #5f83cb;
+  --color-platform-sponge: #c49528;
 }
 
 html {
@@ -104,6 +120,7 @@ html {
   --color-raised-bg: #26292f;
   --color-super-raised-bg: #40434a;
   --color-button-bg: hsl(222, 13%, 30%);
+  --color-button-border: rgba(193, 190, 209, 0.12);
   --color-scrollbar: var(--color-button-bg);
 
   --color-divider: var(--color-button-bg);
@@ -158,6 +175,21 @@ html {
   --color-button-text-selected: var(--color-brand);
 
   --loading-bar-gradient: linear-gradient(to right, var(--color-brand) 0%, #1ffa9a 100%);
+
+  --color-platform-fabric: #dbb69b;
+  --color-platform-quilt: #c796f9;
+  --color-platform-forge: #959eef;
+  --color-platform-neoforge: #f99e6b;
+  --color-platform-liteloader: #7ab0ee;
+  --color-platform-bukkit: #f6af7b;
+  --color-platform-bungeecord: #d2c080;
+  --color-platform-folia: #a5e388;
+  --color-platform-paper: #eeaaaa;
+  --color-platform-purpur: #c3abf7;
+  --color-platform-spigot: #f1cc84;
+  --color-platform-velocity: #83d5ef;
+  --color-platform-waterfall: #78a4fb;
+  --color-platform-sponge: #f9e580;
 }
 
 .oled-mode {
@@ -170,8 +202,8 @@ html {
 
   --brand-gradient-bg: linear-gradient(
     0deg,
-    rgba(22, 66, 51, 0.3) 0%,
-    rgba(55, 137, 73, 0.15) 100%
+    rgba(22, 66, 51, 0.15) 0%,
+    rgba(55, 137, 73, 0.1) 100%
   );
 }
 
@@ -211,23 +243,6 @@ html {
   --color-base: #2c2e31;
   --color-secondary: #484d54;
   --color-accent-contrast: #ffffff;
-
-  --color-platform-fabric: #8a7b71;
-  --color-platform-quilt: #8b61b4;
-  --color-platform-forge: #5b6197;
-  --color-platform-neoforge: #dc895c;
-  --color-platform-liteloader: #4c90de;
-  --color-platform-bukkit: #e78362;
-  --color-platform-bungeecord: #c69e39;
-  --color-platform-folia: #6aa54f;
-  --color-platform-paper: #e67e7e;
-  --color-platform-purpur: #7763a3;
-  --color-platform-spigot: #cd7a21;
-  --color-platform-velocity: #4b98b0;
-  --color-platform-waterfall: #5f83cb;
-  --color-platform-sponge: #c49528;
-
-  --color-button-border: rgba(161, 161, 161, 0.35);
 }
 
 .light-mode,
@@ -247,36 +262,19 @@ html {
 
 .dark-experiments {
   --color-button-bg: #33363d;
-
-  --color-platform-fabric: #dbb69b;
-  --color-platform-quilt: #c796f9;
-  --color-platform-forge: #959eef;
-  --color-platform-neoforge: #f99e6b;
-  --color-platform-liteloader: #7ab0ee;
-  --color-platform-bukkit: #f6af7b;
-  --color-platform-bungeecord: #d2c080;
-  --color-platform-folia: #a5e388;
-  --color-platform-paper: #eeaaaa;
-  --color-platform-purpur: #c3abf7;
-  --color-platform-spigot: #f1cc84;
-  --color-platform-velocity: #83d5ef;
-  --color-platform-waterfall: #78a4fb;
-  --color-platform-sponge: #f9e580;
-
-  --color-button-border: rgba(193, 190, 209, 0.12);
 }
 
-.dark-mode,
-.dark {
+.dark-mode:not(.oled-mode),
+.dark:not(.oled-mode) {
   .experimental-styles-within,
   &.experimental-styles-within {
     @extend .dark-experiments;
   }
 }
 
 .experimental-styles-within {
-  .dark-mode,
-  .dark {
+  .dark-mode:not(.oled-mode),
+  .dark:not(.oled-mode) {
     @extend .dark-experiments;
   }
 }