diff --git a/src/app.scss b/src/app.scss
index 41233d2..43e1c55 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -1,4 +1,4 @@
-@import "colors.scss";
+@use "colors.scss" as *;
 
 @font-face {
     font-family: "Inter";
diff --git a/src/routes/browser/Browser.svelte b/src/routes/browser/Browser.svelte
index 1dac659..7835474 100644
--- a/src/routes/browser/Browser.svelte
+++ b/src/routes/browser/Browser.svelte
@@ -56,7 +56,7 @@
 
 <style lang="scss">
 
-    @import "../../colors.scss";
+    @use "../../colors.scss" as *;
 
     .browser-controls {
         display: flex;
diff --git a/src/routes/clickgui/ClickGui.svelte b/src/routes/clickgui/ClickGui.svelte
index 40490a2..aab6dec 100644
--- a/src/routes/clickgui/ClickGui.svelte
+++ b/src/routes/clickgui/ClickGui.svelte
@@ -65,7 +65,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../colors.scss";
+  @use "../../colors.scss" as *;
 
   $GRID_SIZE: 10px;
 
diff --git a/src/routes/clickgui/Description.svelte b/src/routes/clickgui/Description.svelte
index 7d5ce1f..9eb430a 100644
--- a/src/routes/clickgui/Description.svelte
+++ b/src/routes/clickgui/Description.svelte
@@ -21,7 +21,7 @@
 {/key}
 
 <style lang="scss">
-  @import "../../colors.scss";
+  @use "../../colors.scss" as *;
 
   .description-wrapper {
     position: fixed;
diff --git a/src/routes/clickgui/Module.svelte b/src/routes/clickgui/Module.svelte
index f1084a4..8681869 100644
--- a/src/routes/clickgui/Module.svelte
+++ b/src/routes/clickgui/Module.svelte
@@ -128,7 +128,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../colors.scss";
+  @use "../../colors.scss" as *;
 
   .module {
     position: relative;
diff --git a/src/routes/clickgui/Panel.svelte b/src/routes/clickgui/Panel.svelte
index dfe4e05..21c71ab 100644
--- a/src/routes/clickgui/Panel.svelte
+++ b/src/routes/clickgui/Panel.svelte
@@ -220,7 +220,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../colors.scss";
+  @use "../../colors.scss" as *;
 
   .panel {
     border-radius: 16px;
diff --git a/src/routes/clickgui/Search.svelte b/src/routes/clickgui/Search.svelte
index 4cf7da5..23818ad 100644
--- a/src/routes/clickgui/Search.svelte
+++ b/src/routes/clickgui/Search.svelte
@@ -170,7 +170,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../colors.scss";
+  @use "../../colors.scss" as *;
 
   .search {
     position: fixed;
diff --git a/src/routes/clickgui/setting/BindSetting.svelte b/src/routes/clickgui/setting/BindSetting.svelte
index e08710b..970684a 100644
--- a/src/routes/clickgui/setting/BindSetting.svelte
+++ b/src/routes/clickgui/setting/BindSetting.svelte
@@ -89,7 +89,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../colors.scss";
+  @use "../../../colors.scss" as *;
 
   .setting {
     padding: 7px 0px;
diff --git a/src/routes/clickgui/setting/ChoiceSetting.svelte b/src/routes/clickgui/setting/ChoiceSetting.svelte
index 60713d6..71fd675 100644
--- a/src/routes/clickgui/setting/ChoiceSetting.svelte
+++ b/src/routes/clickgui/setting/ChoiceSetting.svelte
@@ -70,7 +70,7 @@
 </div>
 
 <style lang="scss">
-    @import "../../../colors.scss";
+    @use "../../../colors.scss" as *;
 
     .setting {
         padding: 7px 0px;
diff --git a/src/routes/clickgui/setting/ColorSetting.svelte b/src/routes/clickgui/setting/ColorSetting.svelte
index da6bb27..eb27da0 100644
--- a/src/routes/clickgui/setting/ColorSetting.svelte
+++ b/src/routes/clickgui/setting/ColorSetting.svelte
@@ -82,7 +82,7 @@
 </div>
 
 <style lang="scss">
-    @import "../../../colors.scss";
+    @use "../../../colors.scss" as *;
 
     .setting {
         display: grid;
diff --git a/src/routes/clickgui/setting/ConfigurableSetting.svelte b/src/routes/clickgui/setting/ConfigurableSetting.svelte
index 93f2998..8341474 100644
--- a/src/routes/clickgui/setting/ConfigurableSetting.svelte
+++ b/src/routes/clickgui/setting/ConfigurableSetting.svelte
@@ -50,7 +50,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../colors.scss";
+  @use "../../../colors.scss" as *;
 
   .setting {
     padding: 7px 0;
diff --git a/src/routes/clickgui/setting/FloatRangeSetting.svelte b/src/routes/clickgui/setting/FloatRangeSetting.svelte
index c5f7564..495f543 100644
--- a/src/routes/clickgui/setting/FloatRangeSetting.svelte
+++ b/src/routes/clickgui/setting/FloatRangeSetting.svelte
@@ -58,7 +58,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../colors.scss";
+  @use "../../../colors.scss" as *;
 
   .setting {
     padding: 7px 0 2px 0;
diff --git a/src/routes/clickgui/setting/FloatSetting.svelte b/src/routes/clickgui/setting/FloatSetting.svelte
index fde11e8..5bbae16 100644
--- a/src/routes/clickgui/setting/FloatSetting.svelte
+++ b/src/routes/clickgui/setting/FloatSetting.svelte
@@ -53,7 +53,7 @@
 </div>
 
 <style lang="scss">
-    @import "../../../colors.scss";
+    @use "../../../colors.scss" as *;
 
     .setting {
         padding: 7px 0 2px 0;
diff --git a/src/routes/clickgui/setting/IntRangeSetting.svelte b/src/routes/clickgui/setting/IntRangeSetting.svelte
index 6889aeb..53f8c12 100644
--- a/src/routes/clickgui/setting/IntRangeSetting.svelte
+++ b/src/routes/clickgui/setting/IntRangeSetting.svelte
@@ -58,7 +58,7 @@
 </div>
 
 <style lang="scss">
-    @import "../../../colors.scss";
+    @use "../../../colors.scss" as *;
 
     .setting {
         padding: 7px 0 2px 0;
diff --git a/src/routes/clickgui/setting/IntSetting.svelte b/src/routes/clickgui/setting/IntSetting.svelte
index a3a4d46..63e97a9 100644
--- a/src/routes/clickgui/setting/IntSetting.svelte
+++ b/src/routes/clickgui/setting/IntSetting.svelte
@@ -53,7 +53,7 @@
 </div>
 
 <style lang="scss">
-    @import "../../../colors.scss";
+    @use "../../../colors.scss" as *;
 
     .setting {
         padding: 7px 0 2px 0;
diff --git a/src/routes/clickgui/setting/KeySetting.svelte b/src/routes/clickgui/setting/KeySetting.svelte
index a4dcab2..35fa6ed 100644
--- a/src/routes/clickgui/setting/KeySetting.svelte
+++ b/src/routes/clickgui/setting/KeySetting.svelte
@@ -77,7 +77,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../colors.scss";
+  @use "../../../colors.scss" as *;
 
   .setting {
     padding: 7px 0;
diff --git a/src/routes/clickgui/setting/TextArraySetting.svelte b/src/routes/clickgui/setting/TextArraySetting.svelte
index 0748655..2d9f11e 100644
--- a/src/routes/clickgui/setting/TextArraySetting.svelte
+++ b/src/routes/clickgui/setting/TextArraySetting.svelte
@@ -45,7 +45,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../colors.scss";
+  @use "../../../colors.scss" as *;
 
   .input-wrapper {
     display: grid;
diff --git a/src/routes/clickgui/setting/TextSetting.svelte b/src/routes/clickgui/setting/TextSetting.svelte
index 73fb5e1..1f9f18d 100644
--- a/src/routes/clickgui/setting/TextSetting.svelte
+++ b/src/routes/clickgui/setting/TextSetting.svelte
@@ -23,7 +23,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../colors.scss";
+  @use "../../../colors.scss" as *;
 
   .setting {
     padding: 7px 0px;
diff --git a/src/routes/clickgui/setting/TogglableSetting.svelte b/src/routes/clickgui/setting/TogglableSetting.svelte
index 54e3dac..7d3c711 100644
--- a/src/routes/clickgui/setting/TogglableSetting.svelte
+++ b/src/routes/clickgui/setting/TogglableSetting.svelte
@@ -70,7 +70,7 @@
 </div>
 
 <style lang="scss">
-    @import "../../../colors.scss";
+    @use "../../../colors.scss" as *;
 
     .setting {
         padding: 7px 0px;
diff --git a/src/routes/clickgui/setting/VectorSetting.svelte b/src/routes/clickgui/setting/VectorSetting.svelte
index e8e4e1f..1b337d9 100644
--- a/src/routes/clickgui/setting/VectorSetting.svelte
+++ b/src/routes/clickgui/setting/VectorSetting.svelte
@@ -43,7 +43,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../colors.scss";
+  @use "../../../colors.scss" as *;
 
   .setting {
     padding: 7px 0;
diff --git a/src/routes/clickgui/setting/blocks/Block.svelte b/src/routes/clickgui/setting/blocks/Block.svelte
index af59468..8b1e72f 100644
--- a/src/routes/clickgui/setting/blocks/Block.svelte
+++ b/src/routes/clickgui/setting/blocks/Block.svelte
@@ -26,7 +26,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../../colors.scss";
+  @use "../../../../colors.scss" as *;
 
   .block {
     display: grid;
diff --git a/src/routes/clickgui/setting/blocks/BlocksSetting.svelte b/src/routes/clickgui/setting/blocks/BlocksSetting.svelte
index d2a91da..5bbbca9 100644
--- a/src/routes/clickgui/setting/blocks/BlocksSetting.svelte
+++ b/src/routes/clickgui/setting/blocks/BlocksSetting.svelte
@@ -60,7 +60,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../../colors.scss";
+  @use "../../../../colors.scss" as *;
 
   .setting {
     padding: 7px 0;
diff --git a/src/routes/clickgui/setting/common/Dropdown.svelte b/src/routes/clickgui/setting/common/Dropdown.svelte
index e68807c..b619d35 100644
--- a/src/routes/clickgui/setting/common/Dropdown.svelte
+++ b/src/routes/clickgui/setting/common/Dropdown.svelte
@@ -51,7 +51,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../../colors.scss";
+  @use "../../../../colors.scss" as *;
 
   .dropdown {
     position: relative;
diff --git a/src/routes/clickgui/setting/common/Switch.svelte b/src/routes/clickgui/setting/common/Switch.svelte
index b1e4e49..0f273c5 100644
--- a/src/routes/clickgui/setting/common/Switch.svelte
+++ b/src/routes/clickgui/setting/common/Switch.svelte
@@ -17,7 +17,7 @@
 
 <style lang="scss">
   @use "sass:color";
-  @import "../../../../colors.scss";
+  @use "../../../../colors.scss" as *;
 
   .switch-container {
     display: flex;
diff --git a/src/routes/clickgui/setting/common/ValueInput.svelte b/src/routes/clickgui/setting/common/ValueInput.svelte
index 1b71363..7b5e13b 100644
--- a/src/routes/clickgui/setting/common/ValueInput.svelte
+++ b/src/routes/clickgui/setting/common/ValueInput.svelte
@@ -41,7 +41,7 @@
 <span contenteditable="true" class="value" bind:innerText={inputValue} on:input={handleInput} on:keydown={handleKeyDown} bind:this={inputElement}></span>
 
 <style lang="scss">
-  @import "../../../../colors.scss";
+  @use "../../../../colors.scss" as *;
 
   .value {
     font-family: monospace;
diff --git a/src/routes/clickgui/setting/nouislider.scss b/src/routes/clickgui/setting/nouislider.scss
index b8a6d7a..61a199d 100644
--- a/src/routes/clickgui/setting/nouislider.scss
+++ b/src/routes/clickgui/setting/nouislider.scss
@@ -1,4 +1,4 @@
-@import "../../../colors.scss";
+@use "../../../colors.scss" as *;
 
 .noUi-handle {
     background-color: $accent;
diff --git a/src/routes/clickgui/setting/pickr.scss b/src/routes/clickgui/setting/pickr.scss
index b20b368..2a2e10d 100644
--- a/src/routes/clickgui/setting/pickr.scss
+++ b/src/routes/clickgui/setting/pickr.scss
@@ -1,4 +1,4 @@
-@import "../../../colors.scss";
+@use "../../../colors.scss" as *;
 
 .pcr-button {
     display: none;
diff --git a/src/routes/hud/elements/ArrayList.svelte b/src/routes/hud/elements/ArrayList.svelte
index b2ce141..e88ded0 100644
--- a/src/routes/hud/elements/ArrayList.svelte
+++ b/src/routes/hud/elements/ArrayList.svelte
@@ -70,7 +70,7 @@
 </div>
 
 <style lang="scss">
-    @import "../../../colors.scss";
+    @use "../../../colors.scss" as *;
   
     .arraylist {
       display: flex;
diff --git a/src/routes/hud/elements/BlockCounter.svelte b/src/routes/hud/elements/BlockCounter.svelte
index ab2b91a..c072462 100644
--- a/src/routes/hud/elements/BlockCounter.svelte
+++ b/src/routes/hud/elements/BlockCounter.svelte
@@ -66,7 +66,7 @@
 {/if}
 
 <style lang="scss">
-  @import "../../../colors.scss";
+  @use "../../../colors.scss" as *;
 
   .notification {
     background-color: rgba($base, 0.8);
diff --git a/src/routes/hud/elements/Effects.svelte b/src/routes/hud/elements/Effects.svelte
index cc81c99..c24f222 100644
--- a/src/routes/hud/elements/Effects.svelte
+++ b/src/routes/hud/elements/Effects.svelte
@@ -40,7 +40,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../colors.scss";
+  @use "../../../colors.scss" as *;
 
   .effect {
     font-weight: 500;
diff --git a/src/routes/hud/elements/Scoreboard.svelte b/src/routes/hud/elements/Scoreboard.svelte
index 0409fef..0c47084 100644
--- a/src/routes/hud/elements/Scoreboard.svelte
+++ b/src/routes/hud/elements/Scoreboard.svelte
@@ -31,7 +31,7 @@
 {/if}
 
 <style lang="scss">
-@import "../../../colors.scss";
+@use "../../../colors.scss" as *;
 
 .scoreboard {
   width: max-content;
diff --git a/src/routes/hud/elements/Text.svelte b/src/routes/hud/elements/Text.svelte
index eb0735e..d0358ab 100644
--- a/src/routes/hud/elements/Text.svelte
+++ b/src/routes/hud/elements/Text.svelte
@@ -70,7 +70,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../colors.scss";
+  @use "../../../colors.scss" as *;
 
     .text {
         position: absolute;
diff --git a/src/routes/hud/elements/Watermark.svelte b/src/routes/hud/elements/Watermark.svelte
index d7ee1b4..c1d6453 100644
--- a/src/routes/hud/elements/Watermark.svelte
+++ b/src/routes/hud/elements/Watermark.svelte
@@ -75,7 +75,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../colors.scss";
+  @use "../../../colors.scss" as *;
 
   @keyframes pulsing {
     0% {
diff --git a/src/routes/hud/elements/hotbar/HotBar.svelte b/src/routes/hud/elements/hotbar/HotBar.svelte
index 962a88a..a427c7d 100644
--- a/src/routes/hud/elements/hotbar/HotBar.svelte
+++ b/src/routes/hud/elements/hotbar/HotBar.svelte
@@ -166,7 +166,7 @@
 {/if}
 
 <style lang="scss">
-  @import "../../../../colors.scss";
+  @use "../../../../colors.scss" as *;
 
   .hotbar {
     //position: fixed;
diff --git a/src/routes/hud/elements/hotbar/Status.svelte b/src/routes/hud/elements/hotbar/Status.svelte
index 1d5c2fa..f09ed0a 100644
--- a/src/routes/hud/elements/hotbar/Status.svelte
+++ b/src/routes/hud/elements/hotbar/Status.svelte
@@ -24,7 +24,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../../colors.scss";
+  @use "../../../../colors.scss" as *;
 
   .label {
     color: $hotbar-text-color;
diff --git a/src/routes/hud/elements/keystrokes/Key.svelte b/src/routes/hud/elements/keystrokes/Key.svelte
index 805210e..732131e 100644
--- a/src/routes/hud/elements/keystrokes/Key.svelte
+++ b/src/routes/hud/elements/keystrokes/Key.svelte
@@ -22,7 +22,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../../colors.scss";
+  @use "../../../../colors.scss" as *;
 
   .key {
     height: 50px;
diff --git a/src/routes/hud/elements/notifications/Notification.svelte b/src/routes/hud/elements/notifications/Notification.svelte
index e05f4f5..81f7455 100644
--- a/src/routes/hud/elements/notifications/Notification.svelte
+++ b/src/routes/hud/elements/notifications/Notification.svelte
@@ -12,7 +12,7 @@
 
 <style lang="scss">
 
-@import "../../../../colors.scss";
+@use "../../../../colors.scss" as *;
 
 .notification {
   display: grid;
diff --git a/src/routes/hud/elements/pointeresp/PointerESP.svelte b/src/routes/hud/elements/pointeresp/PointerESP.svelte
index fcc86d9..e073371 100644
--- a/src/routes/hud/elements/pointeresp/PointerESP.svelte
+++ b/src/routes/hud/elements/pointeresp/PointerESP.svelte
@@ -19,7 +19,7 @@
 
 <style lang="scss">
 
-  @import "../../../../colors.scss";
+  @use "../../../../colors.scss" as *;
 
   .container {
     position: relative;
diff --git a/src/routes/hud/elements/pointeresp/PointerView.svelte b/src/routes/hud/elements/pointeresp/PointerView.svelte
index f7599db..3ca8edd 100644
--- a/src/routes/hud/elements/pointeresp/PointerView.svelte
+++ b/src/routes/hud/elements/pointeresp/PointerView.svelte
@@ -11,7 +11,7 @@
 </div>
 
 <style lang="scss">
-@import "../../../../colors.scss";
+@use "../../../../colors.scss" as *;
 
 .pointer {
   width: 16px;
diff --git a/src/routes/hud/elements/tabgui/Category.svelte b/src/routes/hud/elements/tabgui/Category.svelte
index 5b333f3..73c5e01 100644
--- a/src/routes/hud/elements/tabgui/Category.svelte
+++ b/src/routes/hud/elements/tabgui/Category.svelte
@@ -27,7 +27,7 @@
 </div>
 
 <style lang="scss">
-    @import "../../../../colors.scss";
+    @use "../../../../colors.scss" as *;
 
     .name {
         font-weight: 500;
diff --git a/src/routes/hud/elements/tabgui/Module.svelte b/src/routes/hud/elements/tabgui/Module.svelte
index 51fbb79..bdae8c4 100644
--- a/src/routes/hud/elements/tabgui/Module.svelte
+++ b/src/routes/hud/elements/tabgui/Module.svelte
@@ -32,7 +32,7 @@
 </div>
 
 <style lang="scss">
-    @import "../../../../colors.scss";
+    @use "../../../../colors.scss" as *;
 
     .module {
         font-weight: 500;
diff --git a/src/routes/hud/elements/tabgui/TabGui.svelte b/src/routes/hud/elements/tabgui/TabGui.svelte
index 5e21bec..4ce7cad 100644
--- a/src/routes/hud/elements/tabgui/TabGui.svelte
+++ b/src/routes/hud/elements/tabgui/TabGui.svelte
@@ -110,7 +110,7 @@
 </div>
 
 <style lang="scss">
-    @import "../../../../colors.scss";
+    @use "../../../../colors.scss" as *;
 
     .tabgui {
         //position: fixed;
diff --git a/src/routes/hud/elements/targethud/ArmorStatus.svelte b/src/routes/hud/elements/targethud/ArmorStatus.svelte
index 7923a4e..2ca44e7 100644
--- a/src/routes/hud/elements/targethud/ArmorStatus.svelte
+++ b/src/routes/hud/elements/targethud/ArmorStatus.svelte
@@ -18,7 +18,7 @@
 </div>
 
 <style lang="scss">
-    @import "../../../../colors.scss";
+    @use "../../../../colors.scss" as *;
 
     .armor-status {
         display: flex;
diff --git a/src/routes/hud/elements/targethud/HealthProgress.svelte b/src/routes/hud/elements/targethud/HealthProgress.svelte
index 53485d9..3b2b3ee 100644
--- a/src/routes/hud/elements/targethud/HealthProgress.svelte
+++ b/src/routes/hud/elements/targethud/HealthProgress.svelte
@@ -11,7 +11,7 @@
 </div>
 
 <style lang="scss">
-    @import "../../../../colors.scss";
+    @use "../../../../colors.scss" as *;
 
     .health-progress {
         position: relative;
diff --git a/src/routes/hud/elements/targethud/TargetHud.svelte b/src/routes/hud/elements/targethud/TargetHud.svelte
index efd4124..402f142 100644
--- a/src/routes/hud/elements/targethud/TargetHud.svelte
+++ b/src/routes/hud/elements/targethud/TargetHud.svelte
@@ -69,7 +69,7 @@
 {/if}
 
 <style lang="scss">
-    @import "../../../../colors.scss";
+    @use "../../../../colors.scss" as *;
 
     .targethud {
         background-color: rgba($base, 0.68);
diff --git a/src/routes/menu/common/CircleLoader.svelte b/src/routes/menu/common/CircleLoader.svelte
index 1570cd1..0e79f91 100644
--- a/src/routes/menu/common/CircleLoader.svelte
+++ b/src/routes/menu/common/CircleLoader.svelte
@@ -10,7 +10,7 @@
   /*
     Taken from https://loading.io/css/
    */
-  @import "../../../colors";
+  @use "../../../colors.scss" as *;
   .loader-wrapper {
     position: absolute;
     top: 50%;
diff --git a/src/routes/menu/common/RippleLoader.svelte b/src/routes/menu/common/RippleLoader.svelte
index eec90c7..0f684d5 100644
--- a/src/routes/menu/common/RippleLoader.svelte
+++ b/src/routes/menu/common/RippleLoader.svelte
@@ -6,7 +6,7 @@
     Taken from https://loading.io/css/
   */
 
-  @import "../../../colors";
+  @use "../../../colors.scss" as *;
 
   .lds-ripple {
     color: $accent;
diff --git a/src/routes/menu/common/Search.svelte b/src/routes/menu/common/Search.svelte
index 4f1c750..ea9976b 100644
--- a/src/routes/menu/common/Search.svelte
+++ b/src/routes/menu/common/Search.svelte
@@ -12,7 +12,7 @@
        on:input={() => dispatch("search", {query: value})} spellcheck="false">
 
 <style lang="scss">
-  @import "../../../colors.scss";
+  @use "../../../colors.scss" as *;
 
   .search {
     background-color: rgba($base, 0.8);
diff --git a/src/routes/menu/common/ToolTip.svelte b/src/routes/menu/common/ToolTip.svelte
index 157736b..af0f550 100644
--- a/src/routes/menu/common/ToolTip.svelte
+++ b/src/routes/menu/common/ToolTip.svelte
@@ -25,7 +25,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../colors.scss";
+  @use "../../../colors.scss" as *;
 
   .tooltip {
     color: white;
diff --git a/src/routes/menu/common/buttons/ButtonContainer.svelte b/src/routes/menu/common/buttons/ButtonContainer.svelte
index 2975456..e0564b3 100644
--- a/src/routes/menu/common/buttons/ButtonContainer.svelte
+++ b/src/routes/menu/common/buttons/ButtonContainer.svelte
@@ -3,7 +3,7 @@
 </div>
 
 <style lang="scss">
-    @import "../../../../colors.scss";
+    @use "../../../../colors.scss" as *;
 
     .button-container {
       background-color: rgba($base, 0.5);
diff --git a/src/routes/menu/common/buttons/IconTextButton.svelte b/src/routes/menu/common/buttons/IconTextButton.svelte
index f28e71d..fcd495d 100644
--- a/src/routes/menu/common/buttons/IconTextButton.svelte
+++ b/src/routes/menu/common/buttons/IconTextButton.svelte
@@ -18,7 +18,7 @@
 </button>
 
 <style lang="scss">
-    @import "../../../../colors.scss";
+    @use "../../../../colors.scss" as *;
 
     .icon-text-button {
       display: flex;
diff --git a/src/routes/menu/common/header/Account.svelte b/src/routes/menu/common/header/Account.svelte
index dce7340..586ef3a 100644
--- a/src/routes/menu/common/header/Account.svelte
+++ b/src/routes/menu/common/header/Account.svelte
@@ -47,7 +47,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../../colors";
+  @use "../../../../colors" as *;
 
   .account {
     background-color: rgba($hotbar-base-color, 0.68);
diff --git a/src/routes/menu/common/header/Notifications.svelte b/src/routes/menu/common/header/Notifications.svelte
index 7d4f639..1f868ac 100644
--- a/src/routes/menu/common/header/Notifications.svelte
+++ b/src/routes/menu/common/header/Notifications.svelte
@@ -43,7 +43,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../../colors.scss";
+  @use "../../../../colors.scss" as *;
 
   .notifications {
     display: grid;
diff --git a/src/routes/menu/common/menulist/MenuList.svelte b/src/routes/menu/common/menulist/MenuList.svelte
index 859584a..41969f8 100644
--- a/src/routes/menu/common/menulist/MenuList.svelte
+++ b/src/routes/menu/common/menulist/MenuList.svelte
@@ -43,7 +43,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../../colors";
+  @use "../../../../colors.scss" as *;
 
   .menu-list {
     background-color: rgba($base, 0.9);
diff --git a/src/routes/menu/common/menulist/MenuListItem.svelte b/src/routes/menu/common/menulist/MenuListItem.svelte
index 19b1ef2..0da2b99 100644
--- a/src/routes/menu/common/menulist/MenuListItem.svelte
+++ b/src/routes/menu/common/menulist/MenuListItem.svelte
@@ -46,7 +46,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../../colors.scss";
+  @use "../../../../colors.scss" as *;
 
   .menu-list-item {
     display: grid;
diff --git a/src/routes/menu/common/menulist/MenuListItemTag.svelte b/src/routes/menu/common/menulist/MenuListItemTag.svelte
index 7765743..7c6d5fc 100644
--- a/src/routes/menu/common/menulist/MenuListItemTag.svelte
+++ b/src/routes/menu/common/menulist/MenuListItemTag.svelte
@@ -7,7 +7,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../../colors.scss";
+  @use "../../../../colors.scss" as *;
 
   .tag {
     background-color: rgba($base, 0.36);
diff --git a/src/routes/menu/common/modal/Modal.svelte b/src/routes/menu/common/modal/Modal.svelte
index aa2878c..3cca1ed 100644
--- a/src/routes/menu/common/modal/Modal.svelte
+++ b/src/routes/menu/common/modal/Modal.svelte
@@ -63,7 +63,7 @@
 {/if}
 
 <style lang="scss">
-  @import "../../../../colors";
+  @use "../../../../colors" as *;
 
   .modal-wrapper {
     position: fixed;
diff --git a/src/routes/menu/common/modal/Tabs.svelte b/src/routes/menu/common/modal/Tabs.svelte
index 1677c31..9db4bb9 100644
--- a/src/routes/menu/common/modal/Tabs.svelte
+++ b/src/routes/menu/common/modal/Tabs.svelte
@@ -37,7 +37,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../../colors.scss";
+  @use "../../../../colors.scss" as *;
 
   .available-tabs {
     display: flex;
diff --git a/src/routes/menu/common/optionbar/Divider.svelte b/src/routes/menu/common/optionbar/Divider.svelte
index 3b8edf2..7b8f8ab 100644
--- a/src/routes/menu/common/optionbar/Divider.svelte
+++ b/src/routes/menu/common/optionbar/Divider.svelte
@@ -1,7 +1,7 @@
 <div class="divider"></div>
 
 <style lang="scss">
-  @import "../../../../colors.scss";
+  @use "../../../../colors.scss" as *;
 
   .divider {
     height: 100%;
diff --git a/src/routes/menu/common/optionbar/OptionBar.svelte b/src/routes/menu/common/optionbar/OptionBar.svelte
index 8d2c526..bd20fd2 100644
--- a/src/routes/menu/common/optionbar/OptionBar.svelte
+++ b/src/routes/menu/common/optionbar/OptionBar.svelte
@@ -3,7 +3,7 @@
 </div>
 
 <style lang="scss">
-    @import "../../../../colors";
+    @use "../../../../colors" as *;
 
     .option-bar {
       background-color: rgba($base, 0.68);
diff --git a/src/routes/menu/common/setting/ButtonSetting.svelte b/src/routes/menu/common/setting/ButtonSetting.svelte
index 56c406d..b446f85 100644
--- a/src/routes/menu/common/setting/ButtonSetting.svelte
+++ b/src/routes/menu/common/setting/ButtonSetting.svelte
@@ -30,7 +30,7 @@
 </button>
 
 <style lang="scss">
-  @import "../../../../colors.scss";
+  @use "../../../../colors.scss" as *;
 
   .button-setting {
     position: relative;
diff --git a/src/routes/menu/common/setting/IconTextInput.svelte b/src/routes/menu/common/setting/IconTextInput.svelte
index 2da4f30..9c4d52d 100644
--- a/src/routes/menu/common/setting/IconTextInput.svelte
+++ b/src/routes/menu/common/setting/IconTextInput.svelte
@@ -22,7 +22,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../../colors.scss";
+  @use "../../../../colors.scss" as *;
 
   .icon-text-input {
     display: grid;
diff --git a/src/routes/menu/common/setting/SwitchSetting.svelte b/src/routes/menu/common/setting/SwitchSetting.svelte
index 6d9698d..1bd924a 100644
--- a/src/routes/menu/common/setting/SwitchSetting.svelte
+++ b/src/routes/menu/common/setting/SwitchSetting.svelte
@@ -17,7 +17,7 @@
 
 <style lang="scss">
   @use "sass:color";
-  @import "../../../../colors.scss";
+  @use "../../../../colors.scss" as *;
 
   .switch-setting {
     display: flex;
diff --git a/src/routes/menu/common/setting/select/GenericSelect.svelte b/src/routes/menu/common/setting/select/GenericSelect.svelte
index c023370..e6dfd00 100644
--- a/src/routes/menu/common/setting/select/GenericSelect.svelte
+++ b/src/routes/menu/common/setting/select/GenericSelect.svelte
@@ -43,7 +43,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../../../colors.scss";
+  @use "../../../../../colors.scss" as *;
 
   .select {
     cursor: pointer;
diff --git a/src/routes/menu/common/setting/select/MultiSelect.svelte b/src/routes/menu/common/setting/select/MultiSelect.svelte
index 419327b..9caecfc 100644
--- a/src/routes/menu/common/setting/select/MultiSelect.svelte
+++ b/src/routes/menu/common/setting/select/MultiSelect.svelte
@@ -37,7 +37,7 @@
 </GenericSelect>
 
 <style lang="scss">
-  @import "../../../../../colors.scss";
+  @use "../../../../../colors.scss" as *;
 
   .option {
     font-weight: 500;
diff --git a/src/routes/menu/common/setting/select/SingleSelect.svelte b/src/routes/menu/common/setting/select/SingleSelect.svelte
index 0575389..bae82b6 100644
--- a/src/routes/menu/common/setting/select/SingleSelect.svelte
+++ b/src/routes/menu/common/setting/select/SingleSelect.svelte
@@ -29,7 +29,7 @@
 </GenericSelect>
 
 <style lang="scss">
-  @import "../../../../../colors.scss";
+  @use "../../../../../colors.scss" as *;
 
   .title {
     font-weight: 900;
diff --git a/src/routes/menu/title/buttons/ChildButton.svelte b/src/routes/menu/title/buttons/ChildButton.svelte
index c2ade19..2fd908e 100644
--- a/src/routes/menu/title/buttons/ChildButton.svelte
+++ b/src/routes/menu/title/buttons/ChildButton.svelte
@@ -23,7 +23,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../../colors.scss";
+  @use "../../../../colors.scss" as *;
 
   .child-button {
     position: relative;
diff --git a/src/routes/menu/title/buttons/MainButton.svelte b/src/routes/menu/title/buttons/MainButton.svelte
index e225a78..2997c15 100644
--- a/src/routes/menu/title/buttons/MainButton.svelte
+++ b/src/routes/menu/title/buttons/MainButton.svelte
@@ -27,7 +27,7 @@
 </div>
 
 <style lang="scss">
-@import "../../../../colors.scss";
+@use "../../../../colors.scss" as *;
 
 .main-button {
   background-color: rgba($base, 0.9);