diff --git a/.storybook/preview.js b/.storybook/preview.js
index 12bffff938..c1d1f7f0e3 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -18,7 +18,7 @@ addParameters({
 		viewports: INITIAL_VIEWPORTS
 	},
 	themes: [
-		{ name: 'Light', class: ['private', 'light'], color: '#ffffff', default: true },
-		{ name: 'Dark', class: ['private', 'dark'], color: '#263238' },
+		{ name: 'Light', class: ['private-view', 'light'], color: '#ffffff', default: true },
+		{ name: 'Dark', class: ['private-view', 'dark'], color: '#263238' },
 	]
 });
diff --git a/.storybook/raw-value.vue b/.storybook/raw-value.vue
index b6f05801fe..fc1719e67f 100644
--- a/.storybook/raw-value.vue
+++ b/.storybook/raw-value.vue
@@ -31,8 +31,9 @@ export default defineComponent({
 pre {
 	max-width: max-content;
 	padding: 0.5rem;
+	color: var(--foreground-normal);
 	font-family: monospace;
-	background-color: #eee;
+	background-color: var(--background-subdued);
 	border-radius: 8px;
 }
 </style>
diff --git a/public/index.html b/public/index.html
index 2ffe5e0f2c..db8227526f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,7 +10,7 @@
 
     <link rel="stylesheet" href="style.css" />
   </head>
-  <body>
+  <body class="auto">
     <noscript>
       <strong>We're sorry but Directus doesn't work without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
diff --git a/src/app.vue b/src/app.vue
index 2479ab8c2b..40b821d0ef 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -11,14 +11,30 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, toRefs } from '@vue/composition-api';
+import { defineComponent, toRefs, watch } from '@vue/composition-api';
 import { useAppStore } from '@/stores/app';
+import { useUserStore } from '@/stores/user';
 
 export default defineComponent({
 	setup() {
 		const appStore = useAppStore();
 		const { hydrating } = toRefs(appStore.state);
 
+		const userStore = useUserStore();
+
+		watch(
+			() => userStore.state.currentUser,
+			(newUser) => {
+				document.body.classList.remove('dark');
+				document.body.classList.remove('light');
+				document.body.classList.remove('auto');
+
+				if (newUser !== undefined && newUser !== null) {
+					document.body.classList.add(newUser.theme);
+				}
+			}
+		);
+
 		return { hydrating };
 	},
 });
diff --git a/src/components/v-button/v-button.vue b/src/components/v-button/v-button.vue
index 82f3306379..fa1552af91 100644
--- a/src/components/v-button/v-button.vue
+++ b/src/components/v-button/v-button.vue
@@ -124,8 +124,8 @@ export default defineComponent({
 .v-button {
 	--v-button-width: auto;
 	--v-button-height: 44px;
-	--v-button-color: var(--foreground-inverted);
-	--v-button-color-activated: var(--foreground-inverted);
+	--v-button-color: var(--white);
+	--v-button-color-activated: var(--white);
 	--v-button-color-disabled: var(--foreground-subdued);
 	--v-button-background-color: var(--primary);
 	--v-button-background-color-activated: var(--primary);
diff --git a/src/components/v-table/v-table.vue b/src/components/v-table/v-table.vue
index 25c68c4adb..0b6cce7f6b 100644
--- a/src/components/v-table/v-table.vue
+++ b/src/components/v-table/v-table.vue
@@ -327,6 +327,8 @@ export default defineComponent({
 
 			td,
 			th {
+				color: var(--foreground-normal);
+
 				&.align-left {
 					text-align: left;
 				}
diff --git a/src/styles/_base.scss b/src/styles/_base.scss
index 17b090317b..bdefd5ff8c 100644
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -15,13 +15,13 @@ html {
 }
 
 body {
-	color: var(--page-text-color);
+	color: var(--foreground-normal);
 	font-weight: 500;
 	font-size: 14px;
 	font-family: var(--family-sans-serif);
 	font-style: normal;
 	line-height: 22px;
-	background-color: var(--page-background-color);
+	background-color: var(--background-page);
 	-webkit-font-smoothing: antialiased;
 	text-rendering: optimizeLegibility;
 	-moz-osx-font-smoothing: grayscale;
diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss
deleted file mode 100644
index 5f9bffecbb..0000000000
--- a/src/styles/_colors.scss
+++ /dev/null
@@ -1,224 +0,0 @@
-/* stylelint-disable custom-property-empty-line-before */
-body {
-	--black: #000;
-	--white: #fff;
-	--off-white: #f9fafa;
-	--off-black: #13181a;
-
-	--red: #f44336;
-	--red-50: #ffebee;
-	--red-100: #ffcdd2;
-	--red-200: #ef9a9a;
-	--red-300: #e57373;
-	--red-400: #ef5350;
-	--red-500: #f44336;
-	--red-600: #e53935;
-	--red-700: #d32f2f;
-	--red-800: #c62828;
-	--red-900: #b71c1c;
-
-	--pink: #e91e63;
-	--pink-50: #fce4ec;
-	--pink-100: #f8bbd0;
-	--pink-200: #f48fb1;
-	--pink-300: #f06292;
-	--pink-400: #ec407a;
-	--pink-500: #e91e63;
-	--pink-600: #d81b60;
-	--pink-700: #c2185b;
-	--pink-800: #ad1457;
-	--pink-900: #880e4f;
-
-	--purple: #9c27b0;
-	--purple-50: #f3e5f5;
-	--purple-100: #e1bee7;
-	--purple-200: #ce93d8;
-	--purple-300: #ba68c8;
-	--purple-400: #ab47bc;
-	--purple-500: #9c27b0;
-	--purple-600: #8e24aa;
-	--purple-700: #7b1fa2;
-	--purple-800: #6a1b9a;
-	--purple-900: #4a148c;
-
-	--deep-purple: #673ab7;
-	--deep-purple-50: #ede7f6;
-	--deep-purple-100: #d1c4e9;
-	--deep-purple-200: #b39ddb;
-	--deep-purple-300: #9575cd;
-	--deep-purple-400: #7e57c2;
-	--deep-purple-500: #673ab7;
-	--deep-purple-600: #5e35b1;
-	--deep-purple-700: #512da8;
-	--deep-purple-800: #4527a0;
-	--deep-purple-900: #311b92;
-
-	--indigo: #3f51b5;
-	--indigo-50: #e8eaf6;
-	--indigo-100: #c5cae9;
-	--indigo-200: #9fa8da;
-	--indigo-300: #7986cb;
-	--indigo-400: #5c6bc0;
-	--indigo-500: #3f51b5;
-	--indigo-600: #3949ab;
-	--indigo-700: #303f9f;
-	--indigo-800: #283593;
-	--indigo-900: #1a237e;
-
-	--blue: #2196f3;
-	--blue-50: #e3f2fd;
-	--blue-100: #bbdefb;
-	--blue-200: #90caf9;
-	--blue-300: #64b5f6;
-	--blue-400: #42a5f5;
-	--blue-500: #2196f3;
-	--blue-600: #1e88e5;
-	--blue-700: #1976d2;
-	--blue-800: #1565c0;
-	--blue-900: #0d47a1;
-
-	--light-blue: #03a9f4;
-	--light-blue-50: #e1f5fe;
-	--light-blue-100: #b3e5fc;
-	--light-blue-200: #81d4fa;
-	--light-blue-300: #4fc3f7;
-	--light-blue-400: #29b6f6;
-	--light-blue-500: #03a9f4;
-	--light-blue-600: #039be5;
-	--light-blue-700: #0288d1;
-	--light-blue-800: #0277bd;
-	--light-blue-900: #01579b;
-
-	--teal: #009688;
-	--teal-50: #e0f2f1;
-	--teal-100: #b2dfdb;
-	--teal-200: #80cbc4;
-	--teal-300: #4db6ac;
-	--teal-400: #26a69a;
-	--teal-500: #009688;
-	--teal-600: #00897b;
-	--teal-700: #00796b;
-	--teal-800: #00695c;
-	--teal-900: #004d40;
-
-	--green: #4caf50;
-	--green-50: #e8f5e9;
-	--green-100: #c8e6c9;
-	--green-200: #a5d6a7;
-	--green-300: #81c784;
-	--green-400: #66bb6a;
-	--green-500: #4caf50;
-	--green-600: #43a047;
-	--green-700: #388e3c;
-	--green-800: #2e7d32;
-	--green-900: #1b5e20;
-
-	--light-green: #8bc34a;
-	--light-green-50: #f1f8e9;
-	--light-green-100: #dcedc8;
-	--light-green-200: #c5e1a5;
-	--light-green-300: #aed581;
-	--light-green-400: #9ccc65;
-	--light-green-500: #8bc34a;
-	--light-green-600: #7cb342;
-	--light-green-700: #689f38;
-	--light-green-800: #558b2f;
-	--light-green-900: #33691e;
-
-	--lime: #cddc39;
-	--lime-50: #f9fbe7;
-	--lime-100: #f0f4c3;
-	--lime-200: #e6ee9c;
-	--lime-300: #dce775;
-	--lime-400: #d4e157;
-	--lime-500: #cddc39;
-	--lime-600: #c0ca33;
-	--lime-700: #afb42b;
-	--lime-800: #9e9d24;
-	--lime-900: #827717;
-
-	--yellow: #ffeb3b;
-	--yellow-50: #fffde7;
-	--yellow-100: #fff9c4;
-	--yellow-200: #fff59d;
-	--yellow-300: #fff176;
-	--yellow-400: #ffee58;
-	--yellow-500: #ffeb3b;
-	--yellow-600: #fdd835;
-	--yellow-700: #fbc02d;
-	--yellow-800: #f9a825;
-	--yellow-900: #f57f17;
-
-	--amber: #ffc107;
-	--amber-50: #fff8e1;
-	--amber-100: #ffecb3;
-	--amber-200: #ffe082;
-	--amber-300: #ffd54f;
-	--amber-400: #ffca28;
-	--amber-500: #ffc107;
-	--amber-600: #ffb300;
-	--amber-700: #ffa000;
-	--amber-800: #ff8f00;
-	--amber-900: #ff6f00;
-
-	--orange: #ff9800;
-	--orange-50: #fff3e0;
-	--orange-100: #ffe0b2;
-	--orange-200: #ffcc80;
-	--orange-300: #ffb74d;
-	--orange-400: #ffa726;
-	--orange-500: #ff9800;
-	--orange-600: #fb8c00;
-	--orange-700: #f57c00;
-	--orange-800: #ef6c00;
-	--orange-900: #e65100;
-
-	--deep-orange: #ff5722;
-	--deep-orange-50: #fbe9e7;
-	--deep-orange-100: #ffccbc;
-	--deep-orange-200: #ffab91;
-	--deep-orange-300: #ff8a65;
-	--deep-orange-400: #ff7043;
-	--deep-orange-500: #ff5722;
-	--deep-orange-600: #f4511e;
-	--deep-orange-700: #e64a19;
-	--deep-orange-800: #d84315;
-	--deep-orange-900: #bf360c;
-
-	--brown: #795548;
-	--brown-50: #efebe9;
-	--brown-100: #d7ccc8;
-	--brown-200: #bcaaa4;
-	--brown-300: #a1887f;
-	--brown-400: #8d6e63;
-	--brown-500: #795548;
-	--brown-600: #6d4c41;
-	--brown-700: #5d4037;
-	--brown-800: #4e342e;
-	--brown-900: #3e2723;
-
-	--grey: #9e9e9e;
-	--grey-50: #fafafa;
-	--grey-100: #f5f5f5;
-	--grey-200: #eee;
-	--grey-300: #e0e0e0;
-	--grey-400: #bdbdbd;
-	--grey-500: #9e9e9e;
-	--grey-600: #757575;
-	--grey-700: #616161;
-	--grey-800: #424242;
-	--grey-900: #212121;
-
-	--blue-grey: #607d8b;
-	--blue-grey-25: #F5F7F8;
-	--blue-grey-50: #eceff1;
-	--blue-grey-100: #cfd8dc;
-	--blue-grey-200: #b0bec5;
-	--blue-grey-300: #90a4ae;
-	--blue-grey-400: #78909c;
-	--blue-grey-500: #607d8b;
-	--blue-grey-600: #546e7a;
-	--blue-grey-700: #455a64;
-	--blue-grey-800: #37474f;
-	--blue-grey-900: #263238;
-}
diff --git a/src/styles/_type-styles.scss b/src/styles/_type-styles.scss
index afff69bc83..d1dc1b4da8 100644
--- a/src/styles/_type-styles.scss
+++ b/src/styles/_type-styles.scss
@@ -5,6 +5,7 @@
 }
 
 .type-title {
+	color: var(--foreground-normal);
 	font-weight: normal;
 	font-size: 24px;
 	font-family: var(--family-sans-serif);
@@ -13,6 +14,7 @@
 }
 
 .type-label {
+	color: var(--foreground-normal);
 	font-weight: 600;
 	font-size: 16px;
 	font-family: var(--family-sans-serif);
@@ -22,6 +24,7 @@
 }
 
 .type-text {
+	color: var(--foreground-normal);
 	font-weight: 500;
 	font-size: 14px;
 	font-family: var(--family-sans-serif);
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index eeb9973ed5..ab37748052 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,4 +1,11 @@
 :root {
+	--brand: var(--primary); // will be overriden with directus_settings.project_color
+	--white: #fff;
+	--black: #090C0D;
+	--module-background: #13181A;
+	--module-background-alt: #090C0D;
+	--module-icon: #607D8B;
+	--module-icon-alt: #FFF;
 	--transition: cubic-bezier(0.4, 0, 0.2, 1);
 	--transition-in: cubic-bezier(0, 0, 0.2, 1);
 	--transition-out: cubic-bezier(0.4, 0, 1, 1);
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 0129798802..efa6e339cc 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,9 +1,26 @@
 @import 'base';
-@import 'colors';
 @import 'fonts';
 @import 'variables';
 @import 'tooltip';
 @import 'type-styles';
-@import 'themes/default';
-@import 'themes/dark-mode';
+@import 'themes/dark';
+@import 'themes/light';
 @import 'lib/codemirror';
+
+body.light {
+	@include light;
+}
+
+body.dark {
+	@include dark;
+}
+
+body.auto {
+	@media (prefers-color-scheme: dark) {
+		@include dark;
+	}
+
+	@media (prefers-color-scheme: light) {
+		@include light;
+	}
+}
diff --git a/src/styles/themes/_dark-mode.scss b/src/styles/themes/_dark-mode.scss
deleted file mode 100644
index cb12325f50..0000000000
--- a/src/styles/themes/_dark-mode.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-// Dark Mode
-@mixin dark-mode {
-	--background-page: var(--black);
-}
-
-@media (prefers-color-scheme: dark) {
-	body.private.auto,
-	body.private.dark {
-		@include dark-mode;
-	}
-}
-
-body.private.dark {
-	@include dark-mode;
-}
diff --git a/src/styles/themes/_dark.scss b/src/styles/themes/_dark.scss
new file mode 100644
index 0000000000..b5ec0e02ae
--- /dev/null
+++ b/src/styles/themes/_dark.scss
@@ -0,0 +1,73 @@
+/* stylelint-disable */
+
+// Dark Mode
+@mixin dark {
+	--border-normal: #455a64;
+	--border-normal-alt: #78909c;
+	--border-subdued: #455a64;
+
+	--foreground-normal: #cfd8dc;
+	--foreground-subdued: #B0BEC5;
+	--foreground-inverted:#263238;
+
+	--background-normal: #37474f;
+	--background-normal-alt: #455a64;
+	--background-subdued: #37474f;
+	--background-page: #263238;
+	--background-inverted: #fff;
+
+	--primary-190: #EAF2FD;
+	--primary-175: #CBDFFB;
+	--primary-150: #97BFF6;
+	--primary-125: #63A0F1;
+	--primary: #2F80ED;
+	--primary-alt: #273A4A;
+	--primary-75: #2D6CC0;
+	--primary-50: #2A5992;
+	--primary-25: #284565;
+	--primary-10: #273A4A;
+
+	--secondary-190: #F5EEFC;
+	--secondary-175: #E6D3F7;
+	--secondary-150: #CCA7EF;
+	--secondary-125: #B47DE8;
+	--secondary: #9B51E0;
+	--secondary-alt: #323549;
+	--secondary-75: #7E49B6;
+	--secondary-50: #60418C;
+	--secondary-25: #433A62;
+	--secondary-10: #323549;
+
+	--success-190: #E9F7EF;
+	--success-175: #C9EBD7;
+	--success-150: #93D7AF;
+	--success-125: #5DC288;
+	--success: #27AE60;
+	--success-alt: #263E3C;
+	--success-75: #278F56;
+	--success-50: #26704C;
+	--success-25: #265142;
+	--success-10: #263E3C;
+
+	--warning-190: #FEF5ED;
+	--warning-175: #FCE5D2;
+	--warning-150: #F8CCA4;
+	--warning-125: #F5B377;
+	--warning: #F2994A;
+	--warning-alt: #3A3C3A;
+	--warning-75: #BF7F46;
+	--warning-50: #8C6541;
+	--warning-25: #594C3D;
+	--warning-10: #3A3C3A;
+
+	--danger-190: #FDEEEE;
+	--danger-175: #FAD5D5;
+	--danger-150: #F5ABAB;
+	--danger-125: #F08181;
+	--danger: #EB5757;
+	--danger-alt: #3A363B;
+	--danger-75: #BA4E4F;
+	--danger-50: #884448;
+	--danger-25: #573B40;
+	--danger-10: #3A363B;
+}
diff --git a/src/styles/themes/_default.scss b/src/styles/themes/_light.scss
similarity index 84%
rename from src/styles/themes/_default.scss
rename to src/styles/themes/_light.scss
index ac9b9e88fe..399191c686 100644
--- a/src/styles/themes/_default.scss
+++ b/src/styles/themes/_light.scss
@@ -1,8 +1,6 @@
 /* stylelint-disable */
-body,
-.default-colors {
-	--brand: var(--primary); // will be overriden with directus_settings.project_color
 
+@mixin light {
 	--border-normal: #D6DFE2;
 	--border-normal-alt: #BDCCD2;
 	--border-subdued: #ECEFF1;
@@ -17,11 +15,6 @@ body,
 	--background-page: #FFF;
 	--background-inverted: #263238;
 
-	--module-background: #13181A;
-	--module-background-alt: #090C0D;
-	--module-icon: #607D8B;
-	--module-icon-alt: #FFF;
-
 	--primary-10: #EAF2FD;
 	--primary-25: #CBDFFB;
 	--primary-50: #97BFF6;
@@ -76,8 +69,9 @@ body,
 	--danger-150: #884448;
 	--danger-175: #573B40;
 	--danger-190: #3A363B;
+
+	.alt-colors {
+		--background-subdued: var(--background-page);
+	}
 }
 
-.alt-colors {
-	--background-subdued: var(--background-page);
-}
diff --git a/src/views/private/components/module-bar/module-bar.vue b/src/views/private/components/module-bar/module-bar.vue
index a06b349c3c..d81f204ed7 100644
--- a/src/views/private/components/module-bar/module-bar.vue
+++ b/src/views/private/components/module-bar/module-bar.vue
@@ -52,6 +52,7 @@ export default defineComponent({
 
 	.v-button {
 		--v-button-color: var(--module-icon);
+		--v-button-color-activated: var(--module-icon-alt);
 		--v-button-background-color: var(--module-background);
 		--v-button-background-color-activated: var(--module-background-alt);
 	}
diff --git a/src/views/private/components/project-chooser/project-chooser.vue b/src/views/private/components/project-chooser/project-chooser.vue
index 63e200dc46..413c53272e 100644
--- a/src/views/private/components/project-chooser/project-chooser.vue
+++ b/src/views/private/components/project-chooser/project-chooser.vue
@@ -68,6 +68,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .project-chooser {
 	position: relative;
+	color: var(--foreground-normal);
 	background-color: var(--background-normal-alt);
 
 	.toggle {
diff --git a/src/views/private/private-view.vue b/src/views/private/private-view.vue
index 53070d1f36..b453db9fd1 100644
--- a/src/views/private/private-view.vue
+++ b/src/views/private/private-view.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="private-view">
+	<div class="private-view" :class="theme">
 		<aside
 			role="navigation"
 			aria-label="Module Navigation"
@@ -65,7 +65,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, provide, watch } from '@vue/composition-api';
+import { defineComponent, ref, provide, watch, computed } from '@vue/composition-api';
 import ModuleBar from './components/module-bar/';
 import DrawerDetailGroup from './components/drawer-detail-group/';
 import HeaderBar from './components/header-bar';
@@ -73,6 +73,7 @@ import ProjectChooser from './components/project-chooser';
 import DrawerButton from './components/drawer-button/';
 import NotificationsGroup from './components/notifications-group/';
 import NotificationsPreview from './components/notifications-preview/';
+import useUserStore from '@/stores/user';
 
 export default defineComponent({
 	components: {
@@ -95,6 +96,11 @@ export default defineComponent({
 		const drawerOpen = ref(false);
 		const contentEl = ref<Element>();
 		const navigationsInline = ref(false);
+		const userStore = useUserStore();
+
+		const theme = computed(() => {
+			return userStore.state.currentUser?.theme || 'auto';
+		});
 
 		watch(drawerOpen, (open: boolean) => {
 			if (open === false) {
@@ -110,6 +116,7 @@ export default defineComponent({
 			drawerOpen,
 			contentEl,
 			navigationsInline,
+			theme,
 		};
 	},
 });
@@ -122,6 +129,7 @@ export default defineComponent({
 	display: flex;
 	width: 100%;
 	height: 100%;
+	background-color: var(--background-page);
 
 	.nav-overlay {
 		--v-overlay-z-index: 49;
@@ -159,7 +167,7 @@ export default defineComponent({
 			width: 220px;
 			height: 100%;
 			font-size: 1rem;
-			background-color: #eceff1;
+			background-color: var(--background-normal);
 
 			&-content {
 				height: calc(100% - 64px);
diff --git a/src/views/public/public-view.vue b/src/views/public/public-view.vue
index 0f9c768b06..5f7f6e4452 100644
--- a/src/views/public/public-view.vue
+++ b/src/views/public/public-view.vue
@@ -84,7 +84,7 @@ export default defineComponent({
 		padding: 20px;
 		overflow-x: hidden;
 		overflow-y: auto;
-		background-color: var(--background-page);
+		background-color: var(--white);
 		box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
 
 		&.wide {
@@ -109,7 +109,7 @@ export default defineComponent({
 	}
 
 	.notice {
-		color: var(--foreground-subdued);
+		color: #b0bec5;
 	}
 }
 </style>
