diff --git a/src/color.ini b/src/color.ini
deleted file mode 100644
index ce40d6d..0000000
--- a/src/color.ini
+++ /dev/null
@@ -1,162 +0,0 @@
-[base]
-text               = FFFFFF
-subtext            = F0F0F0
-sidebar-text       = FFFFFF
-main               = 000000
-sidebar            = 1ed760
-player             = 000000
-card               = 000000
-shadow             = 202020
-selected-row       = 797979
-button             = 1ed760
-button-active      = 1ed760
-button-disabled    = 535353
-tab-active         = 166632
-notification       = 1db954
-notification-error = e22134
-misc               = BFBFBF
-
-
-[white]
-text               = 363636
-subtext            = 3D3D3D
-sidebar-text       = FFF9F4
-main               = FFF9F4
-sidebar            = FFA789
-player             = FFF9F4
-card               = FFF9F4
-shadow             = d3d3d3
-selected-row       = 6D6D6D
-button             = ff8367
-button-active      = ff8367
-button-disabled    = 535353
-tab-active         = ffdace
-notification       = FFA789
-notification-error = e22134
-misc               = BFBFBF
-
-[dark]
-text               = F0F0F0
-subtext            = F0F0F0
-sidebar-text       = 0a0e14
-main               = 0a0e14
-sidebar            = C2D935
-player             = 0a0e14
-card               = 0a0e14
-shadow             = 202020
-selected-row       = DEDEDE
-button             = C2D935
-button-active      = C2D935
-button-disabled    = 535353
-tab-active         = 727d2b
-notification       = C2D935
-notification-error = e22134
-misc               = BFBFBF
-
-[dracula]
-text               = f8f8f2
-subtext            = f8f8f2
-sidebar-text       = F0F0F0
-main               = 44475a
-sidebar            = 6272a4
-player             = 44475a
-card               = 6272a4
-shadow             = 000000
-selected-row       = bd93f9
-button             = ffb86c
-button-active      = 8be9fd
-button-disabled    = 535353
-tab-active         = 6272a4
-notification       = bd93f9
-notification-error = e22134
-misc               = BFBFBF
-
-[nord-light]
-text               = 2e3440
-subtext            = 3b4252
-sidebar-text       = ECEFF4
-main               = ECEFF4
-sidebar            = 5E81AC
-player             = ECEFF4
-card               = ebcb8b
-shadow             = eceff4
-selected-row       = 4c566a
-button             = 81a1c1
-button-active      = 81a1c1
-button-disabled    = c0c0c0
-tab-active         = ebcb8b
-notification       = a3be8c
-notification-error = bf616a
-misc               = BFBFBF
-
-[nord-dark]
-text               = ECEFF4
-subtext            = E5E9F0
-sidebar-text       = 434c5e
-main               = 2e3440
-sidebar            = 88C0D0
-player             = 2e3440
-card               = 2e3440
-shadow             = 2E3440
-selected-row       = D8DEE9
-button             = 81A1C1
-button-active      = 81A1C1
-button-disabled    = 434C5E
-tab-active         = 434C5E
-notification       = A3BE8C
-notification-error = BF616A
-misc               = BFBFBF
-
-[purple]
-text               = f1eaff
-subtext            = f1eaff
-sidebar-text       = e0d0ff
-main               = 0A0E14
-sidebar            = 6F3C89
-player             = 0A0E14
-card               = 0A0E14
-shadow             = 3a2645
-selected-row       = EBDFFF
-button             = c76af6
-button-active      = 6F3C89
-button-disabled    = 535353
-tab-active         = 58306D
-notification       = ff9e00
-notification-error = f61379
-misc               = DEDEDE
-
-[samourai]
-text               = ebdbb2
-subtext            = ebdbb2
-sidebar-text       = 461217
-main               = 461217
-sidebar            = ebdbb2
-player             = 461217
-card               = 461217
-shadow             = 3a2645
-selected-row       = 909090
-button             = e7a52d
-button-active      = e7a52d
-button-disabled    = 535353
-tab-active         = e7a52d
-notification       = e7a52d
-notification-error = e22134
-misc               = BFBFBF
-
-[beach-sunset]
-text               = FFFFFF
-subtext            = F0F0F0
-sidebar-text       = F0F0F0
-main               = 262626
-sidebar            = bd3e3e
-player             = 262626
-card               = 262626
-shadow             = 000000
-selected-row       = d1d6e2
-button             = f1a84f
-button-active      = c98430
-button-disabled    = 535353
-tab-active         = f1a84f
-notification       = c98430
-notification-error = e22134
-misc               = BFBFBF
\ No newline at end of file
diff --git a/src/loaders/color-loader.js b/src/loaders/color-loader.js
new file mode 100644
index 0000000..6c975ea
--- /dev/null
+++ b/src/loaders/color-loader.js
@@ -0,0 +1,18 @@
+const TRIM_REGEX = /colors: \((?<colors>.*?)\);/s;
+const COLOR_REGEX = /(?<key>[\w-]*?):.*?#(?<color>.*?),?$/gm;
+
+module.exports = function (content, map, meta) {
+    const colors = content
+        .match(TRIM_REGEX)
+        .groups.colors.split("\n")
+        .map((l) => l.trim())
+        .join("\n");
+    const matches = [...colors.matchAll(COLOR_REGEX)];
+    const ini = ["[base]"];
+    for (let i = 0; i < matches.length; i++) {
+        const { key, color } = matches[i].groups;
+        ini.push(`${key} = ${color}`);
+    }
+
+    return ini.join("\n");
+};
diff --git a/src/styles/Colors.scss b/src/styles/Colors.scss
new file mode 100644
index 0000000..e1460de
--- /dev/null
+++ b/src/styles/Colors.scss
@@ -0,0 +1,33 @@
+$colors: (
+    text: #ffffff,
+    subtext: #f0f0f0,
+    sidebar-text: #ffffff,
+    main: #000000,
+    sidebar: #1ed760,
+    player: #000000,
+    card: #000000,
+    shadow: #202020,
+    selected-row: #797979,
+    button: #1ed760,
+    button-active: #1ed760,
+    button-disabled: #535353,
+    tab-active: #166632,
+    notification: #1db954,
+    notification-error: #e22134,
+    misc: #bfbfbf
+);
+
+:root {
+    @each $key, $color in $colors {
+        --spice-#{$key}: #{$color};
+        --spice-rgb-#{$key}: #{red($color)}, #{green($color)}, #{blue($color)};
+    }
+}
+
+@function spiceColor($key, $alpha: 1) {
+    @if $alpha == 1 {
+        @return var(--spice-#{$key});
+    } @else {
+        @return rgba(var(--spice-rgb-#{$key}), $alpha);
+    }
+}
diff --git a/src/styles/ConfigMenu.scss b/src/styles/ConfigMenu.scss
index c498a23..2a98b78 100644
--- a/src/styles/ConfigMenu.scss
+++ b/src/styles/ConfigMenu.scss
@@ -5,7 +5,7 @@
     inset: 0px;
     align-items: center;
     justify-content: center;
-    color: var(--spice-text);
+    color: spiceColor("text");
 
     &[active] {
         display: flex;
@@ -15,7 +15,7 @@
         z-index: 1;
         position: relative;
         width: clamp(500px, 50%, 650px);
-        background-color: rgba(var(--spice-rgb-main), 0.9);
+        background-color: spiceColor("main", 0.9);
         backdrop-filter: blur(3px);
         padding: 20px 15px;
         border-radius: var(--main-corner-radius);
@@ -69,7 +69,7 @@
                         position: absolute;
                         margin-left: 10px;
                         bottom: -2px;
-                        color: var(--spice-text);
+                        color: spiceColor("text");
                         padding: 0px;
                         height: 100%;
                         stroke-width: 2px;
@@ -116,7 +116,7 @@
                             .main-type-mesto {
                                 grid-area: description;
                                 height: min-content;
-                                color: var(--spice-subtext);
+                                color: spiceColor("subtext");
                             }
 
                             .x-settings-secondColumn {
diff --git a/src/styles/Inputs.scss b/src/styles/Inputs.scss
index 3f7b958..909e061 100644
--- a/src/styles/Inputs.scss
+++ b/src/styles/Inputs.scss
@@ -1,26 +1,26 @@
 button.main-button-primary {
-    background-color: rgba(var(--spice-rgb-selected-row), 0.4) !important;
+    background-color: spiceColor("selected-row", 0.4) !important;
 
     &:hover,
     &:active {
-        background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important;
+        background-color: spiceColor("selected-row", 0.6) !important;
     }
 
     span {
-        color: var(--spice-subtext) !important;
+        color: spiceColor("subtext") !important;
     }
 }
 
 input,
 textarea {
-    background-color: rgba(var(--spice-rgb-selected-row), 0.4) !important;
+    background-color: spiceColor("selected-row", 0.4) !important;
     border-radius: 4px !important;
     padding: 6px 10px 6px 48px;
-    color: var(--spice-text) !important;
+    color: spiceColor("text") !important;
 
     &:hover,
     &:active {
-        background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important;
+        background-color: spiceColor("selected-row", 0.6) !important;
     }
 
     &[type="range"] {
@@ -34,7 +34,7 @@ textarea {
             height: 16px;
             margin-top: -4px;
             border-radius: 50%;
-            background-color: var(--spice-text);
+            background-color: spiceColor("text");
 
             &:hover,
             &:active {
@@ -53,8 +53,8 @@ textarea {
             padding: 0 5px;
             border-radius: 4px;
             text-align: center;
-            color: var(--spice-sidebar-text);
-            background-color: var(--spice-button);
+            color: spiceColor("sidebar-text");
+            background-color: spiceColor("button");
             transition: opacity 0.25s ease;
             opacity: 0;
         }
@@ -71,7 +71,7 @@ textarea {
         &::-webkit-slider-runnable-track {
             width: 100%;
             height: 8px;
-            background-color: rgba(var(--spice-rgb-text), 0.2);
+            background-color: spiceColor("text", 0.2);
             border-radius: 50vw;
         }
     }
@@ -83,7 +83,7 @@ textarea {
         border: none;
         border-radius: 4px !important;
         padding: 0px 10px;
-        color: var(--spice-subtext) !important;
+        color: spiceColor("subtext") !important;
     }
 
     &[type="time"] {
@@ -103,12 +103,12 @@ textarea {
             position: absolute;
             inset: -5px;
             border-radius: 4px;
-            background-color: rgba(var(--spice-rgb-selected-row), 0.4);
+            background-color: spiceColor("selected-row", 0.4);
         }
 
         &:hover::before,
         &:active::before {
-            background-color: rgba(var(--spice-rgb-selected-row), 0.6);
+            background-color: spiceColor("selected-row", 0.6);
         }
     }
 }
diff --git a/src/styles/main.scss b/src/styles/main.scss
index dac6d49..843c515 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -3,6 +3,7 @@
     @return #{"invert("}$v#{")"};
 }
 
+@import "Colors";
 @import "Inputs";
 @import "ConfigMenu";
 @import "NoAds";
@@ -86,7 +87,7 @@ body {
 }
 
 .os-scrollbar-handle {
-    background-color: var(--spice-text) !important;
+    background-color: spiceColor("text") !important;
     border-radius: calc(var(--scrollbar-vertical-size) / 2);
 }
 
@@ -99,7 +100,7 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-    background-color: var(--spice-text) !important;
+    background-color: spiceColor("text") !important;
     border-radius: calc(var(--scrollbar-vertical-size) / 2);
 }
 
@@ -131,7 +132,7 @@ body {
 
 .x-searchInput-searchInputSearchIcon,
 .x-searchInput-searchInputClearButton {
-    color: var(--spice-text) !important;
+    color: spiceColor("text") !important;
 }
 
 .main-home-homeHeader,
@@ -162,7 +163,7 @@ body {
     background-color: unset !important;
 }
 .main-topBar-overlay {
-    background-color: var(--spice-main);
+    background-color: spiceColor("main");
 }
 
 .main-entityHeader-shadow,
@@ -177,19 +178,19 @@ body {
 }
 
 .main-trackList-trackListRow:hover {
-    background-color: rgba(var(--spice-rgb-selected-row), 0.2) !important;
+    background-color: spiceColor("selected-row", 0.2) !important;
 }
 
 .main-trackList-trackListRow:focus-within,
 [aria-selected="true"] > .main-trackList-trackListRow {
-    background-color: rgba(var(--spice-rgb-selected-row), 0.4) !important;
+    background-color: spiceColor("selected-row", 0.4) !important;
 }
 
 span.artist-artistVerifiedBadge-badge svg > path:first-of-type {
-    fill: var(--spice-button);
+    fill: spiceColor("button");
 }
 span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
-    fill: var(--spice-text);
+    fill: spiceColor("text");
 }
 
 /* Full window artist background */
@@ -212,7 +213,7 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
 }
 
 .main-entityHeader-background.main-entityHeader-overlay:after {
-    background-image: linear-gradient(transparent, transparent), linear-gradient(var(--spice-main), var(--spice-main));
+    background-image: linear-gradient(transparent, transparent), linear-gradient(spiceColor("main"), spiceColor("main"));
 }
 
 .artist-artistOverview-overview .main-entityHeader-withBackgroundImage h1 {
@@ -221,37 +222,37 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
 }
 
 .main-contextMenu-menu {
-    background-color: var(--spice-button);
+    background-color: spiceColor("button");
 }
 
 .main-contextMenu-menuHeading,
 .main-contextMenu-menuItemButton,
 .main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
 .main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
-    color: var(--spice-main);
+    color: spiceColor("main");
 }
 
 .main-playPauseButton-button {
-    background-color: var(--spice-button);
+    background-color: spiceColor("button");
     color: white;
 }
 
 /** Queue page header */
 .queue-queue-title,
 .queue-playHistory-title {
-    color: var(--spice-text) !important;
+    color: spiceColor("text") !important;
 }
 
 /** Artist page */
 .artist-artistOverview-heading {
-    color: var(--spice-text) !important;
+    color: spiceColor("text") !important;
 }
 .artist-artistAbout-content .artist-artistAbout-cityBlock div,
 .artist-artistAbout-content .artist-artistAbout-stats div {
-    color: var(--spice-text) !important;
+    color: spiceColor("text") !important;
 }
 .artist-artistAbout-content div {
-    color: var(--spice-text) !important;
+    color: spiceColor("text") !important;
 }
 
 /** Cards */
@@ -287,7 +288,7 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
 }
 
 .Root__main-view {
-    background-color: var(--spice-main);
+    background-color: spiceColor("main");
     border-radius: var(--main-corner-radius) var(--main-corner-radius) 0 0;
     overflow: hidden;
 }
@@ -300,14 +301,14 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
 
 .main-buddyFeed-headerTitle,
 .main-buddyFeed-activityMetadata .main-buddyFeed-username a {
-    color: var(--spice-sidebar-text);
+    color: spiceColor("sidebar-text");
 }
 
 .main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a,
 .main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName span,
 .main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink,
 .main-buddyFeed-activityMetadata .main-buddyFeed-timestamp {
-    color: rgba(var(--spice-rgb-sidebar-text), 0.8);
+    color: spiceColor("sidebar-text", 0.8);
 }
 
 .main-buddyFeed-buddyFeedRoot .main-avatar-avatar,
@@ -324,11 +325,11 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
 
 .view-homeShortcutsGrid-shortcut {
     overflow: hidden;
-    background-color: rgba(var(--spice-rgb-selected-row), 0.4);
+    background-color: spiceColor("selected-row", 0.4);
 }
 
 .view-homeShortcutsGrid-shortcut:hover {
-    background-color: rgba(var(--spice-rgb-selected-row), 0.6);
+    background-color: spiceColor("selected-row", 0.6);
 }
 
 .cover-art,
@@ -355,8 +356,8 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
 }
 
 .main-avatar-avatar.main-avatar-withBadge:after {
-    box-shadow: 0 0 0 2px var(--spice-sidebar);
-    background-color: var(--spice-notification);
+    box-shadow: 0 0 0 2px spiceColor("sidebar");
+    background-color: spiceColor("notification");
     right: 0;
 }
 
@@ -367,25 +368,25 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
 
 .main-nowPlayingBar-container {
     border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
-    background-color: var(--spice-main);
+    background-color: spiceColor("main");
     border-top: 0;
     min-width: 518px;
 
     &.with-shadow {
-        background: radial-gradient(ellipse at right 50% bottom -80px, rgba(var(--spice-rgb-sidebar), 0.55), var(--spice-main) 60%);
+        background: radial-gradient(ellipse at right 50% bottom -80px, spiceColor("sidebar", 0.55), spiceColor("main") 60%);
     }
 }
 
 .main-buddyFeed-findFriendsButton {
-    color: var(--spice-sidebar-text);
+    color: spiceColor("sidebar-text");
 }
 
 .main-connectBar-connectBar {
     border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
-    border: 2px solid var(--spice-main);
+    border: 2px solid spiceColor("main");
     border-top: 0;
-    background-color: var(--spice-button) !important;
-    color: var(--spice-text) !important;
+    background-color: spiceColor("button") !important;
+    color: spiceColor("text") !important;
 }
 
 .Root__nav-bar {
@@ -405,7 +406,7 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
 html,
 .Root__nav-bar,
 .main-buddyFeed-buddyFeed {
-    background-color: var(--spice-sidebar) !important;
+    background-color: spiceColor("sidebar") !important;
 }
 
 html {
@@ -419,7 +420,7 @@ html {
 .main-rootlist-rootlistContent span,
 .main-navBar-entryPoints span {
     z-index: 1;
-    color: var(--spice-sidebar-text);
+    color: spiceColor("sidebar-text");
 }
 
 .main-navBar-navBarItem svg {
@@ -455,8 +456,8 @@ html {
         width: 32px;
         height: 32px;
         margin: 0px;
-        color: var(--spice-sidebar);
-        background-color: rgba(var(--spice-rgb-main), 0.7);
+        color: spiceColor("sidebar");
+        background-color: spiceColor("main", 0.7);
         border-radius: var(--sidebar-icons-border-radius);
     }
 }
@@ -467,10 +468,10 @@ html {
     right: 12px;
     width: 16px;
     height: 16px;
-    color: var(--spice-sidebar-text) !important;
-    background-color: var(--spice-button);
+    color: spiceColor("sidebar-text") !important;
+    background-color: spiceColor("button");
     border-radius: 50%;
-    box-shadow: 0 0 0 2px var(--spice-sidebar);
+    box-shadow: 0 0 0 2px spiceColor("sidebar");
     opacity: 0;
 }
 
@@ -524,13 +525,13 @@ html.sidebar-hide-text .GlueDropTarget span {
 .main-rootlist-rootlist::before {
     top: 0px;
     height: 5%;
-    background: linear-gradient(to bottom, var(--spice-sidebar) 10%, transparent);
+    background: linear-gradient(to bottom, spiceColor("sidebar") 10%, transparent);
 }
 
 .main-rootlist-rootlist::after {
     bottom: 0px;
     height: 15%;
-    background: linear-gradient(to top, var(--spice-sidebar) 10%, transparent);
+    background: linear-gradient(to top, spiceColor("sidebar") 10%, transparent);
 }
 
 .Root__nav-bar .os-scrollbar-vertical,
@@ -544,11 +545,11 @@ html.sidebar-hide-text .GlueDropTarget span {
 }
 
 input:checked ~ .x-toggle-indicatorWrapper {
-    background-color: rgba(var(--spice-rgb-button), 0.4);
+    background-color: spiceColor("button", 0.4);
 }
 
 input:hover:checked ~ .x-toggle-indicatorWrapper {
-    background-color: rgba(var(--spice-rgb-button), 0.5) !important;
+    background-color: spiceColor("button", 0.5) !important;
 }
 
 input:hover:not([disabled]):not(:active) ~ .x-toggle-indicatorWrapper {
@@ -564,8 +565,8 @@ input:hover:not([disabled]):not(:active) ~ .x-toggle-indicatorWrapper {
 }
 
 .main-topBar-historyButtons svg {
-    color: var(--spice-button);
-    fill: var(--spice-button);
+    color: spiceColor("button");
+    fill: spiceColor("button");
 }
 
 .playback-bar__progress-time,
@@ -597,8 +598,8 @@ input:hover:not([disabled]):not(:active) ~ .x-toggle-indicatorWrapper {
 
 .progress-bar {
     --progress-bar-height: 2px;
-    --fg-color: var(--spice-button);
-    --bg-color: rgba(var(--spice-rgb-text), 0.2);
+    --fg-color: #{spiceColor("button")};
+    --bg-color: #{spiceColor("text", 0.2)};
 }
 
 .progress-bar__slider {
@@ -629,8 +630,8 @@ input:hover:not([disabled]):not(:active) ~ .x-toggle-indicatorWrapper {
     padding: 0 5px;
     border-radius: 4px;
     text-align: center;
-    color: var(--spice-text);
-    background-color: var(--spice-button);
+    color: spiceColor("text");
+    background-color: spiceColor("button");
     pointer-events: none;
 }
 
@@ -681,12 +682,12 @@ input:hover:not([disabled]):not(:active) ~ .x-toggle-indicatorWrapper {
 }
 
 .main-trackInfo-release a {
-    color: var(--spice-subtext);
+    color: spiceColor("subtext");
 
     &:hover,
     &:active,
     &:focus {
-        color: var(--spice-text);
+        color: spiceColor("text");
     }
 }
 
@@ -700,7 +701,7 @@ input:hover:not([disabled]):not(:active) ~ .x-toggle-indicatorWrapper {
 
 .main-entityHeader-metaDataText,
 .main-duration-container {
-    color: var(--spice-subtext);
+    color: spiceColor("subtext");
 }
 
 /** Sidebar */
@@ -745,7 +746,7 @@ html.sidebar-hide-text .main-rootlist-rootlistItem {
 }
 
 .main-rootlist-dropIndicator {
-    background: var(--spice-selected-row);
+    background: spiceColor("selected-row");
     height: 2px;
 }
 
@@ -843,7 +844,7 @@ li.GlueDropTarget {
 }
 
 #dribbblish-update {
-    color: var(--spice-button-active);
+    color: spiceColor("button-active");
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -877,7 +878,7 @@ li.GlueDropTarget {
 
     & span {
         display: block !important;
-        color: var(--spice-subtext);
+        color: spiceColor("subtext");
     }
 }
 
@@ -886,10 +887,10 @@ li.GlueDropTarget {
 
     // Workaround for #73 (https://github.com/JulienMaille/dribbblish-dynamic-theme/issues/73)
     & button {
-        color: var(--spice-subtext);
+        color: spiceColor("subtext");
 
         &:hover {
-            color: var(--spice-text);
+            color: spiceColor("text");
         }
     }
 }
@@ -906,7 +907,7 @@ li.GlueDropTarget {
 .main-playPauseButton-button svg {
     width: 32px !important;
     height: 32px !important;
-    color: var(--spice-button);
+    color: spiceColor("button");
 }
 
 /* Spotify style player bar */
@@ -972,12 +973,12 @@ li.GlueDropTarget {
 .main-likedSongsButton-likedSongsIcon svg,
 .main-yourEpisodesButton-yourEpisodesIcon svg,
 .main-createPlaylistButton-createPlaylistIcon svg {
-    fill: var(--spice-sidebar-text);
+    fill: spiceColor("sidebar-text");
     width: 32px;
     height: 32px;
 }
 .main-yourEpisodesButton-yourEpisodesIcon svg path {
-    fill: var(--spice-sidebar-text);
+    fill: spiceColor("sidebar-text");
 }
 
 /** Grid */
@@ -1000,7 +1001,7 @@ span.main-userWidget-displayName,
 
 /** Sidebar config */
 #dribs-hidden-list {
-    background-color: rgba(var(--spice-rgb-main), 0.3);
+    background-color: spiceColor("main", 0.3);
 }
 
 #dribs-sidebar-config {
@@ -1017,12 +1018,12 @@ span.main-userWidget-displayName,
 #dribs-sidebar-config button {
     min-width: 60px;
     border-radius: 3px;
-    background-color: var(--spice-main);
-    color: var(--spice-text);
-    border: 1px solid var(--spice-text);
+    background-color: spiceColor("main");
+    color: spiceColor("text");
+    border: 1px solid spiceColor("text");
 }
 #dribs-sidebar-config button:disabled {
-    color: var(--spice-button-disabled);
+    color: spiceColor("button-disabled");
 }
 
 .main-navBar-entryPoints {
@@ -1107,7 +1108,7 @@ span.main-userWidget-displayName,
 
 .main-navBar-navBar a:hover,
 .main-navBar-navBar a:hover span {
-    color: var(--spice-sidebar-text) !important;
+    color: spiceColor("sidebar-text") !important;
 }
 
 div.GlueDropTarget.personal-library {
@@ -1171,7 +1172,7 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
 
 /** Mini dribbblish */
 .x-categoryCard-CategoryCard > div {
-    background-color: var(--spice-main);
+    background-color: spiceColor("main");
     width: calc(100% - 14px);
     height: calc(100% - 6px);
     margin: 3px 10px;
@@ -1188,7 +1189,7 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
 }
 
 .x-heroCategoryCard-HeroCategoryCard > div {
-    background-color: var(--spice-main);
+    background-color: spiceColor("main");
     width: calc(100% - 20px);
     height: calc(100% - 6px);
     margin: 3px 16px;
@@ -1197,22 +1198,22 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
 
 .main-dropDown-dropDown,
 .x-sortBox-sortDropdown {
-    background-color: rgba(var(--spice-rgb-selected-row), 0.4) !important;
-    color: var(--spice-subtext);
+    background-color: spiceColor("selected-row", 0.4) !important;
+    color: spiceColor("subtext");
 }
 
 .main-dropDown-dropDown:hover,
 .x-sortBox-sortDropdown:hover {
-    background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important;
+    background-color: spiceColor("selected-row", 0.6) !important;
 }
 
 .connect-device-list-item:focus,
 .connect-device-list-item:hover {
-    background-color: rgba(var(--spice-rgb-selected-row), 0.3);
+    background-color: spiceColor("selected-row", 0.3);
 }
 
 .bookmark-filter {
-    color: var(--spice-main) !important;
+    color: spiceColor(main) !important;
 }
 
 /* 1.1.56 */
@@ -1233,13 +1234,13 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
 }
 
 .main-userWidget-dropDownMenu > li > button {
-    color: rgba(var(--spice-rgb-selected-row), 0.7);
+    color: spiceColor("selected-row", 0.7);
     padding-left: 8px;
     text-decoration: none;
 }
 .main-userWidget-dropDownMenu > li > button:hover,
 .main-userWidget-dropDownMenu > li > button:focus {
-    color: var(--spice-text);
+    color: spiceColor("text");
 }
 
 .main-userWidget-dropDownMenu svg {
@@ -1253,30 +1254,30 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
 }
 
 .main-actionBar-ActionBarRow button:not(.main-playButton-primary) {
-    color: var(--spice-subtext);
+    color: spiceColor("subtext");
 }
 
 /* explicit icon */
 .main-tag-container {
-    background-color: var(--spice-text);
+    background-color: spiceColor("text");
 }
 /* progressbar tooltip text color */
 .playback-bar .prog-tooltip {
-    color: var(--spice-sidebar-text) !important;
+    color: spiceColor("sidebar-text") !important;
 }
 
 /* edit button of CustomApps */
 .reddit-sort-container button.switch,
 .new-releases-header button.switch,
 .lyrics-tabBar-header button.switch {
-    background-color: rgba(var(--spice-rgb-subtext), 0.15) !important;
-    color: var(--spice-text);
+    background-color: spiceColor("subtext", 0.15) !important;
+    color: spiceColor("text");
 }
 
 .reddit-sort-container button.switch:hover,
 .new-releases-header button.switch:hover,
 .lyrics-tabBar-header button.switch:hover {
-    background-color: rgba(var(--spice-rgb-subtext), 0.3) !important;
+    background-color: spiceColor("subtext", 0.3) !important;
 }
 
 .lyrics-lyricsContainer-LyricsBackground {
@@ -1301,7 +1302,7 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
 .main-contextMenu-menuItemButton,
 .main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
 .main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
-    color: var(--spice-sidebar-text) !important;
+    color: spiceColor("sidebar-text") !important;
 }
 
 /* translucent background cover */
diff --git a/webpack.config.js b/webpack.config.js
index 0c630d2..79ca00d 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -6,7 +6,7 @@ const path = require("path");
 
 /** @type {import('webpack').Configuration} */
 module.exports = {
-    entry: [path.resolve(__dirname, "./src/js/main.js"), path.resolve(__dirname, "./src/styles/main.scss")],
+    entry: [path.resolve(__dirname, "./src/js/main.js"), path.resolve(__dirname, "./src/styles/main.scss"), path.resolve(__dirname, "./src/styles/Colors.scss")],
     output: {
         path: path.resolve(__dirname, "dist"),
         filename: "dribbblish-dynamic.js"
@@ -14,12 +14,12 @@ module.exports = {
     module: {
         rules: [
             {
-                test: /\.js$/,
+                test: /main\.js$/,
                 exclude: /node_modules/,
                 use: []
             },
             {
-                test: /\.scss$/,
+                test: /main\.scss$/,
                 exclude: /node_modules/,
                 type: "asset/resource",
                 generator: {
@@ -33,6 +33,15 @@ module.exports = {
                         }
                     }
                 ]
+            },
+            {
+                test: /Colors\.scss$/,
+                exclude: /node_modules/,
+                type: "asset/resource",
+                generator: {
+                    filename: "color.ini"
+                },
+                use: [path.resolve(__dirname, "./src/loaders/color-loader.js")]
             }
         ]
     },
@@ -46,7 +55,7 @@ module.exports = {
             "process.env.DRIBBBLISH_VERSION": JSON.stringify(process.env.DRIBBBLISH_VERSION || "Dev")
         }),
         new CopyPlugin({
-            patterns: [{ from: "src/assets", to: "assets" }, { from: "src/color.ini" }]
+            patterns: [{ from: "src/assets", to: "assets" }]
         })
     ],
     optimization: {