Add dark mode (#297)

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);
 	}

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 {

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);

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>