github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-27 10:38:25 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add dark mode (#297)

Browse Source
This commit is contained in:
Rijk van Zanten
2020-04-02 21:18:21 -04:00
committed by GitHub
parent e50000a05a
commit c8793e538b
18 changed files with 151 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.storybook/preview.js
View File

@@ -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' },
]
});

3
.storybook/raw-value.vue
View File

@@ -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>

2
public/index.html
View File

@@ -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>

18
src/app.vue
View File

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

4
src/components/v-button/v-button.vue
View File

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

2
src/components/v-table/v-table.vue
View File

@@ -327,6 +327,8 @@ export default defineComponent({
td,
th {
color: var(--foreground-normal);
&.align-left {
text-align: left;
}

4
src/styles/_base.scss
View File

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

224
src/styles/_colors.scss
View File

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

3
src/styles/_type-styles.scss
View File

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

7
src/styles/_variables.scss
View File

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

23
src/styles/main.scss
View File

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

15
src/styles/themes/_dark-mode.scss
View File

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

73
src/styles/themes/_dark.scss Normal file
View File

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

16
src/styles/themes/_default.scss → src/styles/themes/_light.scss
View File

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

1
src/views/private/components/module-bar/module-bar.vue
View File

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

1
src/views/private/components/project-chooser/project-chooser.vue
View File

@@ -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 {

14
src/views/private/private-view.vue
View File

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

4
src/views/public/public-view.vue
View File

@@ -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>