diff --git a/src/App.vue b/src/App.vue
index 4000f51..bec3fe5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -39,7 +39,7 @@ export default defineComponent({
 <style scoped>
 .app {
     background-color: var(--background);
-    color: var(--color);
+    color: var(--foreground);
     display: flex;
     flex-flow: column;
     min-height: 100%;
diff --git a/src/components/board/BoardNode.vue b/src/components/board/BoardNode.vue
index ea726a7..920e900 100644
--- a/src/components/board/BoardNode.vue
+++ b/src/components/board/BoardNode.vue
@@ -284,13 +284,13 @@ export default defineComponent({
         outlineColor(): string {
             return (
                 getNodeTypeProperty(this.nodeType, this.node, "outlineColor") ||
-                themes[player.theme].variables["--separator"]
+                themes[player.theme].variables["--outline"]
             );
         },
         fillColor(): string {
             return (
                 getNodeTypeProperty(this.nodeType, this.node, "fillColor") ||
-                themes[player.theme].variables["--secondary-background"]
+                themes[player.theme].variables["--raised-background"]
             );
         },
         progressColor(): string {
@@ -299,7 +299,7 @@ export default defineComponent({
         titleColor(): string {
             return (
                 getNodeTypeProperty(this.nodeType, this.node, "titleColor") ||
-                themes[player.theme].variables["--color"]
+                themes[player.theme].variables["--foreground"]
             );
         },
         progressDisplay(): ProgressDisplay {
diff --git a/src/components/common/features.css b/src/components/common/features.css
index 7ee2620..c312d14 100644
--- a/src/components/common/features.css
+++ b/src/components/common/features.css
@@ -6,6 +6,7 @@
     border: 2px solid rgba(0, 0, 0, 0.125);
     margin: var(--feature-margin);
     box-sizing: border-box;
+    color: var(--feature-foreground);
 }
 
 .can,
diff --git a/src/components/features/Bar.vue b/src/components/features/Bar.vue
index 6c40f22..c6d0d6e 100644
--- a/src/components/features/Bar.vue
+++ b/src/components/features/Bar.vue
@@ -117,7 +117,7 @@ export default defineComponent({
 .border {
     border: 2px solid;
     border-radius: 10px;
-    border-color: var(--color);
+    border-color: var(--foreground);
     overflow: hidden;
     mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
     margin: 0;
@@ -125,7 +125,7 @@ export default defineComponent({
 
 .fill {
     position: absolute;
-    background-color: var(--color);
+    background-color: var(--foreground);
     overflow: hidden;
     margin-left: -0.5px;
     transition-duration: 0.2s;
diff --git a/src/components/fields/Select.vue b/src/components/fields/Select.vue
index 4de7c0f..784e572 100644
--- a/src/components/fields/Select.vue
+++ b/src/components/fields/Select.vue
@@ -42,6 +42,7 @@ export default defineComponent({
 <style>
 .vue-select {
     width: 50%;
+    border-radius: var(--border-radius);
 }
 
 .field-buttons .vue-select {
@@ -50,23 +51,32 @@ export default defineComponent({
 
 .vue-select,
 .vue-dropdown {
-    border-color: rgba(var(--color), 0.26);
+    border-color: var(--outline);
 }
 
 .vue-dropdown {
-    background: var(--secondary-background);
+    background: var(--raised-background);
 }
 
 .vue-dropdown-item {
-    color: var(--color);
+    color: var(--feature-foreground);
+}
+
+.vue-dropdown-item,
+.vue-dropdown-item * {
+    transition-duration: 0s;
 }
 
 .vue-dropdown-item.highlighted {
-    background-color: var(--background-tooltip);
+    background-color: var(--highlighted);
 }
 
 .vue-dropdown-item.selected,
 .vue-dropdown-item.highlighted.selected {
     background-color: var(--bought);
 }
+
+.vue-input input::placeholder {
+    color: var(--link);
+}
 </style>
diff --git a/src/components/fields/Text.vue b/src/components/fields/Text.vue
index c166b5b..1e71298 100644
--- a/src/components/fields/Text.vue
+++ b/src/components/fields/Text.vue
@@ -54,6 +54,10 @@ form {
 
 input {
     width: 50%;
+    outline: none;
+    border: solid 1px var(--outline);
+    background-color: unset;
+    border-radius: var(--border-radius);
 }
 
 .fullWidth {
diff --git a/src/components/fields/Toggle.vue b/src/components/fields/Toggle.vue
index 7706954..b85ac9e 100644
--- a/src/components/fields/Toggle.vue
+++ b/src/components/fields/Toggle.vue
@@ -40,20 +40,21 @@ span {
 }
 
 /* track */
-span::before {
+input + span::before {
     content: "";
     float: right;
     margin: 5px 0 5px 10px;
     border-radius: 7px;
     width: 36px;
     height: 14px;
-    background-color: rgba(0, 0, 0, 0.38);
+    background-color: var(--outline);
+    opacity: 0.38;
     vertical-align: top;
     transition: background-color 0.2s, opacity 0.2s;
 }
 
 /* thumb */
-span::after {
+input + span::after {
     content: "";
     position: absolute;
     top: 2px;
@@ -61,28 +62,31 @@ span::after {
     border-radius: 50%;
     width: 20px;
     height: 20px;
-    background-color: white;
+    background-color: var(--locked);
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
         0 1px 5px 0 rgba(0, 0, 0, 0.12);
     transition: background-color 0.2s, transform 0.2s;
 }
 
 input:checked + span::before {
-    background-color: rgba(33, 150, 243, 0.6);
+    background-color: var(--link);
+    opacity: 0.6;
 }
 
 input:checked + span::after {
-    background-color: rgb(33, 150, 243);
+    background-color: var(--link);
     transform: translateX(16px);
 }
 
 /* active */
 input:active + span::before {
-    background-color: rgba(33, 150, 243, 0.6);
+    background-color: var(--link);
+    opacity: 0.6;
 }
 
 input:checked:active + span::before {
-    background-color: rgba(0, 0, 0, 0.38);
+    background-color: var(--outline);
+    opacity: 0.38;
 }
 
 /* disabled */
@@ -93,10 +97,12 @@ input:disabled + span {
 }
 
 input:disabled + span::before {
-    background-color: rgba(0, 0, 0, 0.38);
+    background-color: var(--outline);
+    opacity: 0.38;
 }
 
 input:checked:disabled + span::before {
-    background-color: rgba(33, 150, 243, 0.6);
+    background-color: var(--link);
+    opacity: 0.6;
 }
 </style>
diff --git a/src/components/system/GameOverScreen.vue b/src/components/system/GameOverScreen.vue
index bd09e20..6eb2780 100644
--- a/src/components/system/GameOverScreen.vue
+++ b/src/components/system/GameOverScreen.vue
@@ -78,7 +78,7 @@ export default defineComponent({
 .game-over-modal-header {
     margin: -20px;
     margin-bottom: 0;
-    background: var(--secondary-background);
+    background: var(--raised-background);
 }
 
 .game-over-modal-header * {
diff --git a/src/components/system/Info.vue b/src/components/system/Info.vue
index 0896597..1349d08 100644
--- a/src/components/system/Info.vue
+++ b/src/components/system/Info.vue
@@ -112,7 +112,7 @@ export default defineComponent({
     display: flex;
     margin: -20px;
     margin-bottom: 0;
-    background: var(--secondary-background);
+    background: var(--raised-background);
     align-items: center;
 }
 
diff --git a/src/components/system/LayerTab.vue b/src/components/system/LayerTab.vue
index 4f37440..ae60155 100644
--- a/src/components/system/LayerTab.vue
+++ b/src/components/system/LayerTab.vue
@@ -215,7 +215,7 @@ export default defineComponent({
     margin: 0;
     cursor: pointer;
     font-size: 40px;
-    color: var(--color);
+    color: var(--foreground);
     border: none;
     background-color: transparent;
 }
@@ -241,8 +241,8 @@ export default defineComponent({
 }
 
 .subtabs-container:not(.floating) {
-    border-top: solid 4px var(--separator);
-    border-bottom: solid 4px var(--separator);
+    border-top: solid 4px var(--outline);
+    border-bottom: solid 4px var(--outline);
 }
 
 .subtabs-container:not(.floating) .subtabs {
@@ -307,7 +307,7 @@ export default defineComponent({
     background: var(--background);
     box-shadow: var(--background) 0 2px 3px 5px;
     border-radius: 50%;
-    color: var(--color);
+    color: var(--foreground);
     font-size: 40px;
     cursor: pointer;
     padding: 0;
@@ -324,7 +324,7 @@ export default defineComponent({
     left: 20px;
     background-color: transparent;
     border: 1px solid transparent;
-    color: var(--color);
+    color: var(--foreground);
     font-size: 40px;
     cursor: pointer;
     line-height: 40px;
@@ -333,7 +333,7 @@ export default defineComponent({
 
 .goBack:hover {
     transform: scale(1.1, 1.1);
-    text-shadow: 0 0 7px var(--color);
+    text-shadow: 0 0 7px var(--foreground);
 }
 </style>
 
diff --git a/src/components/system/Microtab.vue b/src/components/system/Microtab.vue
index 8ad5d42..82b1b42 100644
--- a/src/components/system/Microtab.vue
+++ b/src/components/system/Microtab.vue
@@ -84,7 +84,7 @@ export default defineComponent({
 .microtabs {
     margin: var(--feature-margin) -11px;
     position: relative;
-    border: solid 4px var(--separator);
+    border: solid 4px var(--outline);
 }
 
 .tabs:not(.floating) {
diff --git a/src/components/system/Nav.vue b/src/components/system/Nav.vue
index 4b4a302..4750e0e 100644
--- a/src/components/system/Nav.vue
+++ b/src/components/system/Nav.vue
@@ -128,14 +128,14 @@ export default defineComponent({
 
 <style scoped>
 .nav {
-    background-color: var(--secondary-background);
+    background-color: var(--raised-background);
     display: flex;
     left: 0;
     right: 0;
     top: 0;
     height: 46px;
     width: 100%;
-    border-bottom: 4px solid var(--separator);
+    border-bottom: 4px solid var(--outline);
 }
 
 .nav > * {
@@ -206,7 +206,7 @@ export default defineComponent({
     right: -280px;
     width: 200px;
     transition: right 0.25s ease;
-    background: var(--secondary-background);
+    background: var(--raised-background);
     z-index: 10;
 }
 
@@ -250,7 +250,7 @@ export default defineComponent({
 
 .saves:hover span {
     transform: scale(1.2, 1.2);
-    text-shadow: 5px 0 10px var(--color), -3px 0 12px var(--color);
+    text-shadow: 5px 0 10px var(--foreground), -3px 0 12px var(--foreground);
 }
 
 .options img {
diff --git a/src/components/system/Save.vue b/src/components/system/Save.vue
index cb83e25..4ae1439 100644
--- a/src/components/system/Save.vue
+++ b/src/components/system/Save.vue
@@ -111,9 +111,9 @@ export default defineComponent({
 <style scoped>
 .save {
     position: relative;
-    border: solid 4px var(--separator);
+    border: solid 4px var(--outline);
     padding: 4px;
-    background: var(--secondary-background);
+    background: var(--raised-background);
     margin: var(--feature-margin);
     display: flex;
     align-items: center;
diff --git a/src/components/system/TabButton.vue b/src/components/system/TabButton.vue
index 522ac27..b529cef 100644
--- a/src/components/system/TabButton.vue
+++ b/src/components/system/TabButton.vue
@@ -70,7 +70,7 @@ export default defineComponent({
 <style scoped>
 .tabButton {
     background-color: transparent;
-    color: var(--color);
+    color: var(--foreground);
     font-size: 20px;
     cursor: pointer;
     padding: 5px 20px;
@@ -82,7 +82,7 @@ export default defineComponent({
 
 .tabButton:hover {
     transform: scale(1.1, 1.1);
-    text-shadow: 0 0 7px var(--color);
+    text-shadow: 0 0 7px var(--foreground);
 }
 
 .tabButton:not(.floating) {
diff --git a/src/components/system/Tabs.vue b/src/components/system/Tabs.vue
index ec69f0e..9d159cb 100644
--- a/src/components/system/Tabs.vue
+++ b/src/components/system/Tabs.vue
@@ -96,7 +96,7 @@ export default defineComponent({
     top: 0;
     bottom: 0;
     width: 6px;
-    background: var(--separator);
+    background: var(--outline);
     z-index: 1;
 }
 </style>
@@ -105,7 +105,7 @@ export default defineComponent({
 .tab hr {
     height: 4px;
     border: none;
-    background: var(--separator);
+    background: var(--outline);
     margin: 7px -10px;
 }
 
diff --git a/src/components/system/Tooltip.vue b/src/components/system/Tooltip.vue
index 7490fd1..a16f205 100644
--- a/src/components/system/Tooltip.vue
+++ b/src/components/system/Tooltip.vue
@@ -92,7 +92,7 @@ export default defineComponent({
     transform: translateX(-50%);
     padding: 7px;
     border-radius: 3px;
-    background-color: var(--background-tooltip);
+    background-color: var(--tooltip-background);
     color: var(--points);
     z-index: 100 !important;
     word-break: break-word;
@@ -117,7 +117,7 @@ export default defineComponent({
     margin-left: -5px;
     border-width: 5px;
     border-style: solid;
-    border-color: var(--background-tooltip) transparent transparent transparent;
+    border-color: var(--tooltip-background) transparent transparent transparent;
 }
 
 .tooltip.left,
@@ -138,7 +138,7 @@ export default defineComponent({
     right: 100%;
     margin-left: unset;
     margin-top: -5px;
-    border-color: transparent transparent transparent var(--background-tooltip);
+    border-color: transparent transparent transparent var(--tooltip-background);
 }
 
 .tooltip.right {
@@ -155,7 +155,7 @@ export default defineComponent({
     right: 100%;
     margin-left: -10px;
     margin-top: -5px;
-    border-color: transparent var(--background-tooltip) transparent transparent;
+    border-color: transparent var(--tooltip-background) transparent transparent;
 }
 
 .tooltip.bottom {
@@ -170,6 +170,6 @@ export default defineComponent({
 .tooltip.bottom::after {
     top: 0;
     margin-top: -10px;
-    border-color: transparent transparent var(--background-tooltip) transparent;
+    border-color: transparent transparent var(--tooltip-background) transparent;
 }
 </style>
diff --git a/src/components/system/VerticalRule.vue b/src/components/system/VerticalRule.vue
index 5496d6c..19b7238 100644
--- a/src/components/system/VerticalRule.vue
+++ b/src/components/system/VerticalRule.vue
@@ -16,7 +16,7 @@ export default defineComponent({
 <style scoped>
 .vr {
     width: 4px;
-    background: var(--separator);
+    background: var(--outline);
     height: 100%;
     margin: auto 7px;
 }
diff --git a/src/data/themes.ts b/src/data/themes.ts
index 0e38c30..2fadc0e 100644
--- a/src/data/themes.ts
+++ b/src/data/themes.ts
@@ -2,17 +2,20 @@ import { Theme } from "@/typings/theme";
 
 const defaultTheme: Theme = {
     variables: {
+        "--foreground": "#dfdfdf",
         "--background": "#0f0f0f",
-        "--background-tooltip": "rgba(0, 0, 0, 0.75)",
-        "--secondary-background": "#0f0f0f",
-        "--color": "#dfdfdf",
+        "--feature-foreground": "#eee",
+        "--tooltip-background": "rgba(0, 0, 0, 0.75)",
+        "--raised-background": "#0f0f0f",
         "--points": "#ffffff",
         "--locked": "#bf8f8f",
+        "--highlighted": "#333",
         "--bought": "#77bf5f",
-        "--link": "#02f2f2",
-        "--separator": "#dfdfdf",
-        "--border-radius": "25%",
         "--danger": "rgb(220, 53, 69)",
+        "--link": "#02f2f2",
+        "--outline": "#dfdfdf",
+
+        "--border-radius": "15px",
         "--modal-border": "solid 2px var(--color)",
         "--feature-margin": "0px"
     },
@@ -34,10 +37,11 @@ export default {
         variables: {
             ...defaultTheme.variables,
             "--background": "#2a323d",
-            "--secondary-background": "#333c4a",
+            "--feature-foreground": "#000",
+            "--raised-background": "#333c4a",
             "--locked": "#3a3e45",
             "--bought": "#5C8A58",
-            "--separator": "#333c4a",
+            "--outline": "#333c4a",
             "--border-radius": "4px",
             "--modal-border": "",
             "--feature-margin": "5px"
@@ -50,16 +54,18 @@ export default {
         ...defaultTheme,
         variables: {
             ...defaultTheme.variables,
-            "--color": "#D8DEE9",
-            "--points": "#E5E9F0",
+            "--foreground": "#D8DEE9",
             "--background": "#2E3440",
-            "--secondary-background": "#3B4252",
-            "--locked": "#3B4252",
+            "--feature-foreground": "#000",
+            "--raised-background": "#3B4252",
+            "--points": "#E5E9F0",
+            "--locked": "#4c566a",
+            "--highlighted": "#434c5e",
             "--bought": "#8FBCBB",
-            "--link": "#88C0D0",
-            "--separator": "#3B4252",
-            "--border-radius": "4px",
             "--danger": "#D08770",
+            "--link": "#88C0D0",
+            "--outline": "#3B4252",
+            "--border-radius": "4px",
             "--modal-border": "solid 2px #3B4252",
             "--feature-margin": "5px"
         },
@@ -70,13 +76,13 @@ export default {
         ...defaultTheme,
         variables: {
             ...defaultTheme.variables,
+            "--foreground": "#bfdfff",
             "--background": "#001f3f",
-            "--background-tooltip": "rgba(0, 15, 31, 0.75)",
-            "--secondary-background": "#001f3f",
-            "--color": "#bfdfff",
+            "--tooltip-background": "rgba(0, 15, 31, 0.75)",
+            "--raised-background": "#001f3f",
             "--points": "#dfefff",
             "--locked": "#c4a7b3",
-            "--separator": "#bfdfff"
+            "--outline": "#bfdfff"
         }
     } as Theme
 } as Record<Themes, Theme>;
diff --git a/src/typings/theme.d.ts b/src/typings/theme.d.ts
index b3236e4..b92e3ce 100644
--- a/src/typings/theme.d.ts
+++ b/src/typings/theme.d.ts
@@ -1,16 +1,18 @@
 export interface Theme {
     variables: {
+        "--foreground": string;
         "--background": string;
-        "--background-tooltip": string;
-        "--secondary-background": string;
-        "--color": string;
+        "--feature-foreground": string;
+        "--tooltip-background": string;
+        "--raised-background": string;
         "--points": string;
         "--locked": string;
+        "--highlighted": string;
         "--bought": string;
-        "--link": string;
-        "--separator": string;
-        "--border-radius": string;
         "--danger": string;
+        "--link": string;
+        "--outline": string;
+        "--border-radius": string;
         "--modal-border": string;
         "--feature-margin": string;
     };