SCSSify everything for light mode support

Saltssaumure · May 8, 2023 · d00f8d2 · d00f8d2
1 parent 7ed6ca3
commit d00f8d2
Show file tree

Hide file tree

Showing 47 changed files with 561 additions and 459 deletions.
diff --git a/piOS.theme.css b/piOS.theme.css
@@ -4,7 +4,7 @@
  * @authorLink https://github.com/Saltssaumure
  * @description A SUPERHOT piOS inspired theme.
  * @license GPL-3.0
- * @version 9.2
+ * @version 9.3
  * @invite uy8nKQVatp
  * @source https://github.com/Saltssaumure/pios-discord-theme
  * @donate https://ko-fi.com/saltssaumure
@@ -14,6 +14,7 @@
 
 /* See https://github.com/Saltssaumure/pios-discord-theme#customisation for customisation settings. */
 :root {
+    --pios-glow-hue:        180;
     --pios-glow-intensity:  1;
     --pios-spacing:         1;
     --pios-accent-hue:      0;
@@ -22,4 +23,18 @@
     --crt-stripe:   block;
     --crt-scanline: none;   /* ⛐ This effect is performance-intensive. */
     --crt-flicker:  none;   /* ⚠ This is a fast flickering effect and may not be suitable for those with photosensitive epilepsy. */
+}
+
+.theme-dark {
+    --pios-background-color:    #000000;
+    --pios-bright-color:        #FFFFFF;
+    --pios-middle-color:        #D3D3D3;
+    --pios-dim-color:           #808080;
+}
+
+.theme-light {
+    --pios-background-color:    #FFFFFF;
+    --pios-bright-color:        #000000;
+    --pios-middle-color:        #696969;
+    --pios-dim-color:           #A9A9A9;
 }
diff --git a/scss/_part.scss b/scss/_part.scss
@@ -6,34 +6,37 @@
 @use "part/spoiler";
 @use "part/text";
 
+@use "top/var-scss" as *;
+@use "top/hsla";
+
 // Notification counter
 .numberBadge-37OJ3S {
     padding: 2px 0 0 2px;
     width: 18px !important;
 }
 
 // discord friends tab: for some reason not currently using a variable
-.theme-dark .container-2cd8Mz {
-    background-color: var(--background-primary);
+.appmount-2ybxzl .container-2cd8Mz {
+    background-color: $background-color;
 }
 
 // Checkboxes
-.theme-dark .checkbox-f1HnKB.checked-1pZh2h {
-    border-color: var(--piOSwhite) !important;
-    color: var(--piOSwhite);
+.appmount-2ybxzl .checkbox-f1HnKB.checked-1pZh2h {
+    border-color: $bright-color !important;
+    color: $bright-color;
     background: transparent !important;
 }
 
-.theme-dark .checkbox-f1HnKB.checked-1pZh2h path {
+.appmount-2ybxzl .checkbox-f1HnKB.checked-1pZh2h path {
     fill: currentColor;
 }
 
-.theme-dark .checkbox-1LuCGM.checked-22NTbO {
-    background: var(--piOSaccent) !important;
-    border-color: var(--piOSaccent) !important;
+.appmount-2ybxzl .checkbox-1LuCGM.checked-22NTbO {
+    background: $accent-color !important;
+    border-color: $accent-color !important;
 }
 
 // Star for verified
 .flowerStar-2tNFCR path {
-    fill: var(--background-modifier-active);
+    fill: hsla.default($accent-hue, 0.7);
 }
diff --git a/scss/main/_chat.scss b/scss/main/_chat.scss
@@ -1,14 +1,17 @@
+@use "../top/var-scss" as *;
+@use "../top/border" as bd;
+@use "../top/hsla";
+
 // Main chat section
 .chatContent-3KubbW {
-    border: solid var(--borderColor);
-    border-width: var(--thickBorder);
+    @include bd.border(thick);
 }
 
 // "Jump to present", "New messages since", "Messages failed to load" bars
 .jumpToPresentBar-1cEnH0,
 .newMessagesBar-1hF-9G,
 .messagesErrorBar-1IQ1rH {
-    background-color: var(--piOSaccent);
+    background-color: $accent-color;
     opacity: 0.9;
 }
 
@@ -20,8 +23,7 @@
 
 // Message react/reply etc buttons
 .wrapper-2vIMkT {
-    border: solid var(--borderColor);
-    border-width: var(--thinBorder);
+    @include bd.border(thin);
 }
 
 // Pin icon for pin alerts
@@ -42,9 +44,8 @@
 
 // piOS style message boxes in compact mode
 .compact-2Nkcau.wrapper-30-Nkg {
-    border: solid var(--borderColor);
-    border-width: var(--thinBorder);
-    margin: calc(var(--true-compact-message-spacing) * 1.5rem) 3rem;
+    @include bd.border(thin);
+    margin: calc(var(--pios-spacing) * 1.5rem) 3rem;
     padding: 1rem 1rem 0.5rem 1rem;
     padding-right: 1rem !important;
 }
@@ -60,12 +61,10 @@
     top: -1.6rem;
     display: flex;
     flex-direction: row-reverse;
-    background: linear-gradient(transparent,
-            var(--background-primary) 40%,
-            transparent 60%);
+    background: linear-gradient(transparent, $background-color 40%, transparent 60%);
 }
 
-.compact-2Nkcau .header-2jRmjb>span {
+.compact-2Nkcau .header-2jRmjb > span {
     display: block;
 }
 
@@ -96,7 +95,7 @@
 // Reply
 // Post username and timestamp
 .compact-2Nkcau.hasReply-2Cr4KE .header-2jRmjb,
-.compact-2Nkcau .repliedMessage-3Z6XBG+.contents-2MsGLg .header-2jRmjb {
+.compact-2Nkcau .repliedMessage-3Z6XBG + .contents-2MsGLg .header-2jRmjb {
     top: -2.7rem;
 }
 
@@ -151,16 +150,15 @@
 // Embeds
 .embedFull-1HGV2S.markup-eYLPri,
 // most embeds
-.theme-dark .wrapperAudio-1Bzv_Z,
+.appmount-2ybxzl .wrapperAudio-1Bzv_Z,
 // audio
 .attachment-1PZZB2,
 // file
 .wrapper-1HIH0j,
 // invite
 .footer-GXWBBp // code/text
-
-    {
-    background: var(--backgroundEmbed);
+{
+    background: $embed-color;
     border: 0;
     text-shadow: none;
 }
@@ -188,26 +186,25 @@
 .mediaBarProgress-38I317,
 .mediaBarProgress-38I317:after,
 .mediaBarProgress-38I317:before {
-    background: var(--background-accent);
+    background: $accent-color;
 }
 
 // timeline slider knob
 .mediaBarGrabber-FvJKJg,
 .mediaBarInteraction-tUE5dq:hover .mediaBarGrabber-FvJKJg,
 .mediaBarInteractionDragging-3XLL8k .mediaBarGrabber-FvJKJg {
-    background: var(--piOSwhite);
+    background: $bright-color;
 }
 
 // Reacts you have added
 .reaction-3vwAF2,
 .reaction-3vwAF2:hover {
-    border: solid var(--borderColor);
-    border-width: var(--thinBorder);
+    @include bd.border(thin);
 }
 
 .reaction-3vwAF2.reactionMe-1PwQAc {
-    border-color: var(--piOSaccent);
-    background-color: var(--background-modifier-selected);
+    border-color: $accent-color;
+    background-color: hsla.default($accent-hue, 0.3);
 }
 
 // Thread from message
@@ -228,7 +225,7 @@
 
 // Thread info
 .container-3i3IzO {
-    background-color: var(--background-modifier-hover);
+    background-color: hsla.default($accent-hue, 0.2);
 }
 
 .compact-2Nkcau .container-3i3IzO {
@@ -238,8 +235,7 @@
 
 // Typing box
 .channelTextArea-1VQBuV {
-    border: solid var(--borderColor);
-    border-width: var(--thickBorder);
+    @include bd.border(thick);
 }
 
 .scrollableContainer-15eg7h {
@@ -249,39 +245,39 @@
 // "Replying to" bar
 .attachedBars-2BCP3l {
     background: transparent;
-    border-bottom: 2px dashed var(--border);
+    border-bottom: 2px dashed $border-color-normal;
 }
 
 // @on button
 .colorLink-2apWfY.mentionButton-3C5YMI {
-    color: var(--piOSaccent);
+    color: $accent-color;
 }
 
 // Uploading files bar
 .upload-vLbqu- {
-    background-color: var(--backgroundEmbed);
+    background-color: $embed-color;
 }
 
 // Command suggestions bar
-.theme-dark .selected-3H3-RC,
-.theme-dark .option-Tt7anD {
-    background-color: var(--background-modifier-selected);
+.appmount-2ybxzl .selected-3H3-RC,
+.appmount-2ybxzl .option-Tt7anD {
+    background-color: hsla.default($accent-hue, 0.3);
 }
 
 // follow to get this channel's updates in your server add dotted topline
 .form-3gdLxP .wrapper-2SplAX {
-    border-top: 2px dashed var(--borderColor);
+    border-top: 2px dashed $border-color-normal;
     margin-top: 0;
 }
 
 // Forums
-.theme-dark .container-3wLKDe {
-    background: var(--piOSblack);
+.appmount-2ybxzl .container-3wLKDe {
+    background: $background-color;
 }
 
 // Post title
 .card-2JNtco .headerText-3MQ6n4 {
-    --text-muted: var(--piOSwhite);
+    --text-muted: #{$bright-color};
 }
 
 // Post message preview
@@ -290,8 +286,8 @@
 }
 
 // Browse channels
-.theme-dark .container-2IKOsH,
-.theme-dark .header-3xB4vB,
-.theme-dark .container-1um7CU {
-    background: var(--piOSblack);
-}
+.appmount-2ybxzl .container-2IKOsH,
+.appmount-2ybxzl .header-3xB4vB,
+.appmount-2ybxzl .container-1um7CU {
+    background: $background-color;
+}
diff --git a/scss/main/_customise.scss b/scss/main/_customise.scss
@@ -1,11 +1,13 @@
+@use "../top/var-scss" as *;
+
 // Customise channels and roles / browse channels
 
-.theme-dark .emptyPage-2TGR7j,
-.theme-dark .scrollerContainer-y16Rs9 {
-    background: var(--piOSblack);
+.appmount-2ybxzl .emptyPage-2TGR7j,
+.appmount-2ybxzl .scrollerContainer-y16Rs9 {
+    background: $background-color;
 }
 
 .checkIcon-3eAeN_,
 .memberCount-2G9rxE {
-    background: var(--piOSaccent);
+    background: $accent-color;
 }
diff --git a/scss/main/_discover.scss b/scss/main/_discover.scss
@@ -1,15 +1,18 @@
+@use "../top/var-scss" as *;
+@use "../top/border" as bd;
+@use "../top/hsla";
+
 // ---- Explore public servers ----
 
 // Background
-.theme-dark .pageWrapper-2PwDoS {
-    background-color: var(--piOSblack);
-    border: solid var(--borderColor);
-    border-width: var(--thickBorder);
+.appmount-2ybxzl .pageWrapper-2PwDoS {
+    background-color: $background-color;
+    @include bd.border(thick);
 }
 
 // Search results searchbox
-.theme-dark .searchBox-pyIJJj {
-    background-color: var(--background-modifier-hover);
+.appmount-2ybxzl .searchBox-pyIJJj {
+    background-color: hsla.default($accent-hue, 0.2);
     backdrop-filter: brightness(0);
 }
 
@@ -20,7 +23,7 @@
 
 // Selected category
 .categoryItem-Kc_HK_.selectedCategoryItem-ZjqSui .itemInner-3e_4G4 {
-    background-color: var(--background-modifier-selected);
+    background-color: hsla.default($accent-hue, 0.3);
 }
 
 // Search category searchbox
@@ -30,36 +33,34 @@
 }
 
 .search-25t1e9 .searchBox-31Zv9h .searchBoxInput-3h4etz {
-    color: var(--text-normal);
+    color: $bright-color;
 }
 
 // Clear searchbox icon
 .clearIcon-TMIIUa,
 .search-25t1e9 .searchBox-31Zv9h .closeIcon-BMGxx0 {
-    color: var(--piOSgrey);
+    color: $dim-color;
 }
 
 .clearIcon-TMIIUa:hover,
 .search-25t1e9 .searchBox-31Zv9h .closeIcon-BMGxx0:hover {
-    color: var(--piOSlightgrey);
+    color: $middle-color;
 }
 
 // Language dropdown
 .lookFilled-1GseHa.select-1Ia3hD {
     border-color: transparent;
-    color: var(--piOSgrey);
+    color: $dim-color;
 }
 
 .popout-1KHNAq {
-    border: solid var(--borderColor);
-    border-width: var(--thinBorder);
+    @include bd.border(thin);
 }
 
 // Server card
 .card-2TuZPZ,
 .card-1rhKXq {
-    border: solid var(--borderColor);
-    border-width: var(--thinBorder);
+    @include bd.border(thin);
 }
 
 // Separators in search results
@@ -69,5 +70,5 @@
 
 // Student hub icon
 .iconContainer-6xlTpK {
-    background-color: var(--background-modifier-active);
+    background-color: hsla.default($accent-hue, 0.7);
 }