diff --git a/src/components/CollabButton.scss b/src/components/CollabButton.scss
index fd51cc055..bd537b2f2 100644
--- a/src/components/CollabButton.scss
+++ b/src/components/CollabButton.scss
@@ -2,7 +2,7 @@
 
 .excalidraw {
   .CollabButton.is-collaborating {
-    background-color: var(--button-special-active-background-color);
+    background-color: var(--button-special-active-bg-color);
 
     .ToolIcon__icon svg {
       color: var(--icon-green-fill-color);
diff --git a/src/components/ColorPicker.scss b/src/components/ColorPicker.scss
index 23a6aac82..74e8334a5 100644
--- a/src/components/ColorPicker.scss
+++ b/src/components/ColorPicker.scss
@@ -2,7 +2,7 @@
 
 .excalidraw {
   .color-picker {
-    background: var(--popup-background-color);
+    background: var(--popup-bg-color);
     border: 0px solid transparentize($oc-white, 0.75);
     box-shadow: transparentize($oc-black, 0.75) 0px 1px 4px;
     border-radius: 4px;
@@ -28,7 +28,7 @@
     height: 0px;
     border-style: solid;
     border-width: 0px 9px 10px;
-    border-color: transparent transparent var(--popup-background-color);
+    border-color: transparent transparent var(--popup-bg-color);
     position: absolute;
     top: -10px;
 
@@ -144,7 +144,7 @@
   }
 
   .color-input-container:focus-within .color-picker-hash::after {
-    background: var(--input-background-color);
+    background: var(--input-bg-color);
 
     :root[dir="ltr"] & {
       right: -2px;
@@ -163,7 +163,7 @@
     width: 12ch; /* length of `transparent` + 1 */
     margin: 0;
     font-size: 1rem;
-    background-color: var(--input-background-color);
+    background-color: var(--input-bg-color);
     color: var(--text-color-primary);
     border: 0px;
     outline: none;
diff --git a/src/components/ContextMenu.scss b/src/components/ContextMenu.scss
index fe8059e09..d920f7cdf 100644
--- a/src/components/ContextMenu.scss
+++ b/src/components/ContextMenu.scss
@@ -10,7 +10,7 @@
     user-select: none;
     margin: -0.25rem 0 0 0.125rem;
     padding: 0.25rem 0;
-    background-color: var(--popup-secondary-background-color);
+    background-color: var(--popup-secondary-bg-color);
     border: 1px solid var(--button-gray-3);
   }
 
@@ -59,12 +59,12 @@
   }
 
   .context-menu-option:hover {
-    color: var(--popup-background-color);
+    color: var(--popup-bg-color);
     background-color: var(--select-highlight-color);
 
     &.dangerous {
       .context-menu-option__label {
-        color: var(--popup-background-color);
+        color: var(--popup-bg-color);
       }
       background-color: $oc-red-6;
     }
diff --git a/src/components/Dialog.scss b/src/components/Dialog.scss
index 3ca5d6258..c54547c47 100644
--- a/src/components/Dialog.scss
+++ b/src/components/Dialog.scss
@@ -37,7 +37,7 @@
       padding: calc(var(--space-factor) * 2);
       padding-left: var(--inset-left);
       padding-right: var(--inset-right);
-      background: var(--bg-color-island);
+      background: var(--island-bg-color);
       font-size: 1.25em;
 
       box-sizing: border-box;
diff --git a/src/components/HintViewer.scss b/src/components/HintViewer.scss
index 87b502b64..b9fdb56ea 100644
--- a/src/components/HintViewer.scss
+++ b/src/components/HintViewer.scss
@@ -26,7 +26,7 @@ $wide-viewport-width: 1000px;
 
     > span {
       padding: 0.2rem 0.4rem;
-      background-color: var(--overlay-background-color);
+      background-color: var(--overlay-bg-color);
       border-radius: 4px;
     }
   }
diff --git a/src/components/IconPicker.scss b/src/components/IconPicker.scss
index 62c2b5d49..78f507ec0 100644
--- a/src/components/IconPicker.scss
+++ b/src/components/IconPicker.scss
@@ -8,7 +8,7 @@
   }
 
   .picker {
-    background: var(--popup-background-color);
+    background: var(--popup-bg-color);
     border: 0px solid transparentize($oc-white, 0.75);
     box-shadow: transparentize($oc-black, 0.75) 0px 1px 4px;
     border-radius: 4px;
@@ -83,7 +83,7 @@
       position: absolute;
       border-style: solid;
       border-width: 0px 9px 10px;
-      border-color: transparent transparent var(--popup-background-color);
+      border-color: transparent transparent var(--popup-bg-color);
     }
   }
 
diff --git a/src/components/Island.scss b/src/components/Island.scss
index 713910aca..8086536f0 100644
--- a/src/components/Island.scss
+++ b/src/components/Island.scss
@@ -1,7 +1,7 @@
 .excalidraw {
   .Island {
     --padding: 0;
-    background-color: var(--bg-color-island);
+    background-color: var(--island-bg-color);
     backdrop-filter: saturate(100%) blur(10px);
     box-shadow: var(--shadow-island);
     border-radius: var(--border-radius-m);
diff --git a/src/components/Modal.scss b/src/components/Modal.scss
index c009b4e49..57b068437 100644
--- a/src/components/Modal.scss
+++ b/src/components/Modal.scss
@@ -37,7 +37,7 @@
     position: relative;
 
     // for modals, reset blurry bg
-    background: var(--bg-color-island);
+    background: var(--island-bg-color);
     backdrop-filter: none;
 
     @media #{$is-mobile-query} {
diff --git a/src/components/TextInput.scss b/src/components/TextInput.scss
index 3ff96c87c..5a78f5594 100644
--- a/src/components/TextInput.scss
+++ b/src/components/TextInput.scss
@@ -9,11 +9,11 @@
     padding: 0.75rem;
     white-space: nowrap;
     border-radius: var(--space-factor);
-    background-color: var(--input-background-color);
+    background-color: var(--input-bg-color);
 
     &:not(:focus) {
       &:hover {
-        background-color: var(--input-hover-background-color);
+        background-color: var(--input-hover-bg-color);
       }
     }
 
diff --git a/src/constants.ts b/src/constants.ts
index 0a6a793cd..5db9702c2 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -84,7 +84,7 @@ export const STORAGE_KEYS = {
   LOCAL_STORAGE_LIBRARY: "excalidraw-library",
 };
 
-// time in milliseconds
+// Time in milliseconds
 export const TAP_TWICE_TIMEOUT = 300;
 export const TOUCH_CTX_MENU_TIMEOUT = 500;
 export const TITLE_TIMEOUT = 10000;
diff --git a/src/css/_variables.scss b/src/css/_variables.scss
index 4e4ac861d..96536dbba 100644
--- a/src/css/_variables.scss
+++ b/src/css/_variables.scss
@@ -1,4 +1,4 @@
 @import "open-color/open-color.scss";
 
-// keep up to date with is-mobile.tsx
+// Keep up to date with is-mobile.tsx
 $is-mobile-query: "(max-width: 600px), (max-height: 500px) and (max-width: 1000px)";
diff --git a/src/css/theme.scss b/src/css/theme.scss
index b28fca637..03a23d723 100644
--- a/src/css/theme.scss
+++ b/src/css/theme.scss
@@ -1,45 +1,42 @@
 @import "open-color/open-color.scss";
 
 :root {
-  --bg-color-island: rgba(255, 255, 255, 0.9);
-  --popup-background-color: #{$oc-white};
+  --appearance-filter: none;
   --border-radius-m: 4px;
-  --space-factor: 0.25rem;
+  --button-destructive-bg-color: #{$oc-red-1};
+  --button-destructive-color: #{$oc-red-9};
   --button-gray-1: #{$oc-gray-2};
   --button-gray-2: #{$oc-gray-4};
   --button-gray-3: #{$oc-gray-5};
-  --input-border-color: #{$oc-gray-3};
-  --input-background-color: #{$oc-white};
-  --input-hover-background-color: #{$oc-gray-1};
-  --input-label-color: #{$oc-gray-7};
+  --button-special-active-bg-color: #{$oc-green-0};
+  --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
+  --focus-highlight-color: #{$oc-blue-2};
   --icon-fill-color: #{$oc-black};
   --icon-green-fill-color: #{$oc-green-9};
+  --input-bg-color: #{$oc-white};
+  --input-border-color: #{$oc-gray-3};
+  --input-hover-bg-color: #{$oc-gray-1};
+  --input-label-color: #{$oc-gray-7};
+  --island-bg-color: #{transparentize($oc-white, 0.9)};
   --keybinding-color: #{$oc-gray-5};
-  --color-overlay-text-color: #ccc;
-  --sat: env(safe-area-inset-top);
+  --overlay-bg-color: #{transparentize($oc-white, 0.12)};
+  --popup-bg-color: #{$oc-white};
+  --popup-secondary-bg-color: #{$oc-gray-1};
+  --popup-text-color: #{$oc-black};
+  --popup-text-inverted-color: #{$oc-white};
   --sab: env(safe-area-inset-bottom);
   --sal: env(safe-area-inset-left);
   --sar: env(safe-area-inset-right);
-  --text-color-primary: #{$oc-gray-8};
-  --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.85)};
-  --overlay-background-color: #{transparentize($oc-white, 0.12)};
-  --border-radius-m: 4px;
-  --space-factor: 0.25rem;
-  --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
-  --focus-highlight-color: #{$oc-blue-2};
+  --sat: env(safe-area-inset-top);
   --select-highlight-color: #{$oc-blue-5};
-  --appearance-filter: none;
-  --button-special-active-background-color: #{$oc-green-0};
-  --button-destructive-color: #{$oc-red-9};
-  --button-destructive-background-color: #{$oc-red-1};
-  --popup-secondary-background-color: #{$oc-gray-1};
-  --popup-text-color: #{$oc-black};
-  --popup-text-inverted-color: #{$oc-white};
+  --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.85)};
+  --space-factor: 0.25rem;
+  --text-color-primary: #{$oc-gray-8};
 }
 
 .excalidraw {
   &.Appearance_dark {
-    background: #000;
+    background: $oc-black;
 
     &.Appearance_dark-background-none {
       background: none;
@@ -47,32 +44,30 @@
   }
 
   &.Appearance_dark {
-    --text-color-primary: #{$oc-gray-4};
-    --bg-color-island: #1e1e1e;
-    --popup-background-color: #2c2c2c;
+    --appearance-filter: invert(93%) hue-rotate(180deg);
+    --button-destructive-bg-color: #5a0000;
+    --button-destructive-color: #{$oc-red-3};
     --button-gray-1: #363636;
     --button-gray-2: #272727;
     --button-gray-3: #222;
-    --input-border-color: #2e2e2e;
-    --input-background-color: #121212;
-    --input-hover-background-color: #181818;
-    --input-label-color: #{$oc-gray-2};
-    --icon-fill-color: #{$oc-gray-4};
-    --icon-green-fill-color: #{$oc-green-4};
-    --keybinding-color: #{$oc-gray-6};
-    --color-overlay-text-color: #bbb;
-    --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.7)};
-    --overlay-background-color: rgba(30, 30, 30, 0.88);
-    // #{$oc-gray-4}; inlined
+    --button-special-active-bg-color: #204624;
     --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path fill="%23ced4da" d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
     --focus-highlight-color: #{$oc-blue-6};
-    --select-highlight-color: #{$oc-blue-4};
-    --appearance-filter: invert(93%) hue-rotate(180deg);
-    --button-special-active-background-color: #204624;
-    --button-destructive-color: #{$oc-red-3};
-    --button-destructive-background-color: #5a0000;
-    --popup-secondary-background-color: #222;
+    --icon-fill-color: #{$oc-gray-4};
+    --icon-green-fill-color: #{$oc-green-4};
+    --input-bg-color: #121212;
+    --input-border-color: #2e2e2e;
+    --input-hover-bg-color: #181818;
+    --input-label-color: #{$oc-gray-2};
+    --island-bg-color: #1e1e1e;
+    --keybinding-color: #{$oc-gray-6};
+    --overlay-bg-color: rgba(30, 30, 30, 0.88);
+    --popup-bg-color: #2c2c2c;
+    --popup-secondary-bg-color: #222;
     --popup-text-color: #{$oc-gray-4};
     --popup-text-inverted-color: #2c2c2c;
+    --select-highlight-color: #{$oc-blue-4};
+    --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.7)};
+    --text-color-primary: #{$oc-gray-4};
   }
 }
diff --git a/src/excalidraw-app/collab/RoomDialog.scss b/src/excalidraw-app/collab/RoomDialog.scss
index de784d93d..386f7d477 100644
--- a/src/excalidraw-app/collab/RoomDialog.scss
+++ b/src/excalidraw-app/collab/RoomDialog.scss
@@ -35,7 +35,7 @@
   }
 
   .RoomDialog-username {
-    background-color: var(--input-background-color);
+    background-color: var(--input-bg-color);
     border-color: var(--input-border-color);
     appearance: none;
     min-width: 0;
@@ -53,7 +53,7 @@
   }
 
   .Modal .RoomDialog-stopSession {
-    background-color: var(--button-destructive-background-color);
+    background-color: var(--button-destructive-bg-color);
 
     .ToolIcon__label,
     .ToolIcon__icon svg {
diff --git a/src/is-mobile.tsx b/src/is-mobile.tsx
index c20bf89de..30ccd01e8 100644
--- a/src/is-mobile.tsx
+++ b/src/is-mobile.tsx
@@ -11,7 +11,7 @@ export const IsMobileProvider = ({
   if (!query.current) {
     query.current = window.matchMedia
       ? window.matchMedia(
-          // keep up to date with _variables.scss
+          // Keep up to date with _variables.scss
           "(max-width: 640px), (max-height: 500px) and (max-width: 1000px)",
         )
       : (({