From c8793e538bab3e247f630b8a5dd61b3025ecb856 Mon Sep 17 00:00:00 2001 From: Rijk van Zanten Date: Thu, 2 Apr 2020 21:18:21 -0400 Subject: [PATCH] Add dark mode (#297) --- .storybook/preview.js | 4 +- .storybook/raw-value.vue | 3 +- public/index.html | 2 +- src/app.vue | 18 +- src/components/v-button/v-button.vue | 4 +- src/components/v-table/v-table.vue | 2 + src/styles/_base.scss | 4 +- src/styles/_colors.scss | 224 ------------------ src/styles/_type-styles.scss | 3 + src/styles/_variables.scss | 7 + src/styles/main.scss | 23 +- src/styles/themes/_dark-mode.scss | 15 -- src/styles/themes/_dark.scss | 73 ++++++ .../themes/{_default.scss => _light.scss} | 16 +- .../components/module-bar/module-bar.vue | 1 + .../project-chooser/project-chooser.vue | 1 + src/views/private/private-view.vue | 14 +- src/views/public/public-view.vue | 4 +- 18 files changed, 151 insertions(+), 267 deletions(-) delete mode 100644 src/styles/_colors.scss delete mode 100644 src/styles/themes/_dark-mode.scss create mode 100644 src/styles/themes/_dark.scss rename src/styles/themes/{_default.scss => _light.scss} (84%) 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; } 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 @@ - + 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 @@