From 46fa43d67f04811f7e5029c58433a0b33539535b Mon Sep 17 00:00:00 2001
From: adrinux <adrian@perlucida.co.uk>
Date: Mon, 22 Nov 2021 21:12:54 +0000
Subject: [PATCH] Migrate to bulma-css-variables and introduce dark mode (#954)

Co-authored-by: Adrian Simmons <adrian@perlucida.co.uk>
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/954
Reviewed-by: dpschen <dpschen@noreply.kolaente.de>
Reviewed-by: konrad <k@knt.li>
Co-authored-by: adrinux <adrian@perlucida.co.uk>
Co-committed-by: adrinux <adrian@perlucida.co.uk>
---
 package.json                                  |   3 +-
 src/App.vue                                   |   4 +
 src/assets/logo-full-pride.svg                |   2 +-
 src/assets/logo-full.svg                      |   2 +-
 src/components/home/Logo.vue                  |  10 +-
 src/components/home/MenuButton.vue            |   4 +-
 src/components/home/PoweredByLink.vue         |   2 +-
 src/components/home/contentAuth.vue           |   8 +-
 src/components/home/contentLinkShare.vue      |   4 +-
 src/components/home/navigation.vue            |  22 ++--
 src/components/home/topNavigation.vue         |  15 ++-
 src/components/home/update.vue                |   2 +-
 src/components/input/button.vue               |   8 +-
 src/components/input/colorPicker.vue          |   2 +-
 src/components/input/datepicker.vue           |   8 +-
 src/components/input/editor.vue               |   9 +-
 src/components/input/fancycheckbox.vue        |   4 +-
 src/components/input/multiselect.vue          |  26 ++--
 src/components/list/partials/list-card.vue    |  20 +--
 src/components/misc/Done.vue                  |   4 +-
 src/components/misc/api-config.vue            |   2 +-
 src/components/misc/card.vue                  |  10 +-
 src/components/misc/legal.vue                 |   2 +-
 src/components/misc/no-auth-wrapper.vue       |   4 +-
 src/components/misc/ready.vue                 |   6 +-
 src/components/misc/shortcut.vue              |   4 +-
 .../notifications/notifications.vue           |  18 +--
 .../quick-actions/quick-actions.vue           |   9 +-
 src/components/tasks/edit-task.vue            |   2 +-
 src/components/tasks/gantt-component.vue      |  30 ++---
 src/components/tasks/partials/attachments.vue |  14 +-
 .../tasks/partials/checklist-summary.vue      |   6 +-
 src/components/tasks/partials/defer-task.vue  |   8 +-
 .../tasks/partials/editAssignees.vue          |   6 +-
 src/components/tasks/partials/kanban-card.vue |  18 +--
 src/components/tasks/partials/listSearch.vue  |   2 +-
 .../tasks/partials/priorityLabel.vue          |   4 +-
 .../tasks/partials/relatedTasks.vue           |  10 +-
 src/components/tasks/partials/reminders.vue   |   4 +-
 .../tasks/partials/singleTaskInList.vue       |  24 ++--
 src/composables/useColorScheme.ts             |  48 +++++++
 src/i18n/lang/en.json                         |   9 ++
 src/styles/common-imports.scss                |  44 +++++++
 src/styles/components/labels.scss             |   2 +-
 src/styles/components/task.scss               |   4 +-
 src/styles/components/tooltip.scss            |   4 +-
 src/styles/custom-properties/_index.scss      |   2 +
 src/styles/custom-properties/colors.scss      | 122 ++++++++++++++++++
 src/styles/custom-properties/shadows.scss     |  22 ++++
 src/styles/fonts.scss                         |  14 +-
 src/styles/global.scss                        |  18 +--
 src/styles/theme/background.scss              |   2 +-
 src/styles/theme/content.scss                 |   2 +-
 src/styles/theme/scrollbars.scss              |   6 +-
 src/styles/theme/theme.scss                   |  18 +--
 src/styles/variables/_index.scss              |  12 --
 src/styles/variables/colors.scss              |  18 ---
 src/styles/variables/shadows.scss             |   5 -
 src/styles/variables/variables.scss           |  41 ------
 src/views/list/ShowList.vue                   |  14 +-
 src/views/list/settings/background.vue        |   4 +-
 src/views/list/views/Kanban.vue               |  11 +-
 src/views/list/views/List.vue                 |   4 +-
 src/views/migrator/MigrateService.vue         |   6 +-
 src/views/namespaces/ListNamespaces.vue       |   4 +-
 src/views/tasks/TaskDetailView.vue            |  48 ++++---
 src/views/tasks/TaskDetailViewModal.vue       |  12 +-
 src/views/teams/ListTeams.vue                 |   2 +-
 src/views/user/Settings.vue                   |   6 +-
 src/views/user/settings/Avatar.vue            |   2 +-
 src/views/user/settings/General.vue           |  48 +++++++
 vite.config.js                                |   9 +-
 yarn.lock                                     |  28 +++-
 73 files changed, 605 insertions(+), 328 deletions(-)
 create mode 100644 src/composables/useColorScheme.ts
 create mode 100644 src/styles/common-imports.scss
 create mode 100644 src/styles/custom-properties/_index.scss
 create mode 100644 src/styles/custom-properties/colors.scss
 create mode 100644 src/styles/custom-properties/shadows.scss
 delete mode 100644 src/styles/variables/_index.scss
 delete mode 100644 src/styles/variables/colors.scss
 delete mode 100644 src/styles/variables/shadows.scss
 delete mode 100644 src/styles/variables/variables.scss

diff --git a/package.json b/package.json
index c4bbe325c..e2a26cc13 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,8 @@
     "@sentry/tracing": "6.15.0",
     "@sentry/vue": "6.15.0",
     "@vue/compat": "3.2.22",
-    "bulma": "0.9.3",
+    "@vueuse/core": "^6.8.0",
+    "bulma-css-variables": "^0.9.33",
     "camel-case": "4.1.2",
     "codemirror": "5.64.0",
     "copy-to-clipboard": "3.3.1",
diff --git a/src/App.vue b/src/App.vue
index af2fc690f..5eacb532c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -33,6 +33,7 @@ import ContentNoAuth from './components/home/contentNoAuth'
 import {setLanguage} from './i18n'
 import AccountDeleteService from '@/services/accountDelete'
 import Ready from '@/components/misc/ready'
+import {useColorScheme} from '@/composables/useColorScheme'
 
 export default defineComponent({
 	name: 'app',
@@ -54,6 +55,9 @@ export default defineComponent({
 	beforeCreate() {
 		setLanguage()
 	},
+	setup() {
+		useColorScheme()
+	},
 	created() {
 		// Make sure to always load the home route when running with electron
 		if (this.$route.fullPath.endsWith('frontend/index.html')) {
diff --git a/src/assets/logo-full-pride.svg b/src/assets/logo-full-pride.svg
index f7d6527f6..1ecacb3e9 100644
--- a/src/assets/logo-full-pride.svg
+++ b/src/assets/logo-full-pride.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 855 250.3" width="855" height="250.3" xml:space="preserve"><defs><clipPath id="a" clipPathUnits="userSpaceOnUse"><path fill="#196aff" stroke-width=".2" d="M-494.6 2401.2c-4 23-8.4 45.2-12.9 66.7-46.5 222.2-109.9 344.6-178.3 344.6-66.2 0-128.3-117-175.1-329.5-5.8-26.2-11.2-53.5-16.3-81.8-36.4-200.7-56.2-450.3-56.2-713.7 0-300.5 25.7-583 72.5-795.4 46.8-212.5 109-329.5 175-329.5 66.2 0 128.4 117 175.1 329.5 46.8 212.5 72.6 495 72.6 795.4 0 256.9-20.4 512.4-56.4 713.7"/></clipPath></defs><g fill-rule="evenodd" clip-path="url(#a)" transform="matrix(.50338 0 0 -.11079 479.9 311.6)"><path fill="#e40303" d="M-933.4 2812.6h495.1v-375h-495.1z"/><path fill="#ff8c00" d="M-933.4 2437.6h495.1v-375h-495.1z"/><path fill="#ffed00" d="M-933.4 2062.6h495.1v-375h-495.1z"/><path fill="#008026" d="M-933.4 1687.6h495.1v-375h-495.1z"/><path fill="#004dff" d="M-933.4 1312.6h495.1v-375h-495.1z"/><path fill="#750787" d="M-933.4 937.6h495.1v-375h-495.1z"/></g><path fill="#fff" d="M173.2 157.8c4.6-13.6 12.3-17.8 13.2-38.7.4-7.4-1.9-30.8-1.9-30.8s3.7-9.4-3.3-19.8c-10.9-16.2-33.2-17.3-44.9-17.3-11.7 0-33.8 1-44.6 17.3-7 10.4-3.4 19.8-3.4 19.8L86.2 111c-.3 2.5 0 12.3.3 14.7.5 4.3 1.9 8.5 3.3 12.5 1.9 5.2 4.8 10.4 7 15.7 6.8 16 1.1 35.8 1.5 53.1.3 12.2-2.6 24.7-3.7 36.6a124.3 124.3 0 0 0 84.8-1.7c-2.6-15-5.7-29.2-6.2-34.6-1.4-16.4-5.4-33.8 0-49.5"/><path fill="#fff" d="M87.4 62.2c.2 2.5.4 5 1 7.3.3.8.6 2.6 1.6 2.9 1.1.3 3.3-1.1 4.2-1.7l4.7-3.6 3.1-2.2a25.9 25.9 0 0 0 5.6-6.7c.7-1 4.8-1.7 5.5-2.7.7-1 .1-2.4.1-3.7 0-9.7.6-19.2.8-28.6.2-6.5 2.8-14.2-7-11.2-20.7 6.5-20.5 35.3-19.6 50.2M179.1 75.8l-.8-.7a27 27 0 0 1-3.3-2.7l-3.6-3.8-3.3-3.3-1.9-2.4-.7-1.4c-.3-.6-5.2-1.3-4.7-2 .8-1 2.7-2 3.1-3.2 2.2-6.3 3.2-31.7 3.5-38.2.7-16.6 15.3.8 17.8 7.5 7.4 19.4 3 33.6-6 50.2"/><path fill="#f1e6d3" d="M159.3 139.6c0-9.6-1.2-13.4-6.6-18.1-3.3-3-7.2-4-13.4-4a17.7 17.7 0 0 0-14 5.2c-4.8 5-6.1 8-6.1 17.6 0 5.2 5.5 16.6 7.2 19.3 2.8 4.7 7.9 6.3 12.9 6 5 .3 10-1.3 12.8-6a55 55 0 0 0 7.2-20"/><path fill="#f1d7d4" d="M95.7 71c-1.3-11.1-5-31.1 8-43 1.4-1.3 1.8 3.2 2 5 .4 2.4 0 9.5 0 12 .2 4.7 1.1 7.1.7 9.3-1.3 5.8-2.3 5.4-3.5 9-2.3 7-6.9 10.8-7.2 7.7M176.8 68.8c1.4 2.4 4.8-10.4 6-16 1-5.2 2.3-12.1.5-17.3-1-2.8-7-11-7.6-8.2-.3 1-.4 9.2-1.1 13.1-.8 4.8-2.3 9.6-2.3 14.5 0 11 3.2 11.4 4.5 14"/><path fill="#faeee0" d="M134 200.4c-.2.8-2.4 1.5-3.2 1.7-2 .6-3.6-.9-4.7-2.2-1.5-1.7-1.5-4.6-2.1-6.7-.4-1.2-2.5-1.4-3.2-.2-2.1 3.8-10.5-3.5-8.6-5.9 1.3-1.6-1.8-3-3-1.4-3.8 4.7 6.3 13.4 12.1 11 .3 1.2.5 2.4 1 3.5 1 2.2 3.2 3.6 5.4 4.8 3 1.6 8.8-1.2 9.7-4 .6-1.8-2.7-2.5-3.4-.6M160.7 172c.3 1.3.4 5.7-2 3.3-1-1-3-.4-3 1-.3 3-3.3 3-6 2.1-2-.7-3.1 2.2-1 2.9 3.8 1.3 8 .6 9.7-2.3 1.3.6 2.8.8 4-.4 2-2 2.3-4.7 1.7-7.2-.4-1.9-3.8-1.3-3.4.6M166.9 235.5c-1 1.9-2.6 1.7-4.4 1-1.3-.6-3 .3-2.5 1.7.8 2.6-2.6 3.4-4.9 2.5-2-.9-3.7 1.7-1.7 2.6 4.1 1.7 9.3.2 10-3.4 2.7.4 5.2-.3 6.5-2.9.9-1.8-2.1-3.3-3-1.5M140.2 92.2c-.4 2.6-5.3-.5-6.5-1.3-1-.7-2.5-.3-2.6 1-.2 1.6-2.4 1.1-3.4 1-2-.5-3.6-1.7-3.6-3.5 0-1.7 1-3.6 1.6-5.2.4-1-1.1-2.2-2.2-1.5-2 1.3-11.5 2.4-7.7-1.8 1.2-1.3-1-3.2-2.2-1.8-1.7 1.9-3 6.3.9 7.2 2 .5 4.9.5 7.3 0-1 3.2-1.2 6.3 3 8.4 3 1.4 6.9 1.4 8.6-.8 3.5 1.9 9 3.7 9.8-1 .2-1.7-2.7-2.4-3-.7"/><path fill="#494949" d="M123.8 152.9c5 .4 10.2 1.6 15.4 1.4 3.3-.1 6.7-.6 10-1 2.3-.4 5.2-.8 6.8-2.6.1 5.9-12 7.7-16.8 7.8a24 24 0 0 1-15.4-5.6"/><path fill="#494949" d="M137.6 140.7c-.6 3.7-.7 7.6-.4 11.3.1 1-.1 3.4 1.2 3.9 1 .4 2.4-.4 2.5-1.4.3-1.6-.4-3.6-.4-5.3 0-1.9 0-3.8.2-5.8.1-1.1.8-2.7-.6-3.5-1-.6-2.3-.3-2.5.8"/><path fill="#494949" d="M147.5 131.6c-3 .1-5.9 1.8-8.2 3.5-2-1.4-5.2-2.7-7.9-2-1.5.5-.1 1 .5 1.4 1.2.8 2.2 1.8 3.1 3 1.4 1.5 2.6 3.3 4 4.8 1-.7 2-1.4 2.8-2.2l4.2-5.6 1-1.4c.4-.4 1.5-1.2.5-1.5"/><path fill="#2c3844" d="M108.7 110.8c1.5-4 3.1-9 7.3-8.1 3.1.7 7.3 11.2 4.6 10.1-1.4-.5-2.6-5.3-5.3-6-1.8-.3-4.2 5.7-6.5 6.3-1.2.3-.6-1.3-.1-2.3M153.3 110.8c1.5-4 3.2-9 7.3-8.1 3.2.7 7.4 11.2 4.7 10.1-1.5-.5-2.6-5.3-5.4-6-1.7-.3-4.1 5.7-6.5 6.3-1 .3-.5-1.3 0-2.3"/><g fill="#252626" stroke-width="29.1" aria-label="Vikunja" font-family="Quicksand" font-size="1163.4" font-weight="700" letter-spacing="0" style="line-height:1.25" word-spacing="0"><path d="M3302.3-1549.4c3.4 2.3 8.1 5.8 10.4 7h1.2s1.2 0 1.2 1.1c2.3 0 7 1.2 9.3 2.4h2.3c3.5 1.1 8.1 1.1 11.6 1.1s7 0 11.7-1.1h2.3c3.5-1.2 5.8-2.4 9.3-2.4 1.1-1.1 1.1-1.1 2.3-1.1 3.5-1.2 7-4.7 9.3-5.8l2.3-1.2c2.4-2.3 4.7-3.5 7-5.8 1.2-1.2 1.2-1.2 2.4-3.5 1.1-2.3 4.6-4.7 5.8-7 1.1 0 1.1 0 1.1-1.2 2.4-2.3 3.5-7 4.7-9.3l287.3-679.4a63.9 63.9 0 0 0-34.9-82.6 64 64 0 0 0-83.7 33.8l-226.9 538.6-226.8-538.6a62.7 62.7 0 0 0-82.6-33.8 62 62 0 0 0-35 82.6l285 679.4c2.4 2.4 4.7 7 5.9 9.3 0 1.2 1.2 1.2 1.2 1.2 1.1 2.3 3.5 4.7 5.8 7 0 2.3 1.1 2.3 1.1 3.5 3.5 2.3 5.9 3.5 8.2 5.8h1.2zM3936.8-2118.3a62.1 62.1 0 0 0-62.8 64v453.7c0 35 28 62.8 62.8 62.8 36.1 0 62.9-27.9 62.9-62.8v-453.7c0-37.2-26.8-64-62.9-64zm62.9-171a61.8 61.8 0 0 0-62.9-62.8c-34.9 0-62.8 27.9-62.8 62.8v24.4c0 35 28 64 62.8 64 36.1 0 62.9-29 62.9-64zM4264-1537.8c36.1 0 65.2-29 65.2-64V-1704l64-64 171 207a61.7 61.7 0 0 0 48.9 23.3c14 0 29-4.6 40.7-15.1a64.5 64.5 0 0 0 9.3-90.7L4483.9-1859l174.5-174.5a63.2 63.2 0 0 0 0-90.7 65.3 65.3 0 0 0-90.7 0l-238.5 238.5v-402.6c0-34.9-29-64-65.2-64-36 0-64 29.1-64 64v686.4c0 35 28 64 64 64zM5316.6-1779.8v-278c0-32.6-30.2-61.7-62.8-61.7a61 61 0 0 0-60.5 61.7v278a120.7 120.7 0 0 1-122.1 118.7 117.7 117.7 0 0 1-118.7-118.7v-278a62 62 0 0 0-61.6-61.7c-33.8 0-61.7 29.1-61.7 61.7v278c0 132.7 109.3 242 242 242 133.8 0 245.4-109.3 245.4-242zM5769-2119.5c-45.3 0-88.4 14-123.3 36.1a63 63 0 0 0-57-36c-34.9 0-61.7 27.9-61.7 61.6v458.3a61.3 61.3 0 0 0 61.7 61.7 63.6 63.6 0 0 0 61.7-50c2.3-4.7 2.3-8.1 2.3-11.6v-278c0-65.2 51.2-117.6 116.3-117.6 66.3 0 121 52.4 121 117.5v278c0 33.8 29.1 61.7 61.7 61.7a61 61 0 0 0 60.5-61.6v-278c0-131.5-108.2-242-243.2-242zM6255.6-2199.7a64.3 64.3 0 0 0 62.9-64v-23.3c0-37.2-28-64-62.9-64a63 63 0 0 0-64 64v23.3c0 33.7 29.1 64 64 64zm-65.1 867.8c69.8 0 125.6-57 125.6-125.6v-598c0-36-26.7-64-62.8-64-33.7 0-62.8 28-62.8 64v598c-37.2 0-64 28-64 61.7 0 37.2 26.8 64 64 64zM6998.5-2056.6c0-35-28-62.9-61.7-62.9-30.2 0-53.5 22.1-60.5 51.2a265.2 265.2 0 0 0-154.7-51.2 268 268 0 0 0-197.8 87.3c-50 52.3-79 124.5-79 204.7 0 79.2 29 151.3 79 204.8 50 52.4 118.7 85 197.8 85 58.2 0 110.5-18.7 154.7-50.1 7 28 30.3 50 60.5 50a62 62 0 0 0 61.7-61.6v-228zm-168.7 349c-28 29-67.5 45.3-108.2 45.3-41.9 0-81.4-16.2-108.2-45.3-28-30.3-44.2-72.2-44.2-119.9 0-48.8 16.3-90.7 44.2-119.8a140.3 140.3 0 0 1 108.2-47.7c40.7 0 80.3 16.3 108.2 47.7 28 29.1 45.4 71 45.4 119.8 0 47.7-17.5 89.6-45.4 119.9z" style="-inkscape-font-specification:'Quicksand Bold'" transform="translate(-63.6 371.7) scale(.12982)"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 855 250.3" width="855" height="250.3" xml:space="preserve"><defs><clipPath id="a" clipPathUnits="userSpaceOnUse"><path fill="#196aff" stroke-width=".2" d="M-494.6 2401.2c-4 23-8.4 45.2-12.9 66.7-46.5 222.2-109.9 344.6-178.3 344.6-66.2 0-128.3-117-175.1-329.5-5.8-26.2-11.2-53.5-16.3-81.8-36.4-200.7-56.2-450.3-56.2-713.7 0-300.5 25.7-583 72.5-795.4 46.8-212.5 109-329.5 175-329.5 66.2 0 128.4 117 175.1 329.5 46.8 212.5 72.6 495 72.6 795.4 0 256.9-20.4 512.4-56.4 713.7"/></clipPath></defs><g fill-rule="evenodd" clip-path="url(#a)" transform="matrix(.50338 0 0 -.11079 479.9 311.6)"><path fill="#e40303" d="M-933.4 2812.6h495.1v-375h-495.1z"/><path fill="#ff8c00" d="M-933.4 2437.6h495.1v-375h-495.1z"/><path fill="#ffed00" d="M-933.4 2062.6h495.1v-375h-495.1z"/><path fill="#008026" d="M-933.4 1687.6h495.1v-375h-495.1z"/><path fill="#004dff" d="M-933.4 1312.6h495.1v-375h-495.1z"/><path fill="#750787" d="M-933.4 937.6h495.1v-375h-495.1z"/></g><path fill="#fff" d="M173.2 157.8c4.6-13.6 12.3-17.8 13.2-38.7.4-7.4-1.9-30.8-1.9-30.8s3.7-9.4-3.3-19.8c-10.9-16.2-33.2-17.3-44.9-17.3-11.7 0-33.8 1-44.6 17.3-7 10.4-3.4 19.8-3.4 19.8L86.2 111c-.3 2.5 0 12.3.3 14.7.5 4.3 1.9 8.5 3.3 12.5 1.9 5.2 4.8 10.4 7 15.7 6.8 16 1.1 35.8 1.5 53.1.3 12.2-2.6 24.7-3.7 36.6a124.3 124.3 0 0 0 84.8-1.7c-2.6-15-5.7-29.2-6.2-34.6-1.4-16.4-5.4-33.8 0-49.5"/><path fill="#fff" d="M87.4 62.2c.2 2.5.4 5 1 7.3.3.8.6 2.6 1.6 2.9 1.1.3 3.3-1.1 4.2-1.7l4.7-3.6 3.1-2.2a25.9 25.9 0 0 0 5.6-6.7c.7-1 4.8-1.7 5.5-2.7.7-1 .1-2.4.1-3.7 0-9.7.6-19.2.8-28.6.2-6.5 2.8-14.2-7-11.2-20.7 6.5-20.5 35.3-19.6 50.2M179.1 75.8l-.8-.7a27 27 0 0 1-3.3-2.7l-3.6-3.8-3.3-3.3-1.9-2.4-.7-1.4c-.3-.6-5.2-1.3-4.7-2 .8-1 2.7-2 3.1-3.2 2.2-6.3 3.2-31.7 3.5-38.2.7-16.6 15.3.8 17.8 7.5 7.4 19.4 3 33.6-6 50.2"/><path fill="#f1e6d3" d="M159.3 139.6c0-9.6-1.2-13.4-6.6-18.1-3.3-3-7.2-4-13.4-4a17.7 17.7 0 0 0-14 5.2c-4.8 5-6.1 8-6.1 17.6 0 5.2 5.5 16.6 7.2 19.3 2.8 4.7 7.9 6.3 12.9 6 5 .3 10-1.3 12.8-6a55 55 0 0 0 7.2-20"/><path fill="#f1d7d4" d="M95.7 71c-1.3-11.1-5-31.1 8-43 1.4-1.3 1.8 3.2 2 5 .4 2.4 0 9.5 0 12 .2 4.7 1.1 7.1.7 9.3-1.3 5.8-2.3 5.4-3.5 9-2.3 7-6.9 10.8-7.2 7.7M176.8 68.8c1.4 2.4 4.8-10.4 6-16 1-5.2 2.3-12.1.5-17.3-1-2.8-7-11-7.6-8.2-.3 1-.4 9.2-1.1 13.1-.8 4.8-2.3 9.6-2.3 14.5 0 11 3.2 11.4 4.5 14"/><path fill="#faeee0" d="M134 200.4c-.2.8-2.4 1.5-3.2 1.7-2 .6-3.6-.9-4.7-2.2-1.5-1.7-1.5-4.6-2.1-6.7-.4-1.2-2.5-1.4-3.2-.2-2.1 3.8-10.5-3.5-8.6-5.9 1.3-1.6-1.8-3-3-1.4-3.8 4.7 6.3 13.4 12.1 11 .3 1.2.5 2.4 1 3.5 1 2.2 3.2 3.6 5.4 4.8 3 1.6 8.8-1.2 9.7-4 .6-1.8-2.7-2.5-3.4-.6M160.7 172c.3 1.3.4 5.7-2 3.3-1-1-3-.4-3 1-.3 3-3.3 3-6 2.1-2-.7-3.1 2.2-1 2.9 3.8 1.3 8 .6 9.7-2.3 1.3.6 2.8.8 4-.4 2-2 2.3-4.7 1.7-7.2-.4-1.9-3.8-1.3-3.4.6M166.9 235.5c-1 1.9-2.6 1.7-4.4 1-1.3-.6-3 .3-2.5 1.7.8 2.6-2.6 3.4-4.9 2.5-2-.9-3.7 1.7-1.7 2.6 4.1 1.7 9.3.2 10-3.4 2.7.4 5.2-.3 6.5-2.9.9-1.8-2.1-3.3-3-1.5M140.2 92.2c-.4 2.6-5.3-.5-6.5-1.3-1-.7-2.5-.3-2.6 1-.2 1.6-2.4 1.1-3.4 1-2-.5-3.6-1.7-3.6-3.5 0-1.7 1-3.6 1.6-5.2.4-1-1.1-2.2-2.2-1.5-2 1.3-11.5 2.4-7.7-1.8 1.2-1.3-1-3.2-2.2-1.8-1.7 1.9-3 6.3.9 7.2 2 .5 4.9.5 7.3 0-1 3.2-1.2 6.3 3 8.4 3 1.4 6.9 1.4 8.6-.8 3.5 1.9 9 3.7 9.8-1 .2-1.7-2.7-2.4-3-.7"/><path fill="#494949" d="M123.8 152.9c5 .4 10.2 1.6 15.4 1.4 3.3-.1 6.7-.6 10-1 2.3-.4 5.2-.8 6.8-2.6.1 5.9-12 7.7-16.8 7.8a24 24 0 0 1-15.4-5.6"/><path fill="#494949" d="M137.6 140.7c-.6 3.7-.7 7.6-.4 11.3.1 1-.1 3.4 1.2 3.9 1 .4 2.4-.4 2.5-1.4.3-1.6-.4-3.6-.4-5.3 0-1.9 0-3.8.2-5.8.1-1.1.8-2.7-.6-3.5-1-.6-2.3-.3-2.5.8"/><path fill="#494949" d="M147.5 131.6c-3 .1-5.9 1.8-8.2 3.5-2-1.4-5.2-2.7-7.9-2-1.5.5-.1 1 .5 1.4 1.2.8 2.2 1.8 3.1 3 1.4 1.5 2.6 3.3 4 4.8 1-.7 2-1.4 2.8-2.2l4.2-5.6 1-1.4c.4-.4 1.5-1.2.5-1.5"/><path fill="#2c3844" d="M108.7 110.8c1.5-4 3.1-9 7.3-8.1 3.1.7 7.3 11.2 4.6 10.1-1.4-.5-2.6-5.3-5.3-6-1.8-.3-4.2 5.7-6.5 6.3-1.2.3-.6-1.3-.1-2.3M153.3 110.8c1.5-4 3.2-9 7.3-8.1 3.2.7 7.4 11.2 4.7 10.1-1.5-.5-2.6-5.3-5.4-6-1.7-.3-4.1 5.7-6.5 6.3-1 .3-.5-1.3 0-2.3"/><g fill="CurrentColor" stroke-width="29.1" aria-label="Vikunja" font-family="Quicksand" font-size="1163.4" font-weight="700" letter-spacing="0" style="line-height:1.25" word-spacing="0"><path d="M3302.3-1549.4c3.4 2.3 8.1 5.8 10.4 7h1.2s1.2 0 1.2 1.1c2.3 0 7 1.2 9.3 2.4h2.3c3.5 1.1 8.1 1.1 11.6 1.1s7 0 11.7-1.1h2.3c3.5-1.2 5.8-2.4 9.3-2.4 1.1-1.1 1.1-1.1 2.3-1.1 3.5-1.2 7-4.7 9.3-5.8l2.3-1.2c2.4-2.3 4.7-3.5 7-5.8 1.2-1.2 1.2-1.2 2.4-3.5 1.1-2.3 4.6-4.7 5.8-7 1.1 0 1.1 0 1.1-1.2 2.4-2.3 3.5-7 4.7-9.3l287.3-679.4a63.9 63.9 0 0 0-34.9-82.6 64 64 0 0 0-83.7 33.8l-226.9 538.6-226.8-538.6a62.7 62.7 0 0 0-82.6-33.8 62 62 0 0 0-35 82.6l285 679.4c2.4 2.4 4.7 7 5.9 9.3 0 1.2 1.2 1.2 1.2 1.2 1.1 2.3 3.5 4.7 5.8 7 0 2.3 1.1 2.3 1.1 3.5 3.5 2.3 5.9 3.5 8.2 5.8h1.2zM3936.8-2118.3a62.1 62.1 0 0 0-62.8 64v453.7c0 35 28 62.8 62.8 62.8 36.1 0 62.9-27.9 62.9-62.8v-453.7c0-37.2-26.8-64-62.9-64zm62.9-171a61.8 61.8 0 0 0-62.9-62.8c-34.9 0-62.8 27.9-62.8 62.8v24.4c0 35 28 64 62.8 64 36.1 0 62.9-29 62.9-64zM4264-1537.8c36.1 0 65.2-29 65.2-64V-1704l64-64 171 207a61.7 61.7 0 0 0 48.9 23.3c14 0 29-4.6 40.7-15.1a64.5 64.5 0 0 0 9.3-90.7L4483.9-1859l174.5-174.5a63.2 63.2 0 0 0 0-90.7 65.3 65.3 0 0 0-90.7 0l-238.5 238.5v-402.6c0-34.9-29-64-65.2-64-36 0-64 29.1-64 64v686.4c0 35 28 64 64 64zM5316.6-1779.8v-278c0-32.6-30.2-61.7-62.8-61.7a61 61 0 0 0-60.5 61.7v278a120.7 120.7 0 0 1-122.1 118.7 117.7 117.7 0 0 1-118.7-118.7v-278a62 62 0 0 0-61.6-61.7c-33.8 0-61.7 29.1-61.7 61.7v278c0 132.7 109.3 242 242 242 133.8 0 245.4-109.3 245.4-242zM5769-2119.5c-45.3 0-88.4 14-123.3 36.1a63 63 0 0 0-57-36c-34.9 0-61.7 27.9-61.7 61.6v458.3a61.3 61.3 0 0 0 61.7 61.7 63.6 63.6 0 0 0 61.7-50c2.3-4.7 2.3-8.1 2.3-11.6v-278c0-65.2 51.2-117.6 116.3-117.6 66.3 0 121 52.4 121 117.5v278c0 33.8 29.1 61.7 61.7 61.7a61 61 0 0 0 60.5-61.6v-278c0-131.5-108.2-242-243.2-242zM6255.6-2199.7a64.3 64.3 0 0 0 62.9-64v-23.3c0-37.2-28-64-62.9-64a63 63 0 0 0-64 64v23.3c0 33.7 29.1 64 64 64zm-65.1 867.8c69.8 0 125.6-57 125.6-125.6v-598c0-36-26.7-64-62.8-64-33.7 0-62.8 28-62.8 64v598c-37.2 0-64 28-64 61.7 0 37.2 26.8 64 64 64zM6998.5-2056.6c0-35-28-62.9-61.7-62.9-30.2 0-53.5 22.1-60.5 51.2a265.2 265.2 0 0 0-154.7-51.2 268 268 0 0 0-197.8 87.3c-50 52.3-79 124.5-79 204.7 0 79.2 29 151.3 79 204.8 50 52.4 118.7 85 197.8 85 58.2 0 110.5-18.7 154.7-50.1 7 28 30.3 50 60.5 50a62 62 0 0 0 61.7-61.6v-228zm-168.7 349c-28 29-67.5 45.3-108.2 45.3-41.9 0-81.4-16.2-108.2-45.3-28-30.3-44.2-72.2-44.2-119.9 0-48.8 16.3-90.7 44.2-119.8a140.3 140.3 0 0 1 108.2-47.7c40.7 0 80.3 16.3 108.2 47.7 28 29.1 45.4 71 45.4 119.8 0 47.7-17.5 89.6-45.4 119.9z" style="-inkscape-font-specification:'Quicksand Bold'" transform="translate(-63.6 371.7) scale(.12982)"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/logo-full.svg b/src/assets/logo-full.svg
index c5e728a3a..20b6ae130 100644
--- a/src/assets/logo-full.svg
+++ b/src/assets/logo-full.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 872.6 256.8" width="872.6" height="256.8" xml:space="preserve"><path fill="#196aff" d="M226.9 46.8A126 126 0 0 0 128 0a127.2 127.2 0 0 0-99 46.8A127 127 0 0 0 0 128c0 34.2 13.3 66.3 37.5 90.5A127.2 127.2 0 0 0 128 256c34.2 0 66.3-13.3 90.5-37.5A127.2 127.2 0 0 0 256 128a130 130 0 0 0-29.1-81.2"/><path fill="#fff" d="M167.6 162.1c4.8-14 12.6-18.2 13.6-39.8.4-7.5-2-31.6-2-31.6s3.8-9.6-3.4-20.3c-11.1-16.7-34-17.8-46-17.8-12.1 0-34.8 1.1-45.9 17.8-7.2 10.7-3.4 20.3-3.4 20.3L78.2 114a60.8 60.8 0 0 0 3.8 28c1.9 5.3 4.9 10.7 7.2 16.1 6.9 16.5 1.1 36.8 1.5 54.6.3 12.6-2.7 25.3-3.9 37.6a127.6 127.6 0 0 0 87.2-1.7c-2.7-15.4-5.9-30-6.4-35.6-1.4-16.9-5.5-34.7 0-50.9"/><path fill="#fff" d="M79.5 64c.2 2.4.4 5 1.1 7.4.2.8.6 2.6 1.5 3 1.2.3 3.5-1.2 4.3-1.8l4.9-3.7 3.2-2.2c1.1-.9 2-2 2.9-3 1.1-1.2 2-2.5 2.8-3.9.7-1 5-1.8 5.7-2.8.7-1.1 0-2.5 0-3.8 0-10 .7-19.7 1-29.4.2-6.6 2.8-14.5-7.2-11.4C78.3 19 78.6 48.5 79.5 63.9M173.7 77.8l-.9-.6c-1.2-1-2.3-1.8-3.3-2.9l-3.8-3.8-3.3-3.5-2-2.4-.7-1.4c-.3-.7-5.3-1.4-4.8-2 .8-1.1 2.7-2 3.2-3.3 2.3-6.5 3.3-32.6 3.5-39.3.8-17 15.7.8 18.3 7.7 7.6 20 3.1 34.5-6.1 51.5"/><path fill="#f1e6d3" d="M153.3 143.4c0-9.9-1.2-13.8-6.7-18.6-3.4-3-7.4-4.2-13.8-4-6.4-.2-11 1.7-14.3 5.2-5 5.2-6.4 8.3-6.4 18.1 0 5.3 5.7 17 7.5 19.8 2.8 4.8 8 6.5 13.2 6.2 5.1.3 10.3-1.4 13.2-6.2a56.4 56.4 0 0 0 7.3-20.5"/><path fill="#f1d7d4" d="M88 73c-1.3-11.5-5.1-32 8.2-44.2 1.5-1.4 1.9 3.2 2.1 5 .4 2.6 0 9.9 0 12.4.2 4.8 1.2 7.3.7 9.5-1.3 6-2.3 5.7-3.5 9.3-2.5 7.3-7.1 11.1-7.5 8M171.4 70.7c1.3 2.4 4.9-10.7 6-16.4 1-5.4 2.4-12.5.5-17.9-1-2.8-7-11.2-7.7-8.4-.3 1.2-.5 9.5-1.2 13.5-.8 5-2.3 9.9-2.4 14.9 0 11.3 3.4 11.7 4.8 14.3"/><path fill="#faeee0" d="M127.4 205.8c-.3.9-2.5 1.5-3.3 1.8-2 .6-3.8-1-4.9-2.3-1.5-1.8-1.5-4.7-2.1-6.8-.4-1.3-2.6-1.5-3.3-.3-2.2 4-10.8-3.5-8.8-6 1.3-1.7-1.9-3.1-3.2-1.5-3.8 4.8 6.6 13.8 12.5 11.4l1 3.5c1 2.3 3.3 3.7 5.5 5 3.1 1.6 9.1-1.3 10-4.1.7-2-2.8-2.6-3.4-.7M154.8 176.7c.3 1.3.4 5.8-2.1 3.4-1-1-3-.4-3.1.9-.2 3.1-3.3 3.2-6 2.2-2.2-.7-3.3 2.3-1.2 3 4 1.4 8.3.6 10-2.4 1.3.7 2.8.8 4-.3 2.2-2 2.5-4.9 1.9-7.5-.5-2-4-1.3-3.5.7M161.1 241.9c-1 1.9-2.6 1.8-4.5 1-1.3-.6-3 .3-2.6 1.7.9 2.7-2.6 3.5-5 2.6-2-.9-3.8 1.8-1.7 2.7 4.2 1.7 9.6.2 10.3-3.5 2.7.4 5.3-.3 6.6-3 1-1.8-2.2-3.4-3-1.5M133.8 94.7c-.5 2.7-5.5-.5-6.8-1.3-1-.8-2.5-.3-2.6 1-.2 1.6-2.5 1.1-3.5 1-2-.5-3.7-1.7-3.7-3.5s1-3.7 1.6-5.4c.4-1.1-1.1-2.3-2.2-1.6-2 1.3-11.9 2.5-8-1.8 1.3-1.3-1-3.3-2.2-1.9-1.8 2-3 6.5.9 7.5 2 .5 5 .4 7.6-.1-1 3.4-1.3 6.5 3 8.6 3 1.5 7 1.5 8.8-.8 3.6 2 9.3 3.9 10-1 .3-1.7-2.7-2.5-3-.7"/><path fill="#494949" d="M116.9 157c5.2.5 10.5 1.7 15.8 1.5 3.3-.2 6.8-.6 10.2-1.1 2.4-.4 5.4-.8 7-2.6.2 6-12.3 7.9-17.2 8-5.6.1-11.9-2.3-15.8-5.8"/><path fill="#494949" d="M131 144.5c-.6 3.9-.7 7.8-.3 11.6 0 1-.2 3.5 1.2 4 1 .4 2.4-.4 2.6-1.4.3-1.6-.4-3.7-.5-5.4 0-2 0-4 .2-6 .2-1.2.8-2.8-.5-3.6-1-.6-2.5-.4-2.7.8"/><path fill="#494949" d="M141.3 135.1c-3.2.2-6.1 2-8.5 3.6-2.1-1.4-5.4-2.7-8-2-1.7.5-.2 1 .4 1.4a15 15 0 0 1 3.2 3c1.4 1.7 2.6 3.5 4 5 1.1-.6 2-1.4 3-2.2l4.3-5.7 1-1.5c.4-.5 1.5-1.2.6-1.6"/><path fill="#2c3844" d="M101.3 113.8c1.6-4 3.3-9.2 7.5-8.3 3.3.6 7.6 11.4 4.8 10.4-1.5-.6-2.7-5.5-5.5-6.1-1.8-.4-4.3 5.8-6.7 6.4-1.1.3-.5-1.4 0-2.4M147.2 113.8c1.6-4 3.2-9.2 7.5-8.3 3.2.6 7.6 11.4 4.8 10.4-1.5-.6-2.7-5.5-5.5-6.1-1.8-.4-4.3 5.8-6.7 6.4-1.1.3-.6-1.4-.1-2.4"/><g fill="#252626" stroke-width="29.1" aria-label="Vikunja" font-family="Quicksand" font-size="1163.4" font-weight="700" letter-spacing="0" style="line-height:1.25" word-spacing="0"><path d="M3302.3-1549.4c3.4 2.3 8.1 5.8 10.4 7h1.2s1.2 0 1.2 1.1c2.3 0 7 1.2 9.3 2.4h2.3c3.5 1.1 8.1 1.1 11.6 1.1s7 0 11.7-1.1h2.3c3.5-1.2 5.8-2.4 9.3-2.4 1.1-1.1 1.1-1.1 2.3-1.1 3.5-1.2 7-4.7 9.3-5.8l2.3-1.2c2.4-2.3 4.7-3.5 7-5.8 1.2-1.2 1.2-1.2 2.4-3.5 1.1-2.3 4.6-4.7 5.8-7 1.1 0 1.1 0 1.1-1.2 2.4-2.3 3.5-7 4.7-9.3l287.3-679.4a63.9 63.9 0 0 0-34.9-82.6 64 64 0 0 0-83.7 33.8l-226.9 538.6-226.8-538.6a62.7 62.7 0 0 0-82.6-33.8 62 62 0 0 0-35 82.6l285 679.4c2.4 2.4 4.7 7 5.9 9.3 0 1.2 1.2 1.2 1.2 1.2 1.1 2.3 3.5 4.7 5.8 7 0 2.3 1.1 2.3 1.1 3.5 3.5 2.3 5.9 3.5 8.2 5.8h1.2zM3936.8-2118.3a62.1 62.1 0 0 0-62.8 64v453.7c0 35 28 62.8 62.8 62.8 36.1 0 62.9-27.9 62.9-62.8v-453.7c0-37.2-26.8-64-62.9-64zm62.9-171a61.8 61.8 0 0 0-62.9-62.8c-34.9 0-62.8 27.9-62.8 62.8v24.4c0 35 28 64 62.8 64 36.1 0 62.9-29 62.9-64zM4264-1537.8c36.1 0 65.2-29 65.2-64V-1704l64-64 171 207a61.7 61.7 0 0 0 48.9 23.3c14 0 29-4.6 40.7-15.1a64.5 64.5 0 0 0 9.3-90.7L4483.9-1859l174.5-174.5a63.2 63.2 0 0 0 0-90.7 65.3 65.3 0 0 0-90.7 0l-238.5 238.5v-402.6c0-34.9-29-64-65.2-64-36 0-64 29.1-64 64v686.4c0 35 28 64 64 64zM5316.6-1779.8v-278c0-32.6-30.2-61.7-62.8-61.7a61 61 0 0 0-60.5 61.7v278a120.7 120.7 0 0 1-122.1 118.7 117.7 117.7 0 0 1-118.7-118.7v-278a62 62 0 0 0-61.6-61.7c-33.8 0-61.7 29.1-61.7 61.7v278c0 132.7 109.3 242 242 242 133.8 0 245.4-109.3 245.4-242zM5769-2119.5c-45.3 0-88.4 14-123.3 36.1a63 63 0 0 0-57-36c-34.9 0-61.7 27.9-61.7 61.6v458.3a61.3 61.3 0 0 0 61.7 61.7 63.6 63.6 0 0 0 61.7-50c2.3-4.7 2.3-8.1 2.3-11.6v-278c0-65.2 51.2-117.6 116.3-117.6 66.3 0 121 52.4 121 117.5v278c0 33.8 29.1 61.7 61.7 61.7a61 61 0 0 0 60.5-61.6v-278c0-131.5-108.2-242-243.2-242zM6255.6-2199.7a64.3 64.3 0 0 0 62.9-64v-23.3c0-37.2-28-64-62.9-64a63 63 0 0 0-64 64v23.3c0 33.7 29.1 64 64 64zm-65.1 867.8c69.8 0 125.6-57 125.6-125.6v-598c0-36-26.7-64-62.8-64-33.7 0-62.8 28-62.8 64v598c-37.2 0-64 28-64 61.7 0 37.2 26.8 64 64 64zM6998.5-2056.6c0-35-28-62.9-61.7-62.9-30.2 0-53.5 22.1-60.5 51.2a265.2 265.2 0 0 0-154.7-51.2 268 268 0 0 0-197.8 87.3c-50 52.3-79 124.5-79 204.7 0 79.2 29 151.3 79 204.8 50 52.4 118.7 85 197.8 85 58.2 0 110.5-18.7 154.7-50.1 7 28 30.3 50 60.5 50a62 62 0 0 0 61.7-61.6v-228zm-168.7 349c-28 29-67.5 45.3-108.2 45.3-41.9 0-81.4-16.2-108.2-45.3-28-30.3-44.2-72.2-44.2-119.9 0-48.8 16.3-90.7 44.2-119.8a140.3 140.3 0 0 1 108.2-47.7c40.7 0 80.3 16.3 108.2 47.7 28 29.1 45.4 71 45.4 119.8 0 47.7-17.5 89.6-45.4 119.9z" style="-inkscape-font-specification:'Quicksand Bold'" transform="matrix(.13333 0 0 .13333 -75.5 381.8)"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 872.6 256.8" width="872.6" height="256.8" xml:space="preserve"><path fill="#196aff" d="M226.9 46.8A126 126 0 0 0 128 0a127.2 127.2 0 0 0-99 46.8A127 127 0 0 0 0 128c0 34.2 13.3 66.3 37.5 90.5A127.2 127.2 0 0 0 128 256c34.2 0 66.3-13.3 90.5-37.5A127.2 127.2 0 0 0 256 128a130 130 0 0 0-29.1-81.2"/><path fill="#fff" d="M167.6 162.1c4.8-14 12.6-18.2 13.6-39.8.4-7.5-2-31.6-2-31.6s3.8-9.6-3.4-20.3c-11.1-16.7-34-17.8-46-17.8-12.1 0-34.8 1.1-45.9 17.8-7.2 10.7-3.4 20.3-3.4 20.3L78.2 114a60.8 60.8 0 0 0 3.8 28c1.9 5.3 4.9 10.7 7.2 16.1 6.9 16.5 1.1 36.8 1.5 54.6.3 12.6-2.7 25.3-3.9 37.6a127.6 127.6 0 0 0 87.2-1.7c-2.7-15.4-5.9-30-6.4-35.6-1.4-16.9-5.5-34.7 0-50.9"/><path fill="#fff" d="M79.5 64c.2 2.4.4 5 1.1 7.4.2.8.6 2.6 1.5 3 1.2.3 3.5-1.2 4.3-1.8l4.9-3.7 3.2-2.2c1.1-.9 2-2 2.9-3 1.1-1.2 2-2.5 2.8-3.9.7-1 5-1.8 5.7-2.8.7-1.1 0-2.5 0-3.8 0-10 .7-19.7 1-29.4.2-6.6 2.8-14.5-7.2-11.4C78.3 19 78.6 48.5 79.5 63.9M173.7 77.8l-.9-.6c-1.2-1-2.3-1.8-3.3-2.9l-3.8-3.8-3.3-3.5-2-2.4-.7-1.4c-.3-.7-5.3-1.4-4.8-2 .8-1.1 2.7-2 3.2-3.3 2.3-6.5 3.3-32.6 3.5-39.3.8-17 15.7.8 18.3 7.7 7.6 20 3.1 34.5-6.1 51.5"/><path fill="#f1e6d3" d="M153.3 143.4c0-9.9-1.2-13.8-6.7-18.6-3.4-3-7.4-4.2-13.8-4-6.4-.2-11 1.7-14.3 5.2-5 5.2-6.4 8.3-6.4 18.1 0 5.3 5.7 17 7.5 19.8 2.8 4.8 8 6.5 13.2 6.2 5.1.3 10.3-1.4 13.2-6.2a56.4 56.4 0 0 0 7.3-20.5"/><path fill="#f1d7d4" d="M88 73c-1.3-11.5-5.1-32 8.2-44.2 1.5-1.4 1.9 3.2 2.1 5 .4 2.6 0 9.9 0 12.4.2 4.8 1.2 7.3.7 9.5-1.3 6-2.3 5.7-3.5 9.3-2.5 7.3-7.1 11.1-7.5 8M171.4 70.7c1.3 2.4 4.9-10.7 6-16.4 1-5.4 2.4-12.5.5-17.9-1-2.8-7-11.2-7.7-8.4-.3 1.2-.5 9.5-1.2 13.5-.8 5-2.3 9.9-2.4 14.9 0 11.3 3.4 11.7 4.8 14.3"/><path fill="#faeee0" d="M127.4 205.8c-.3.9-2.5 1.5-3.3 1.8-2 .6-3.8-1-4.9-2.3-1.5-1.8-1.5-4.7-2.1-6.8-.4-1.3-2.6-1.5-3.3-.3-2.2 4-10.8-3.5-8.8-6 1.3-1.7-1.9-3.1-3.2-1.5-3.8 4.8 6.6 13.8 12.5 11.4l1 3.5c1 2.3 3.3 3.7 5.5 5 3.1 1.6 9.1-1.3 10-4.1.7-2-2.8-2.6-3.4-.7M154.8 176.7c.3 1.3.4 5.8-2.1 3.4-1-1-3-.4-3.1.9-.2 3.1-3.3 3.2-6 2.2-2.2-.7-3.3 2.3-1.2 3 4 1.4 8.3.6 10-2.4 1.3.7 2.8.8 4-.3 2.2-2 2.5-4.9 1.9-7.5-.5-2-4-1.3-3.5.7M161.1 241.9c-1 1.9-2.6 1.8-4.5 1-1.3-.6-3 .3-2.6 1.7.9 2.7-2.6 3.5-5 2.6-2-.9-3.8 1.8-1.7 2.7 4.2 1.7 9.6.2 10.3-3.5 2.7.4 5.3-.3 6.6-3 1-1.8-2.2-3.4-3-1.5M133.8 94.7c-.5 2.7-5.5-.5-6.8-1.3-1-.8-2.5-.3-2.6 1-.2 1.6-2.5 1.1-3.5 1-2-.5-3.7-1.7-3.7-3.5s1-3.7 1.6-5.4c.4-1.1-1.1-2.3-2.2-1.6-2 1.3-11.9 2.5-8-1.8 1.3-1.3-1-3.3-2.2-1.9-1.8 2-3 6.5.9 7.5 2 .5 5 .4 7.6-.1-1 3.4-1.3 6.5 3 8.6 3 1.5 7 1.5 8.8-.8 3.6 2 9.3 3.9 10-1 .3-1.7-2.7-2.5-3-.7"/><path fill="#494949" d="M116.9 157c5.2.5 10.5 1.7 15.8 1.5 3.3-.2 6.8-.6 10.2-1.1 2.4-.4 5.4-.8 7-2.6.2 6-12.3 7.9-17.2 8-5.6.1-11.9-2.3-15.8-5.8"/><path fill="#494949" d="M131 144.5c-.6 3.9-.7 7.8-.3 11.6 0 1-.2 3.5 1.2 4 1 .4 2.4-.4 2.6-1.4.3-1.6-.4-3.7-.5-5.4 0-2 0-4 .2-6 .2-1.2.8-2.8-.5-3.6-1-.6-2.5-.4-2.7.8"/><path fill="#494949" d="M141.3 135.1c-3.2.2-6.1 2-8.5 3.6-2.1-1.4-5.4-2.7-8-2-1.7.5-.2 1 .4 1.4a15 15 0 0 1 3.2 3c1.4 1.7 2.6 3.5 4 5 1.1-.6 2-1.4 3-2.2l4.3-5.7 1-1.5c.4-.5 1.5-1.2.6-1.6"/><path fill="#2c3844" d="M101.3 113.8c1.6-4 3.3-9.2 7.5-8.3 3.3.6 7.6 11.4 4.8 10.4-1.5-.6-2.7-5.5-5.5-6.1-1.8-.4-4.3 5.8-6.7 6.4-1.1.3-.5-1.4 0-2.4M147.2 113.8c1.6-4 3.2-9.2 7.5-8.3 3.2.6 7.6 11.4 4.8 10.4-1.5-.6-2.7-5.5-5.5-6.1-1.8-.4-4.3 5.8-6.7 6.4-1.1.3-.6-1.4-.1-2.4"/><g fill="currentColor" stroke-width="29.1" aria-label="Vikunja" font-family="Quicksand" font-size="1163.4" font-weight="700" letter-spacing="0" style="line-height:1.25" word-spacing="0"><path d="M3302.3-1549.4c3.4 2.3 8.1 5.8 10.4 7h1.2s1.2 0 1.2 1.1c2.3 0 7 1.2 9.3 2.4h2.3c3.5 1.1 8.1 1.1 11.6 1.1s7 0 11.7-1.1h2.3c3.5-1.2 5.8-2.4 9.3-2.4 1.1-1.1 1.1-1.1 2.3-1.1 3.5-1.2 7-4.7 9.3-5.8l2.3-1.2c2.4-2.3 4.7-3.5 7-5.8 1.2-1.2 1.2-1.2 2.4-3.5 1.1-2.3 4.6-4.7 5.8-7 1.1 0 1.1 0 1.1-1.2 2.4-2.3 3.5-7 4.7-9.3l287.3-679.4a63.9 63.9 0 0 0-34.9-82.6 64 64 0 0 0-83.7 33.8l-226.9 538.6-226.8-538.6a62.7 62.7 0 0 0-82.6-33.8 62 62 0 0 0-35 82.6l285 679.4c2.4 2.4 4.7 7 5.9 9.3 0 1.2 1.2 1.2 1.2 1.2 1.1 2.3 3.5 4.7 5.8 7 0 2.3 1.1 2.3 1.1 3.5 3.5 2.3 5.9 3.5 8.2 5.8h1.2zM3936.8-2118.3a62.1 62.1 0 0 0-62.8 64v453.7c0 35 28 62.8 62.8 62.8 36.1 0 62.9-27.9 62.9-62.8v-453.7c0-37.2-26.8-64-62.9-64zm62.9-171a61.8 61.8 0 0 0-62.9-62.8c-34.9 0-62.8 27.9-62.8 62.8v24.4c0 35 28 64 62.8 64 36.1 0 62.9-29 62.9-64zM4264-1537.8c36.1 0 65.2-29 65.2-64V-1704l64-64 171 207a61.7 61.7 0 0 0 48.9 23.3c14 0 29-4.6 40.7-15.1a64.5 64.5 0 0 0 9.3-90.7L4483.9-1859l174.5-174.5a63.2 63.2 0 0 0 0-90.7 65.3 65.3 0 0 0-90.7 0l-238.5 238.5v-402.6c0-34.9-29-64-65.2-64-36 0-64 29.1-64 64v686.4c0 35 28 64 64 64zM5316.6-1779.8v-278c0-32.6-30.2-61.7-62.8-61.7a61 61 0 0 0-60.5 61.7v278a120.7 120.7 0 0 1-122.1 118.7 117.7 117.7 0 0 1-118.7-118.7v-278a62 62 0 0 0-61.6-61.7c-33.8 0-61.7 29.1-61.7 61.7v278c0 132.7 109.3 242 242 242 133.8 0 245.4-109.3 245.4-242zM5769-2119.5c-45.3 0-88.4 14-123.3 36.1a63 63 0 0 0-57-36c-34.9 0-61.7 27.9-61.7 61.6v458.3a61.3 61.3 0 0 0 61.7 61.7 63.6 63.6 0 0 0 61.7-50c2.3-4.7 2.3-8.1 2.3-11.6v-278c0-65.2 51.2-117.6 116.3-117.6 66.3 0 121 52.4 121 117.5v278c0 33.8 29.1 61.7 61.7 61.7a61 61 0 0 0 60.5-61.6v-278c0-131.5-108.2-242-243.2-242zM6255.6-2199.7a64.3 64.3 0 0 0 62.9-64v-23.3c0-37.2-28-64-62.9-64a63 63 0 0 0-64 64v23.3c0 33.7 29.1 64 64 64zm-65.1 867.8c69.8 0 125.6-57 125.6-125.6v-598c0-36-26.7-64-62.8-64-33.7 0-62.8 28-62.8 64v598c-37.2 0-64 28-64 61.7 0 37.2 26.8 64 64 64zM6998.5-2056.6c0-35-28-62.9-61.7-62.9-30.2 0-53.5 22.1-60.5 51.2a265.2 265.2 0 0 0-154.7-51.2 268 268 0 0 0-197.8 87.3c-50 52.3-79 124.5-79 204.7 0 79.2 29 151.3 79 204.8 50 52.4 118.7 85 197.8 85 58.2 0 110.5-18.7 154.7-50.1 7 28 30.3 50 60.5 50a62 62 0 0 0 61.7-61.6v-228zm-168.7 349c-28 29-67.5 45.3-108.2 45.3-41.9 0-81.4-16.2-108.2-45.3-28-30.3-44.2-72.2-44.2-119.9 0-48.8 16.3-90.7 44.2-119.8a140.3 140.3 0 0 1 108.2-47.7c40.7 0 80.3 16.3 108.2 47.7 28 29.1 45.4 71 45.4 119.8 0 47.7-17.5 89.6-45.4 119.9z" style="-inkscape-font-specification:'Quicksand Bold'" transform="matrix(.13333 0 0 .13333 -75.5 381.8)"/></g></svg>
\ No newline at end of file
diff --git a/src/components/home/Logo.vue b/src/components/home/Logo.vue
index cea2d0f04..5a5612b46 100644
--- a/src/components/home/Logo.vue
+++ b/src/components/home/Logo.vue
@@ -7,5 +7,11 @@ const Logo = computed(() => new Date().getMonth() === 5 ? LogoFullPride : LogoFu
 </script>
 
 <template>
-	<Logo alt="Vikunja" />
-</template>
\ No newline at end of file
+	<Logo alt="Vikunja" class="logo" />
+</template>
+
+<style lang="scss" scoped>
+.logo {
+	color: var(--logo-text-color);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/home/MenuButton.vue b/src/components/home/MenuButton.vue
index 14a2e4699..ab012c92b 100644
--- a/src/components/home/MenuButton.vue
+++ b/src/components/home/MenuButton.vue
@@ -43,7 +43,7 @@ $size: $lineWidth + 1rem;
 		width: $lineWidth;
 		left: 50%;
 		transform: $transformX;
-		background-color: $grey-400;
+		background-color: var(--grey-400);
 		border-radius: 2px;
 		transition: all $transition;
 	}
@@ -62,7 +62,7 @@ $size: $lineWidth + 1rem;
 	&:focus {
 		&::before,
 		&::after {
-			background-color: $grey-600;
+			background-color: var(--grey-600);
 		}
 
 		&::before {
diff --git a/src/components/home/PoweredByLink.vue b/src/components/home/PoweredByLink.vue
index e174ba691..06ff3b111 100644
--- a/src/components/home/PoweredByLink.vue
+++ b/src/components/home/PoweredByLink.vue
@@ -10,7 +10,7 @@ import {POWERED_BY as poweredByUrl} from '@/urls'
 
 <style lang="scss">
 .menu-bottom-link {
-	color: $grey-300;
+	color: var(--grey-300);
 	text-align: center;
 	display: block;
 	padding-top: 1rem;
diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index 66c5e1a7e..7a2bd2427 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -144,7 +144,7 @@ export default {
 	justify-content: center;
 	align-items: center;
 	font-size: 2rem;
-	color: $grey-400;
+	color: var(--grey-400);
 	line-height: 1;
 	transition: all $transition;
 
@@ -155,7 +155,7 @@ export default {
 	&:hover,
 	&:focus {
 		height: 1rem;
-		color: $grey-600;
+		color: var(--grey-600);
 	}
 }
 
@@ -191,7 +191,7 @@ export default {
 	}
 
     .card {
-      background: $white;
+      background: var(--white);
     }
   }
 }
@@ -220,7 +220,7 @@ export default {
 	right: 1rem;
 	z-index: 4500; // The modal has a z-index of 4000
 
-	color: $grey-500;
+	color: var(--grey-500);
 	transition: color $transition;
 	
 	@media screen and (max-width: $tablet) {
diff --git a/src/components/home/contentLinkShare.vue b/src/components/home/contentLinkShare.vue
index 355b6d35f..020352815 100644
--- a/src/components/home/contentLinkShare.vue
+++ b/src/components/home/contentLinkShare.vue
@@ -57,11 +57,11 @@ export default {
 }
 
 .title {
-    text-shadow: 0 0 1rem $white;
+	text-shadow: 0 0 1rem var(--white);
 }
 
 // FIXME: this should be defined somewhere deep
 .link-share-view .card {
-    background-color: $white;
+    background-color: var(--white);
 }
 </style>
diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue
index 5f9d1a21e..841170275 100644
--- a/src/components/home/navigation.vue
+++ b/src/components/home/navigation.vue
@@ -280,8 +280,8 @@ export default {
 
 <style lang="scss" scoped>
 $navbar-padding: 2rem;
-$vikunja-nav-background: $light-background;
-$vikunja-nav-color: $grey-700;
+$vikunja-nav-background: var(--site-background);
+$vikunja-nav-color: var(--grey-700);
 $vikunja-nav-selected-width: 0.4rem;
 
 .namespace-container {
@@ -349,12 +349,12 @@ $vikunja-nav-selected-width: 0.4rem;
 				opacity: 0;
 
 				&:hover {
-					color: $orange;
+					color: var(--warning);
 				}
 
 				&.is-favorite {
 					opacity: 1;
-					color: $orange;
+					color: var(--warning);
 				}
 			}
 
@@ -436,7 +436,7 @@ $vikunja-nav-selected-width: 0.4rem;
 				align-items: center;
 
 				&:hover {
-					background: $white;
+					background: var(--white);
 				}
 
 				:deep(.dropdown-trigger) {
@@ -456,7 +456,7 @@ $vikunja-nav-selected-width: 0.4rem;
 			}
 
 			.ghost {
-				background: $grey-200;
+				background: var(--grey-200);
 
 				* {
 					opacity: 0;
@@ -496,16 +496,16 @@ $vikunja-nav-selected-width: 0.4rem;
 				}
 
 				&.router-link-exact-active {
-					color: $primary;
-					border-left: $vikunja-nav-selected-width solid $primary;
+					color: var(--primary);
+					border-left: $vikunja-nav-selected-width solid var(--primary);
 
 					.icon {
-						color: $primary;
+						color: var(--primary);
 					}
 				}
 
 				&:hover {
-					border-left: $vikunja-nav-selected-width solid $primary;
+					border-left: $vikunja-nav-selected-width solid var(--primary);
 				}
 			}
 		}
@@ -526,7 +526,7 @@ $vikunja-nav-selected-width: 0.4rem;
 		}
 
 		.icon {
-			color: $grey-400 !important;
+			color: var(--grey-400) !important;
 		}
 	}
 
diff --git a/src/components/home/topNavigation.vue b/src/components/home/topNavigation.vue
index 034ba3f6e..7e427a30c 100644
--- a/src/components/home/topNavigation.vue
+++ b/src/components/home/topNavigation.vue
@@ -5,7 +5,7 @@
 		class="navbar main-theme is-fixed-top"
 		role="navigation"
 	>
-		<router-link :to="{name: 'home'}" class="navbar-item logo">
+		<router-link :to="{name: 'home'}" class="logo-link">
 			<Logo width="164" height="48"/>
 		</router-link>
 		<MenuButton class="menu-button"/>
@@ -137,13 +137,18 @@ export default {
 
 <style lang="scss" scoped>
 $vikunja-nav-logo-full-width: 164px;
+$user-dropdown-width-mobile: 5rem;
+
+$hamburger-menu-icon-spacing: 1rem;
+$hamburger-menu-icon-width: 28px;
 
 .navbar {
 	z-index: 4 !important;
 }
 
-.logo {
+.logo-link {
 	display: none;
+	padding: 0.5rem 0.75rem;
 
 	@media screen and (min-width: $tablet) {
 		align-self: stretch;
@@ -164,7 +169,7 @@ $vikunja-nav-logo-full-width: 164px;
 }
 
 .navbar.main-theme {
-	background: $light-background;
+	background: var(--site-background);
 	z-index: 5 !important;
 	justify-content: space-between;
 	align-items: center;
@@ -219,7 +224,7 @@ $vikunja-nav-logo-full-width: 164px;
 	:deep() {
 		.trigger-button {
 			cursor: pointer;
-			color: $grey-400;
+			color: var(--grey-400);
 			padding: .5rem;
 			font-size: 1.25rem;
 			position: relative;
@@ -278,7 +283,7 @@ $vikunja-nav-logo-full-width: 164px;
 	}
 
 	:deep(.dropdown-trigger) {
-		color: $grey-400;
+		color: var(--grey-400);
 		margin-left: 1rem;
 		height: 1rem;
 		width: 1rem;
diff --git a/src/components/home/update.vue b/src/components/home/update.vue
index d61070594..ff0a018e7 100644
--- a/src/components/home/update.vue
+++ b/src/components/home/update.vue
@@ -57,7 +57,7 @@ export default {
 	padding: 0 0 0 .5rem;
 	border-radius: $radius;
 	font-size: .9rem;
-	color: $grey-900;
+	color: var(--grey-900);
 	justify-content: space-between;
 
 	@media screen and (max-width: $desktop) {
diff --git a/src/components/input/button.vue b/src/components/input/button.vue
index 57890913b..831ef11a7 100644
--- a/src/components/input/button.vue
+++ b/src/components/input/button.vue
@@ -82,11 +82,11 @@ export default {
   font-size: 0.85rem;
   font-weight: bold;
   height: $button-height;
-  box-shadow: $shadow-sm;
+  box-shadow: var(--shadow-sm);
 
   &.is-hovered,
   &:hover {
-    box-shadow: $shadow-md;
+    box-shadow: var(--shadow-md);
   }
 
   &.fullheight {
@@ -99,11 +99,11 @@ export default {
   &:active,
   &:focus,
   &:focus:not(:active) {
-    box-shadow: $shadow-xs !important;
+    box-shadow: var(--shadow-xs) !important;
   }
 
   &.is-primary.is-outlined:hover {
-    color: $white;
+    color: var(--white);
   }
 
   &.is-small {
diff --git a/src/components/input/colorPicker.vue b/src/components/input/colorPicker.vue
index aef3850d3..6c5fddb40 100644
--- a/src/components/input/colorPicker.vue
+++ b/src/components/input/colorPicker.vue
@@ -134,7 +134,7 @@ export default {
 		height: $PICKER_SIZE;
 		overflow: hidden;
 		border-radius: 100%;
-		border: $BORDER_WIDTH solid $grey-300;
+		border: $BORDER_WIDTH solid var(--grey-300);
 		box-shadow: $shadow;
 
 		& > * {
diff --git a/src/components/input/datepicker.vue b/src/components/input/datepicker.vue
index 85ecd5513..414ecbbd6 100644
--- a/src/components/input/datepicker.vue
+++ b/src/components/input/datepicker.vue
@@ -258,7 +258,7 @@ export default {
 		position: absolute;
 		z-index: 99;
 		width: 320px;
-		background: $white;
+		background: var(--white);
 		border-radius: $radius;
 		box-shadow: $shadow;
 
@@ -272,7 +272,7 @@ export default {
 			padding: 0 .5rem;
 			width: 100%;
 			height: 2.25rem;
-			color: $text;
+			color: var(--text);
 			transition: all $transition;
 
 			&:first-child {
@@ -280,7 +280,7 @@ export default {
 			}
 
 			&:hover {
-				background: $light;
+				background: var(--light);
 			}
 
 			.text {
@@ -291,7 +291,7 @@ export default {
 				padding-right: .25rem;
 
 				.weekday {
-					color: $text-light;
+					color: var(--text-light);
 					text-transform: capitalize;
 				}
 			}
diff --git a/src/components/input/editor.vue b/src/components/input/editor.vue
index c782d68db..f282af486 100644
--- a/src/components/input/editor.vue
+++ b/src/components/input/editor.vue
@@ -338,13 +338,14 @@ $editor-border-color: #ddd;
 .CodeMirror {
 	padding: .5rem;
 	border: 1px solid $editor-border-color;
+	background: var(--white);
 
 	&-lines pre {
 		margin: 0 !important;
 	}
 
 	&-placeholder {
-		color: $grey-400 !important;
+		color: var(--grey-400) !important;
 		font-style: italic;
 	}
 }
@@ -383,7 +384,7 @@ $editor-border-color: #ddd;
 
 pre.CodeMirror-line {
 	margin-bottom: 0 !important;
-	color: $grey-700 !important;
+	color: var(--grey-700) !important;
 }
 
 .cm-header {
@@ -409,10 +410,10 @@ ul.actions {
 	}
 
 	&, a {
-		color: $grey-500;
+		color: var(--grey-500);
 
 		&.done-edit {
-			color: $primary;
+			color: var(--primary);
 		}
 	}
 
diff --git a/src/components/input/fancycheckbox.vue b/src/components/input/fancycheckbox.vue
index c882427b9..5280d1318 100644
--- a/src/components/input/fancycheckbox.vue
+++ b/src/components/input/fancycheckbox.vue
@@ -106,7 +106,7 @@ svg {
 }
 
 .check:hover svg {
-	stroke: $primary;
+	stroke: var(--primary);
 }
 
 .is-disabled .check:hover svg {
@@ -125,7 +125,7 @@ polyline {
 
 input[type=checkbox]:checked + .check {
 	svg {
-		stroke: $primary;
+		stroke: var(--primary);
 	}
 
 	path {
diff --git a/src/components/input/multiselect.vue b/src/components/input/multiselect.vue
index 43381081a..87e953de6 100644
--- a/src/components/input/multiselect.vue
+++ b/src/components/input/multiselect.vue
@@ -380,23 +380,23 @@ export default {
 
 	&.has-search-results .input-wrapper {
 		border-radius: $radius $radius 0 0;
-		border-color: $primary !important;
-		background: $white !important;
+		border-color: var(--primary) !important;
+		background: var(--white) !important;
 
 		&, &:focus-within {
-			border-bottom-color: $grey-200 !important;
+			border-bottom-color: var(--grey-200) !important;
 		}
 	}
 
 	.input-wrapper {
 		padding: 0;
-		background: $white !important;
-		border-color: $grey-200 !important;
+		background: var(--white) !important;
+		border-color: var(--grey-200) !important;
 		flex-wrap: wrap;
 		height: auto;
 
 		&:hover {
-			border-color: $grey-300 !important;
+			border-color: var(--grey-300) !important;
 		}
 
 		.input {
@@ -422,8 +422,8 @@ export default {
 		}
 
 		&:focus-within {
-			border-color: $primary !important;
-			background: $white !important;
+			border-color: var(--primary) !important;
+			background: var(--white) !important;
 		}
 
 		.loader {
@@ -432,9 +432,9 @@ export default {
 	}
 
 	.search-results {
-		background: $white;
+		background: var(--white);
 		border-radius: 0 0 $radius $radius;
-		border: 1px solid $primary;
+		border: 1px solid var(--primary);
 		border-top: none;
 
 		max-height: 50vh;
@@ -481,16 +481,16 @@ export default {
 			}
 
 			&:focus, &:hover {
-				background: $grey-100;
+				background: var(--grey-100);
 				box-shadow: none !important;
 
 				.hint-text {
-					color: $text;
+					color: var(--text);
 				}
 			}
 
 			&:active {
-				background: $grey-200;
+				background: var(--grey-200);
 			}
 		}
 	}
diff --git a/src/components/list/partials/list-card.vue b/src/components/list/partials/list-card.vue
index ff415fb26..ed727a100 100644
--- a/src/components/list/partials/list-card.vue
+++ b/src/components/list/partials/list-card.vue
@@ -86,11 +86,11 @@ export default {
   cursor: pointer;
   width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
   height: $list-height;
-  background: $white;
+  background: var(--white);
   margin: 0 $list-spacing $list-spacing 0;
   padding: 1rem;
   border-radius: $radius;
-  box-shadow: $shadow-sm;
+  box-shadow: var(--shadow-sm);
   transition: box-shadow $transition;
 
   display: flex;
@@ -98,13 +98,13 @@ export default {
   flex-wrap: wrap;
 
   &:hover {
-    box-shadow: $shadow-md;
+    box-shadow: var(--shadow-md);
   }
 
   &:active,
   &:focus,
   &:focus:not(:active) {
-    box-shadow: $shadow-xs !important;
+    box-shadow: var(--shadow-xs) !important;
   }
 
   @media screen and (min-width: $widescreen) {
@@ -158,7 +158,7 @@ export default {
     font-family: $vikunja-font;
     font-weight: 400;
     font-size: 1.5rem;
-    color: $text;
+    color: var(--text);
     width: 100%;
     margin-bottom: 0;
     max-height: calc(100% - 2rem); // 1rem padding, 1rem height of the "is archived" badge
@@ -171,7 +171,7 @@ export default {
   }
 
   &.has-light-text .title {
-    color: $light;
+    color: var(--light);
   }
 
   &.has-background {
@@ -180,8 +180,8 @@ export default {
     background-position: center;
 
     .title {
-      text-shadow: 0 0 10px $black, 1px 1px 5px $grey-700, -1px -1px 5px $grey-700;
-      color: $white;
+      text-shadow: 0 0 10px var(--black), 1px 1px 5px var(--grey-700), -1px -1px 5px var(--grey-700);
+      color: var(--white);
     }
   }
 
@@ -190,7 +190,7 @@ export default {
     opacity: 0;
 
     &:hover {
-      color: $orange;
+      color: var(--warning);
     }
 
     &.is-archived {
@@ -200,7 +200,7 @@ export default {
     &.is-favorite {
       display: inline-block;
       opacity: 1;
-      color: $orange;
+      color: var(--warning);
     }
   }
 
diff --git a/src/components/misc/Done.vue b/src/components/misc/Done.vue
index 4dcdf0380..60b173f2a 100644
--- a/src/components/misc/Done.vue
+++ b/src/components/misc/Done.vue
@@ -40,8 +40,8 @@ export default {
 
 <style lang="scss" scoped>
 .is-done {
-  background: $green;
-  color: $white;
+  background: var(--success);
+  color: var(--white);
   padding: .5rem;
   font-weight: bold;
   line-height: 1;
diff --git a/src/components/misc/api-config.vue b/src/components/misc/api-config.vue
index 63db72587..07ca857b8 100644
--- a/src/components/misc/api-config.vue
+++ b/src/components/misc/api-config.vue
@@ -128,6 +128,6 @@ export default {
 }
 
 .url {
-	border-bottom: 1px dashed $primary;
+	border-bottom: 1px dashed var(--primary);
 }
 </style>
\ No newline at end of file
diff --git a/src/components/misc/card.vue b/src/components/misc/card.vue
index a9632f7bd..e5a56872d 100644
--- a/src/components/misc/card.vue
+++ b/src/components/misc/card.vue
@@ -63,22 +63,22 @@ export default {
 
 <style lang="scss" scoped>
 .card {
-  background-color: $white;
+  background-color: var(--white);
   border-radius: $radius;
   margin-bottom: 1rem;
-  border: 1px solid $grey-200;
-  box-shadow: $shadow-sm;
+  border: 1px solid var(--card-border-color);
+  box-shadow: var(--shadow-sm);
 }
 
 .card-header {
   box-shadow: none;
-  border-bottom: 1px solid $grey-200;
+  border-bottom: 1px solid var(--card-border-color);
   border-radius: $radius $radius 0 0;
 }
 
 // FIXME: should maybe be merged somehow with modal
 :deep(.modal-card-foot) {
-  background-color: $grey-50;
+  background-color: var(--grey-50);
   border-top: 0;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/misc/legal.vue b/src/components/misc/legal.vue
index ff74921ac..c4e7c21ee 100644
--- a/src/components/misc/legal.vue
+++ b/src/components/misc/legal.vue
@@ -22,7 +22,7 @@ export default {
 .legal-links {
   margin-top: 1rem;
   text-align: right;
-  color: $grey-300;
+  color: var(--grey-300);
   font-size: 1rem;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/misc/no-auth-wrapper.vue b/src/components/misc/no-auth-wrapper.vue
index aea25daf4..22832fe94 100644
--- a/src/components/misc/no-auth-wrapper.vue
+++ b/src/components/misc/no-auth-wrapper.vue
@@ -26,7 +26,7 @@ const motd = computed(() => store.state.config.motd)
 
 <style lang="scss" scoped>
 .no-auth-wrapper {
-	background: url('@/assets/llama.svg') no-repeat bottom left fixed $light-background;
+	background: url('@/assets/llama.svg') no-repeat bottom left fixed var(--site-background);
 	min-height: 100vh;
 }
 
@@ -38,6 +38,6 @@ const motd = computed(() => store.state.config.motd)
 }
 
 .logo {
-	max-width: 100%;
+	color: var(--logo-text-color);
 }
 </style>
diff --git a/src/components/misc/ready.vue b/src/components/misc/ready.vue
index 5f199ca87..0bc2df843 100644
--- a/src/components/misc/ready.vue
+++ b/src/components/misc/ready.vue
@@ -98,7 +98,7 @@ export default {
 	left: 0;
 	bottom: 0;
 	right: 0;
-	background: $grey-100;
+	background: var(--grey-100);
 	z-index: 99;
 }
 
@@ -112,8 +112,8 @@ export default {
 	margin-right: 1rem;
 
 	&.is-loading::after {
-		border-left-color: $grey-400;
-		border-bottom-color: $grey-400;
+		border-left-color: var(--grey-400);
+		border-bottom-color: var(--grey-400);
 	}
 }
 
diff --git a/src/components/misc/shortcut.vue b/src/components/misc/shortcut.vue
index 8c1809eaf..77c7539af 100644
--- a/src/components/misc/shortcut.vue
+++ b/src/components/misc/shortcut.vue
@@ -35,8 +35,8 @@ export default {
 
 kbd {
 	padding: .1rem .35rem;
-	border: 1px solid $grey-300;
-	background: $grey-100;
+	border: 1px solid var(--grey-300);
+	background: var(--grey-100);
 	border-radius: 3px;
 	font-size: .75rem;
 }
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index b67d8816a..73dedd8f6 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -145,9 +145,9 @@ export default {
 		width: .75rem;
 		height: .75rem;
 
-		background: $primary;
+		background: var(--primary);
 		border-radius: 100%;
-		border: 2px solid $white;
+		border: 2px solid var(--white);
 	}
 
 	.notifications-list {
@@ -157,12 +157,12 @@ export default {
 		max-height: 400px;
 		overflow-y: auto;
 
-		background: $white;
+		background: var(--white);
 		width: 350px;
 		max-width: calc(100vw - 2rem);
 		padding: .75rem .25rem;
 		border-radius: $radius;
-		box-shadow: $shadow-sm;
+		box-shadow: var(--shadow-sm);
 		font-size: .85rem;
 
 		@media screen and (max-width: $tablet) {
@@ -183,14 +183,14 @@ export default {
 			transition: background-color $transition;
 
 			&:hover {
-				background: $grey-100;
+				background: var(--grey-100);
 				border-radius: $radius;
 			}
 
 			.read-indicator {
 				width: .35rem;
 				height: .35rem;
-				background: $primary;
+				background: var(--primary);
 				border-radius: 100%;
 				margin-left: .5rem;
 
@@ -219,7 +219,7 @@ export default {
 			}
 
 			.created {
-				color: $grey-400;
+				color: var(--grey-400);
 			}
 
 			&:last-child {
@@ -227,14 +227,14 @@ export default {
 			}
 
 			a {
-				color: $grey-800;
+				color: var(--grey-800);
 			}
 		}
 
 		.nothing {
 			text-align: center;
 			padding: 1rem 0;
-			color: $grey-500;
+			color: var(--grey-500);
 
 			.explainer {
 				font-size: .75rem;
diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
index 3e8c38d14..0546eeb8c 100644
--- a/src/components/quick-actions/quick-actions.vue
+++ b/src/components/quick-actions/quick-actions.vue
@@ -513,11 +513,11 @@ export default {
 	.results {
 		text-align: left;
 		width: 100%;
-		color: $grey-800;
+		color: var(--grey-800);
 
 		.result {
 			&-title {
-				background: $grey-50;
+				background: var(--grey-50);
 				padding: .5rem;
 				display: block;
 				font-size: .75rem;
@@ -528,6 +528,7 @@ export default {
 					font-size: .9rem;
 					width: 100%;
 					background: transparent;
+					color: var(--grey-800);
 					text-align: left;
 					box-shadow: none;
 					border-radius: 0;
@@ -539,12 +540,12 @@ export default {
 					cursor: pointer;
 
 					&:focus, &:hover {
-						background: $grey-50;
+						background: var(--grey-50);
 						box-shadow: none !important;
 					}
 
 					&:active {
-						background: $grey-100;
+						background: var(--grey-100);
 					}
 				}
 			}
diff --git a/src/components/tasks/edit-task.vue b/src/components/tasks/edit-task.vue
index 4cb8d8574..90f6adb74 100644
--- a/src/components/tasks/edit-task.vue
+++ b/src/components/tasks/edit-task.vue
@@ -167,7 +167,7 @@ ul.assingees {
 
 		a {
 			float: right;
-			color: $red;
+			color: var(--danger);
 			transition: all $transition;
 		}
 	}
diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue
index 4b401e90a..ca88ce15b 100644
--- a/src/components/tasks/gantt-component.vue
+++ b/src/components/tasks/gantt-component.vue
@@ -445,12 +445,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$gantt-border: 1px solid $grey-200;
-$gantt-vertical-border-color: $grey-100;
+$gantt-border: 1px solid var(--grey-200);
+$gantt-vertical-border-color: var(--grey-100);
 
 .gantt-chart {
 	overflow-x: auto;
-	border-top: 1px solid $grey-200;
+	border-top: 1px solid var(--grey-200);
 
 	.dates {
 		display: flex;
@@ -477,8 +477,8 @@ $gantt-vertical-border-color: $grey-100;
 						font-weight: normal;
 
 						&.today {
-							background: $primary;
-							color: $white;
+							background: var(--primary);
+							color: var(--white);
 							border-radius: 5px 5px 0 0;
 							font-weight: bold;
 						}
@@ -507,7 +507,7 @@ $gantt-vertical-border-color: $grey-100;
 
 			.task {
 				display: inline-block;
-				border: 2px solid $primary;
+				border: 2px solid var(--primary);
 				font-size: 0.85rem;
 				margin: 0.5rem;
 				border-radius: 6px;
@@ -520,30 +520,30 @@ $gantt-vertical-border-color: $grey-100;
 				user-select: none; // Non-prefixed version
 
 				&.is-current-edit {
-					border-color: $orange !important;
+					border-color: var(--warning) !important;
 				}
 
 				&.has-light-text {
-					color: $light;
+					color: var(--light);
 
 					&.done span:after {
-						border-top: 1px solid $light;
+						border-top: 1px solid var(--light);
 					}
 
 					.edit-toggle {
-						color: $light;
+						color: var(--light);
 					}
 				}
 
 				&.has-dark-text {
-					color: $text;
+					color: var(--text);
 
 					&.done span:after {
-						border-top: 1px solid $dark;
+						border-top: 1px solid var(--dark);
 					}
 
 					.edit-toggle {
-						color: $text;
+						color: var(--text);
 					}
 				}
 
@@ -596,8 +596,8 @@ $gantt-vertical-border-color: $grey-100;
 				}
 
 				&.nodate {
-					border: 2px dashed $grey-300;
-					background: $grey-100;
+					border: 2px dashed var(--grey-300);
+					background: var(--grey-100);
 				}
 
 				&:active {
diff --git a/src/components/tasks/partials/attachments.vue b/src/components/tasks/partials/attachments.vue
index 17cd98e60..3def47f66 100644
--- a/src/components/tasks/partials/attachments.vue
+++ b/src/components/tasks/partials/attachments.vue
@@ -267,17 +267,17 @@ export default {
       padding: .5rem;
 
       &:hover {
-        background-color: $grey-200;
+        background-color: var(--grey-200);
       }
 
       .filename {
         font-weight: bold;
         margin-bottom: .25rem;
-        color: $text;
+        color: var(--text);
       }
 
       .info {
-        color: $grey-500;
+        color: var(--grey-500);
         font-size: .9rem;
 
         p {
@@ -339,17 +339,17 @@ export default {
         width: 100%;
         font-size: 5rem;
         height: auto;
-        text-shadow: $shadow-md;
+        text-shadow: var(--shadow-md);
         animation: bounce 2s infinite;
       }
 
       .hint {
         margin: .5rem auto 2rem;
         border-radius: 2px;
-        box-shadow: $shadow-md;
-        background: $primary;
+        box-shadow: var(--shadow-md);
+        background: var(--primary);
         padding: 1rem;
-        color: $white;
+        color: var(--white);
         width: 100%;
         max-width: 300px;
       }
diff --git a/src/components/tasks/partials/checklist-summary.vue b/src/components/tasks/partials/checklist-summary.vue
index 85b6f85bb..97bbb37eb 100644
--- a/src/components/tasks/partials/checklist-summary.vue
+++ b/src/components/tasks/partials/checklist-summary.vue
@@ -39,7 +39,7 @@ export default {
 
 <style scoped lang="scss">
 .checklist-summary {
-	color: $grey-500;
+	color: var(--grey-500);
 	display: inline-flex;
 	align-items: center;
 
@@ -49,10 +49,10 @@ export default {
 		margin-right: .25rem;
 
 		circle {
-			stroke: $grey-400;
+			stroke: var(--grey-400);
 
 			&:last-child {
-				stroke: $primary;
+				stroke: var(--primary);
 			}
 		}
 	}
diff --git a/src/components/tasks/partials/defer-task.vue b/src/components/tasks/partials/defer-task.vue
index 6cfc126e9..b4692f746 100644
--- a/src/components/tasks/partials/defer-task.vue
+++ b/src/components/tasks/partials/defer-task.vue
@@ -141,14 +141,14 @@ $defer-task-max-width: 350px + 100px;
 	width: 100%;
 	max-width: $defer-task-max-width;
 	border-radius: $radius;
-	border: 1px solid $grey-200;
+	border: 1px solid var(--grey-200);
 	padding: 1rem;
 	margin: 1rem;
-	background: $white;
-	color: $text;
+	background: var(--white);
+	color: var(--text);
 	cursor: default;
 	z-index: 10;
-	box-shadow: $shadow-lg;
+	box-shadow: var(--shadow-lg);
 
 	@media screen and (max-width: ($defer-task-max-width)) {
 		left: .5rem;
diff --git a/src/components/tasks/partials/editAssignees.vue b/src/components/tasks/partials/editAssignees.vue
index 4eb354263..64fc768bc 100644
--- a/src/components/tasks/partials/editAssignees.vue
+++ b/src/components/tasks/partials/editAssignees.vue
@@ -127,7 +127,7 @@ export default {
 	}
 
 	:deep(.user img) {
-		border: 2px solid $white;
+		border: 2px solid var(--white);
 		margin-right: 0;
 	}
 
@@ -135,8 +135,8 @@ export default {
 		position: absolute;
 		top: 4px;
 		left: 2px;
-		color: $red;
-		background: $white;
+		color: var(--danger);
+		background: var(--white);
 		padding: 0 4px;
 		display: block;
 		border-radius: 100%;
diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index a3056c9d2..96e73a999 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -117,13 +117,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$task-background: $white;
+$task-background: var(--white);
 
 .task {
 	-webkit-touch-callout: none; // iOS Safari
 	user-select: none;
 	cursor: pointer;
-	box-shadow: $shadow-xs;
+	box-shadow: var(--shadow-xs);
 	display: block;
 	border: 3px solid transparent;
 
@@ -163,7 +163,7 @@ $task-background: $white;
 		}
 
 		&.overdue {
-			color: $red;
+			color: var(--danger);
 		}
 	}
 
@@ -219,7 +219,7 @@ $task-background: $white;
 	.footer .icon,
 	.due-date,
 	.priority-label {
-		background: $grey-100;
+		background: var(--grey-100);
 		border-radius: $radius;
 		padding: 0 .5rem;
 	}
@@ -229,7 +229,7 @@ $task-background: $white;
 	}
 
 	.task-id {
-		color: $grey-500;
+		color: var(--grey-500);
 		font-size: .8rem;
 		margin-bottom: .25rem;
 		display: flex;
@@ -244,21 +244,21 @@ $task-background: $white;
 	}
 
 	&.has-light-text {
-		color: $white;
+		color: var(--white);
 
 		.task-id {
-			color: $grey-200;
+			color: var(--grey-200);
 		}
 
 		.footer .icon,
 		.due-date,
 		.priority-label {
-			background: $grey-800;
+			background: var(--grey-800);
 		}
 
 		.footer {
 			.icon svg {
-				fill: $white;
+				fill: var(--white);
 			}
 		}
 	}
diff --git a/src/components/tasks/partials/listSearch.vue b/src/components/tasks/partials/listSearch.vue
index e05d52f8a..9dabce80c 100644
--- a/src/components/tasks/partials/listSearch.vue
+++ b/src/components/tasks/partials/listSearch.vue
@@ -70,6 +70,6 @@ export default {
 
 <style lang="scss" scoped>
 .list-namespace-title {
-	color: $grey-500;
+  color: var(--grey-500);
 }
 </style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/priorityLabel.vue b/src/components/tasks/partials/priorityLabel.vue
index 11e4d0175..0625412b1 100644
--- a/src/components/tasks/partials/priorityLabel.vue
+++ b/src/components/tasks/partials/priorityLabel.vue
@@ -54,7 +54,7 @@ export default {
 }
 
 span.high-priority {
-	color: $red;
+	color: var(--danger);
 	width: auto !important; // To override the width set in tasks
 
 	.icon {
@@ -64,7 +64,7 @@ span.high-priority {
 	}
 
 	&.not-so-high {
-		color: $orange;
+		color: var(--warning);
 	}
 }
 </style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue
index 6e99775fe..961949be8 100644
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/src/components/tasks/partials/relatedTasks.vue
@@ -310,7 +310,7 @@ export default {
 }
 
 .different-list {
-	color: $grey-500;
+	color: var(--grey-500);
 	width: auto;
 }
 
@@ -332,21 +332,21 @@ export default {
 	border-radius: $radius;
 
 	&:hover {
-		background-color: $grey-200;
+		background-color: var(--grey-200);
 	}
 
 	a {
-		color: $text;
+		color: var(--text);
 		transition: color ease $transition-duration;
 
 		&:hover {
-			color: $grey-900;
+			color: var(--grey-900);
 		}
 	}
 
 	.remove {
 		text-align: center;
-		color: $red;
+		color: var(--danger);
 		opacity: 0;
 		transition: opacity $transition;
 	}
diff --git a/src/components/tasks/partials/reminders.vue b/src/components/tasks/partials/reminders.vue
index 9d2a629ff..45a0ceabb 100644
--- a/src/components/tasks/partials/reminders.vue
+++ b/src/components/tasks/partials/reminders.vue
@@ -112,7 +112,7 @@ export default {
     align-items: center;
 
     &.overdue :deep(.datepicker a.show) {
-      color: $red;
+      color: var(--danger);
     }
 
     &:last-child {
@@ -120,7 +120,7 @@ export default {
     }
 
     a.remove {
-      color: $red;
+      color: var(--danger);
       padding-left: .5rem;
     }
   }
diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue
index da679bcaa..9e955d5c8 100644
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/src/components/tasks/partials/singleTaskInList.vue
@@ -227,7 +227,7 @@ export default {
 	border: 2px solid transparent;
 
 	&:hover {
-		background-color: $grey-100;
+		background-color: var(--grey-100);
 	}
 
 	.tasktext,
@@ -239,13 +239,13 @@ export default {
 		flex: 1 0 50%;
 
 		.overdue {
-			color: $red;
+			color: var(--danger);
 		}
 	}
 
 	.task-list {
 		width: auto;
-		color: $grey-400;
+		color: var(--grey-400);
 		font-size: .9rem;
 		white-space: nowrap;
 	}
@@ -273,11 +273,11 @@ export default {
 	}
 
 	a {
-		color: $text;
+		color: var(--text);
 		transition: color ease $transition-duration;
 
 		&:hover {
-			color: $grey-900;
+			color: var(--grey-900);
 		}
 	}
 
@@ -288,12 +288,12 @@ export default {
 		transition: opacity $transition, color $transition;
 
 		&:hover {
-			color: $orange;
+			color: var(--warning);
 		}
 
 		&.is-favorite {
 			opacity: 1;
-			color: $orange;
+			color: var(--warning);
 		}
 	}
 
@@ -324,16 +324,16 @@ export default {
 
 	.tasktext.done {
 		text-decoration: line-through;
-		color: $grey-500;
+		color: var(--grey-500);
 	}
 
 	span.parent-tasks {
-		color: $grey-500;
+		color: var(--grey-500);
 		width: auto;
 	}
 
 	.remove {
-		color: $red;
+		color: var(--danger);
 	}
 
 	input[type="checkbox"] {
@@ -351,8 +351,8 @@ export default {
 		left: calc(50% - 1rem);
 		width: 2rem;
 		height: 2rem;
-		border-left-color: $grey-300;
-		border-bottom-color: $grey-300;
+		border-left-color: var(--grey-300);
+		border-bottom-color: var(--grey-300);
 	}
 }
 </style>
\ No newline at end of file
diff --git a/src/composables/useColorScheme.ts b/src/composables/useColorScheme.ts
new file mode 100644
index 000000000..f4bf2b257
--- /dev/null
+++ b/src/composables/useColorScheme.ts
@@ -0,0 +1,48 @@
+import {computed, watch, readonly} from 'vue'
+import {useStorage, createSharedComposable, ColorSchemes, usePreferredColorScheme, tryOnMounted} from '@vueuse/core'
+
+const STORAGE_KEY = 'color-scheme'
+
+const DEFAULT_COLOR_SCHEME_SETTING: ColorSchemes = 'light'
+
+const CLASS_DARK = 'dark'
+const CLASS_LIGHT = 'light'
+
+// This is built upon the vueuse useDark
+// Main differences:
+// - usePreferredColorScheme
+// - doesn't allow setting via the `isDark` ref.
+// - instead the store is exposed
+// - value is synced via `createSharedComposable`
+// https://github.com/vueuse/vueuse/blob/main/packages/core/useDark/index.ts 
+export const useColorScheme = createSharedComposable(() => {
+	const store = useStorage<ColorSchemes>(STORAGE_KEY, DEFAULT_COLOR_SCHEME_SETTING)
+
+	const preferredColorScheme = usePreferredColorScheme()
+
+	const isDark = computed<boolean>(() => {
+		if (store.value !== 'auto') {
+			return store.value === 'dark'
+		}
+
+		const autoColorScheme = preferredColorScheme.value === 'no-preference' 
+			? DEFAULT_COLOR_SCHEME_SETTING
+			: preferredColorScheme.value
+		return autoColorScheme === 'dark'
+	})
+
+    function onChanged(v: boolean) {
+		const el = window?.document.querySelector('html')
+		el?.classList.toggle(CLASS_DARK, v)
+		el?.classList.toggle(CLASS_LIGHT, !v)
+	}
+
+    watch(isDark, onChanged, { flush: 'post' })
+
+	tryOnMounted(() => onChanged(isDark.value))
+
+	return {
+		store,
+		isDark: readonly(isDark),
+	}
+})
\ No newline at end of file
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index 9889189b3..f7bb9f749 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -112,6 +112,15 @@
         "disabled": "Disabled",
         "todoist": "Todoist",
         "vikunja": "Vikunja"
+      },
+      "appearance": {
+        "title": "Color Scheme",
+        "setSuccess": "Saved change of color scheme to {colorScheme}",
+        "colorScheme": {
+          "light": "Light",
+          "system": "System",
+          "dark": "Dark"
+        }
       }
     },
     "deletion": {
diff --git a/src/styles/common-imports.scss b/src/styles/common-imports.scss
new file mode 100644
index 000000000..2ac71b2c0
--- /dev/null
+++ b/src/styles/common-imports.scss
@@ -0,0 +1,44 @@
+//
+// IMPORTANT NOTE:
+//
+// The styles in this file and all imported styles should not
+// create CSS output when compiled!
+// Instead they should only define SCSS that gets compiled to nothing.
+//
+// The reason is that this file is prefixed in _every_ component style so that
+// the component has access to the variables, mixins, etc. that
+// are defined here.
+//
+
+// the default values get overwritten by the definitions above
+@import "bulma-css-variables/sass/utilities/_all";
+
+// since $tablet is defined by bulma we can just define it after importing the utilities
+$mobile: math.div($tablet, 2);
+
+$family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
+$vikunja-font: 'Quicksand', sans-serif;
+
+$thickness: 1px;
+$pagination-current-border: var(--primary);
+$navbar-item-active-color: var(--primary);
+
+$dropdown-content-shadow: none;
+$dropdown-item-hover-background-color: var(--grey-100);
+
+$bulmaswatch-import-font: false !default;
+$site-background: var(--grey-100);
+
+$transition-duration: 150ms;
+$transition: $transition-duration ease;
+
+$button-height: 34px;
+$switch-view-height: 2.69rem;
+
+$navbar-height: 4rem;
+$navbar-width: 300px;
+$navbar-icon-width: 40px;
+
+$lists-per-row: 5;
+$list-height: 150px;
+$list-spacing: 1rem;
\ No newline at end of file
diff --git a/src/styles/components/labels.scss b/src/styles/components/labels.scss
index ee06d3f2e..049702652 100644
--- a/src/styles/components/labels.scss
+++ b/src/styles/components/labels.scss
@@ -6,7 +6,7 @@
 
   .tag {
     margin: .5rem 0 .5rem .5rem;
-    background: $grey-200;
+    background: var(--grey-200);
 
     // FIXME: only used in ListLabels.vue
     &.disabled {
diff --git a/src/styles/components/task.scss b/src/styles/components/task.scss
index 3db356444..4a2b565e1 100644
--- a/src/styles/components/task.scss
+++ b/src/styles/components/task.scss
@@ -7,8 +7,8 @@
 .modal-container .task-view {
   border-radius: $radius;
   padding: 1rem;
-  color: $text;
-  background-color: $light-background !important;
+  color: var(--text);
+  background-color: var(--site-background) !important;
 
   @media screen and (max-width: 800px) {
     border-radius: 0;
diff --git a/src/styles/components/tooltip.scss b/src/styles/components/tooltip.scss
index 20acf5792..a5b77b3d1 100644
--- a/src/styles/components/tooltip.scss
+++ b/src/styles/components/tooltip.scss
@@ -5,7 +5,7 @@
   z-index: 10000;
   font-size: 0.8rem;
   text-align: center;
-  background: $dark;
+  background: var(--dark);
   color: white;
   border-radius: 5px;
   padding: 5px 10px 5px;
@@ -28,7 +28,7 @@
     height: 0;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
-    border-top: 5px solid $dark;
+    border-top: 5px solid var(--dark);
 
     &.bottom {
       transform: rotate(180deg);
diff --git a/src/styles/custom-properties/_index.scss b/src/styles/custom-properties/_index.scss
new file mode 100644
index 000000000..72cd3ac1c
--- /dev/null
+++ b/src/styles/custom-properties/_index.scss
@@ -0,0 +1,2 @@
+@import "colors";
+@import "shadows";
\ No newline at end of file
diff --git a/src/styles/custom-properties/colors.scss b/src/styles/custom-properties/colors.scss
new file mode 100644
index 000000000..6e379ded3
--- /dev/null
+++ b/src/styles/custom-properties/colors.scss
@@ -0,0 +1,122 @@
+// Vikunja colors as CSS custom properties
+
+:root {
+  // Vikunja specific variables
+  --grey-50: hsl(210, 20%, 98%);
+  --grey-100: hsl(220, 14.3%, 95.9%);
+  --grey-200: hsl(220, 13%, 91%);
+  --grey-300: hsl(216, 12.2%, 83.9%);
+  --grey-400: hsl(217.9, 10.6%, 64.9%);
+  --grey-500-hsl: 220, 8.9%, 46.1%;
+  --grey-500: hsl(var(--grey-500-hsl));
+  --grey-600: hsl(215, 13.8%, 34.1%);
+  --grey-700: hsl(216.9, 19.1%, 26.7%);
+  --grey-800: hsl(215, 27.9%, 16.9%);
+  --grey-900: hsl(220.9, 39.3%, 11%);
+  --site-background: var(--grey-100);
+  --scheme-main: var(--white);
+
+  // Overrides of Bulma defaults
+  --grey-darker: var(--grey-700);
+  --grey-dark:  var(--grey-800);
+  --grey:  var(--grey-500);
+  --grey-light:  var(--grey-300);
+  --grey-lighter:  var(--grey-200);
+  --grey-lightest: var(--grey-100);
+  --input-border-color: var(--grey-200);
+
+  --white-h: 0deg;
+  --white-s: 0%;
+  --white-l: 100%;
+  --white-a: 1;
+  --white: hsla(var(--white-h), var(--white-s), var(--white-l), var(--white-a));
+  --white-translucent: hsla(var(--white-h), var(--white-s), var(--white-l), 0.75);
+
+  --black-h: 0deg;
+  --black-s: 0%;
+  --black-l: 4%;
+  --black-a: 1;
+  --black: hsla(var(--black-h), var(--black-s), var(--black-l), var(--black-a));
+
+  // $warning / $orange: #ff851b
+  --warning-h: 27.9deg;
+  --warning-s: 100%;
+  --warning-l: 55.3%;
+  --warning-a: 1;
+  --warning: hsla(var(--warning-h), var(--warning-s), var(--warning-l), var(--warning-a));
+
+	// $success / $green is #00db60
+  --success-h: 146.3deg;
+  --success-s: 100%;
+  --success-l: 42.9%;
+  --success-a: 1;
+  --success: hsla(var(--success-h), var(--success-s), var(--success-l), var(--success-a));
+
+	// $danger / $red is #ff4136
+  --danger-h: 3.3deg;
+  --danger-s: 100%;
+  --danger-l: 60.6%;
+  --danger-a: 1;
+  --danger: hsla(var(--danger-h), var(--danger-s), var(--danger-l), var(--danger-a));
+
+	// var(--primary) / $blue is #1973ff
+  --primary-h: 216.5deg;
+  --primary-s: 100%;
+  --primary-l: 54.9%;
+  --primary-a: 1;
+  --primary-hsl: var(--primary-h), var(--primary-s), var(--primary-l);
+  --primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
+  // END Overrides of Bulma defaults
+
+
+  // Define custom color variable to prevent change in dark mode
+  --switch-view-color: hsla(var(--white-h), var(--white-s), var(--white-l), var(--white-a));
+
+  // Define custom color variable to alow change in dark mode
+  --card-border-color: var(--grey-200);
+  --logo-text-color: hsl(180, 1%, 15%);
+
+
+
+  &.dark {
+    // Light mode colours reversed for dark mode
+    --grey-900-hsl: 210, 20%, 98%;
+    --grey-900: hsl(var(--grey-900-hsl));
+    --grey-800: hsl(220, 14.3%, 95.9%);
+    --grey-700: hsl(220, 13%, 91%);
+    --grey-600: hsl(216, 12.2%, 83.9%);
+    --grey-500-hsl: 217.9, 10.6%, 64.9%;
+    --grey-500: hsl(var(--grey-500-hsl));
+    --grey-400: hsl(220, 8.9%, 46.1%);
+    --grey-300: hsl(215, 13.8%, 34.1%);
+    --grey-200: hsl(216.9, 19.1%, 26.7%);
+    --grey-100-hsl: 215, 27.9%, 16.9%;
+    --grey-100: hsl(var(--grey-100-hsl));
+    --grey-50-hsl: 220.9, 39.3%, 11%;
+    --grey-50: hsl(var(--grey-50-hsl));
+
+    // Dark grey looks better than black
+    --white: var(--grey-50);
+    --black-l: 100%;
+
+    // Text renders better in grey than black
+    --text: var(--grey-800);
+    --text-invert: #000;
+    --text-light: var(--grey-300);
+    --text-strong: var(--grey-900);
+
+    // Elements that rely on Bulma defaults in light mode but
+    // need to be overriden in dark mode
+    --input-placeholder-color: hsla(var(--grey-900-hsl), 0.6);
+    --tag-color: var(--grey-50);
+    --table-row-hover-background-color: var(--grey-100);
+    --dropdown-item-hover-background-color: var(--grey-100);
+    --dropdown-item-hover-color: var(--text);
+    --button-text-hover-background-color: var(--grey-200);
+    --button-hover-color: var(--grey-600);
+
+    // Custom color variables we need to override
+    --card-border-color: hsla(var(--grey-100-hsl), 0.3);
+    --logo-text-color: var(--grey-700);
+  }
+}
\ No newline at end of file
diff --git a/src/styles/custom-properties/shadows.scss b/src/styles/custom-properties/shadows.scss
new file mode 100644
index 000000000..5f040ca11
--- /dev/null
+++ b/src/styles/custom-properties/shadows.scss
@@ -0,0 +1,22 @@
+:root {
+  --shadow-xs: 0 1px 3px hsla(var(--grey-500-hsl), .12),
+               0 1px 2px hsla(var(--grey-500-hsl), .24);
+  --shadow-sm: 0 3px 6px hsla(var(--grey-500-hsl), .12),
+               0 2px 4px hsla(var(--grey-500-hsl), .10);
+  --shadow-md: 0 10px 20px hsla(var(--grey-500-hsl), .12),
+               0 3px 6px hsla(var(--grey-500-hsl), .08);
+  --shadow-lg: 0 15px 25px hsla(var(--grey-500-hsl), .12),
+               0 5px 10px hsla(var(--grey-500-hsl), .05);
+
+  &.dark {
+    // Even darker shadows for dark mode
+    --shadow-xs: 0 1px 3px hsla(var(--grey-50-hsl), 0.4),
+                 0 1px 2px hsla(var(--grey-50-hsl), 0.8);
+    --shadow-sm: 0 3px 6px hsla(var(--grey-50-hsl), 0.8),
+                 0 2px 4px hsla(var(--grey-50-hsl), 0.6);
+    --shadow-md: 0 10px 20px hsla(var(--grey-50-hsl), 0.8),
+                 0 3px 6px hsla(var(--grey-50-hsl), 0.6);
+    --shadow-lg: 0 15px 25px hsla(var(--grey-50-hsl), 0.8),
+                 0 5px 10px hsla(var(--grey-50-hsl), 0.4);
+  }
+}
\ No newline at end of file
diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss
index 184f777c4..b80316307 100644
--- a/src/styles/fonts.scss
+++ b/src/styles/fonts.scss
@@ -1,6 +1,6 @@
 $font-files-path: '/fonts/';
 
-/* quicksand-regular - latin */
+// quicksand-regular - latin
 @font-face {
   font-family: 'Quicksand';
   font-style: normal;
@@ -10,7 +10,7 @@ $font-files-path: '/fonts/';
   
 }
 
-/* quicksand-500 - latin */
+// quicksand-500 - latin
 @font-face {
   font-family: 'Quicksand';
   font-style: normal;
@@ -19,7 +19,7 @@ $font-files-path: '/fonts/';
   src: url($font-files-path + 'quicksand-v7-latin-500.woff2') format('woff2');
 }
 
-/* quicksand-700 - latin */
+// quicksand-700 - latin
 @font-face {
   font-family: 'Quicksand';
   font-style: normal;
@@ -28,7 +28,7 @@ $font-files-path: '/fonts/';
   src: url($font-files-path + 'quicksand-v7-latin-700.woff2') format('woff2');
 }
 
-/* open-sans-regular - latin */
+// open-sans-regular - latin
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
@@ -37,7 +37,7 @@ $font-files-path: '/fonts/';
   src: url($font-files-path + 'open-sans-v15-latin-regular.woff2') format('woff2');
 }
 
-/* open-sans-italic - latin */
+// open-sans-italic - latin
 @font-face {
   font-family: 'Open Sans';
   font-style: italic;
@@ -46,7 +46,7 @@ $font-files-path: '/fonts/';
   src: url($font-files-path + 'open-sans-v15-latin-italic.woff2') format('woff2');
 }
 
-/* open-sans-700 - latin */
+// open-sans-700 - latin
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
@@ -55,7 +55,7 @@ $font-files-path: '/fonts/';
   src: url($font-files-path + 'open-sans-v15-latin-700.woff2') format('woff2');
 }
 
-/* open-sans-700italic - latin */
+// open-sans-700italic - latin
 @font-face {
   font-family: 'Open Sans';
   font-style: italic;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 1aa66c090..6f9694430 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -5,13 +5,15 @@
 // This imports are the same as in "bulma/bulma.sass"
 // with the expeption of the bulma utilities.
 // They are imported globally in variables.scss
-@import "bulma/sass/base/_all";
-@import "bulma/sass/elements/_all";
-@import "bulma/sass/form/_all";
-@import "bulma/sass/components/_all";
-@import "bulma/sass/grid/_all";
-@import "bulma/sass/helpers/_all";
-@import "bulma/sass/layout/_all";
+@import "bulma-css-variables/sass/base/_all";
+@import "bulma-css-variables/sass/elements/_all";
+@import "bulma-css-variables/sass/form/_all";
+@import "bulma-css-variables/sass/components/_all";
+@import "bulma-css-variables/sass/grid/_all";
+@import "bulma-css-variables/sass/helpers/_all";
+@import "bulma-css-variables/sass/layout/_all";
 
 @import "theme";
-@import "components";
\ No newline at end of file
+@import "components";
+
+@import "custom-properties";
\ No newline at end of file
diff --git a/src/styles/theme/background.scss b/src/styles/theme/background.scss
index e57ef22ca..b03b04f46 100644
--- a/src/styles/theme/background.scss
+++ b/src/styles/theme/background.scss
@@ -8,7 +8,7 @@
 
 	// FIXME: move to pagination component
   .pagination-link:not(.is-current) {
-    background: $light-background;
+    background: var(--grey-100);
   }
 
   .box,
diff --git a/src/styles/theme/content.scss b/src/styles/theme/content.scss
index 4be780b15..08eadd1c3 100644
--- a/src/styles/theme/content.scss
+++ b/src/styles/theme/content.scss
@@ -6,7 +6,7 @@
 }
 
 .table.has-actions {
-	border-top: 1px solid $grey-100;
+	border-top: 1px solid var(--grey-100);
 	border-radius: 4px;
 	overflow: hidden;
 
diff --git a/src/styles/theme/scrollbars.scss b/src/styles/theme/scrollbars.scss
index 29d241067..c985376ee 100644
--- a/src/styles/theme/scrollbars.scss
+++ b/src/styles/theme/scrollbars.scss
@@ -1,7 +1,7 @@
 $scrollbar-height: 8px;
-$scrollbar-track-color: $grey-200;
-$scrollbar-thumb-color: $grey-300;
-$scrollbar-hover-color: $grey-500;
+$scrollbar-track-color: var(--grey-200);
+$scrollbar-thumb-color: var(--grey-300);
+$scrollbar-hover-color: var(--grey-500);
 
 // Chrome
 ::-webkit-scrollbar {
diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
index b674dfaed..77a9ec068 100644
--- a/src/styles/theme/theme.scss
+++ b/src/styles/theme/theme.scss
@@ -6,7 +6,7 @@
 }
 
 :focus {
-  box-shadow: 0 0 0 2px rgba($primary, 0.5);
+  box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
 }
 
 :focus:not(:focus-visible) {
@@ -15,11 +15,11 @@
 
 :focus-visible,
 :-moz-focusring {
-  box-shadow: 0 0 0 2px rgba($primary, 0.5);
+  box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
 }
 
 body {
-  background: $light-background;
+  background: var(--site-background);
   min-height: 100vh;
 }
 
@@ -45,7 +45,7 @@ h6 {
 
 	&::-moz-progress-bar,
 	&::-webkit-progress-value {
-	  background: $grey-500;
+	  background: var(--grey-500);
 	}
 
 	@media screen and (max-width: $tablet) {
@@ -94,11 +94,11 @@ button.table {
   }
 
   .icon:not(.has-text-success) {
-    color: $grey-300 !important;
+    color: var(--grey-300) !important;
   }
 
   &.has-text-danger .icon {
-    color: $danger !important;
+    color: var(--danger) !important;
   }
 
   &.is-disabled {
@@ -140,7 +140,7 @@ button.table {
 }
 
 .dropdown-menu  .dropdown-content {
-	box-shadow: $shadow-md;
+	box-shadow: var(--shadow-md);
 }
 
 .is-strikethrough {
@@ -156,6 +156,6 @@ button.table {
 }
 
 .box {
-  border: 1px solid $grey-200;
-  box-shadow: $shadow-sm;
+  border: 1px solid var(--grey-200);
+  box-shadow: var(--shadow-sm);
 }
\ No newline at end of file
diff --git a/src/styles/variables/_index.scss b/src/styles/variables/_index.scss
deleted file mode 100644
index bef2ad0cb..000000000
--- a/src/styles/variables/_index.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@import "colors";
-@import "shadows";
-@import "variables";
-
-// the default values get overwritten by the definitions above
-@import "bulma/sass/utilities/_all";
-
-// this is needed so that the shared form variables are globally defined aswell 
-@import "bulma/sass/form/shared";
-
-// since $tablet is defined by bulma we can just define it after importing the utilities
-$mobile: math.div($tablet, 2);
\ No newline at end of file
diff --git a/src/styles/variables/colors.scss b/src/styles/variables/colors.scss
deleted file mode 100644
index 09d04c1dd..000000000
--- a/src/styles/variables/colors.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-$grey-50: #F9FAFB;
-$grey-100: #f3f4f6;
-$grey-200: #E5E7EB;
-$grey-300: #D1D5DB;
-$grey-400: #9CA3AF;
-$grey-500: #6B7280;
-$grey-600: #4B5563;
-$grey-700: #374151;
-$grey-800: #1F2937;
-$grey-900: #111827;
-
-// Bulma defaults
-$grey-dark: $grey-800;
-$grey-darker: $grey-700;
-$grey: $grey-500;
-$grey-light: $grey-300;
-$grey-lighter: $grey-200;
-$grey-lightest: $grey-100;
diff --git a/src/styles/variables/shadows.scss b/src/styles/variables/shadows.scss
deleted file mode 100644
index 5782efd99..000000000
--- a/src/styles/variables/shadows.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-$shadow-xs: 0 1px 3px rgba($grey-500, .12), 0 1px 2px rgba($grey-500, .24);
-$shadow-sm: 0 3px 6px rgba($grey-500, .12), 0 2px 4px rgba($grey-500, .10);
-$shadow-md: 0 10px 20px rgba($grey-500, .12), 0 3px 6px rgba($grey-500, .08);
-$shadow-lg: 0 15px 25px rgba($grey-500, .12), 0 5px 10px rgba($grey-500, .05);
-$shadow-xl: 0 20px 40px rgba($grey-500, .2);
diff --git a/src/styles/variables/variables.scss b/src/styles/variables/variables.scss
deleted file mode 100644
index 6317d87a4..000000000
--- a/src/styles/variables/variables.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-$white: #fff;
-$black: hsl(0, 0%, 4%) !default;
-$orange: #ff851b;
-$green: #00db60;
-$red: #ff4136;
-$blue: #1973ff;
-$primary: $blue;
-
-$info-invert: $white;
-
-$family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
-$vikunja-font: 'Quicksand', sans-serif;
-
-$thickness: 1px;
-$pagination-current-border: $primary;
-$navbar-item-active-color: $primary;
-
-$dropdown-content-shadow: none;
-$dropdown-item-hover-background-color: $grey-100;
-
-$bulmaswatch-import-font: false !default;
-$light-background: $grey-100;
-
-$transition-duration: 150ms;
-$transition: $transition-duration ease;
-
-$button-height: 34px;
-
-$switch-view-height: 2.69rem;
-
-$user-dropdown-width-mobile: 5rem;
-$hamburger-menu-icon-spacing: 1rem;
-$hamburger-menu-icon-width: 28px;
-$navbar-height: 4rem;
-$navbar-width: 300px;
-$navbar-icon-width: 40px;
-
-
-$lists-per-row: 5;
-$list-height: 150px;
-$list-spacing: 1rem;
diff --git a/src/views/list/ShowList.vue b/src/views/list/ShowList.vue
index 873069232..5ed589096 100644
--- a/src/views/list/ShowList.vue
+++ b/src/views/list/ShowList.vue
@@ -166,11 +166,11 @@ export default {
 }
 
 .switch-view {
-  background: $white;
+  background: var(--white);
   display: inline-flex;
   border-radius: $radius;
   font-size: .75rem;
-  box-shadow: $shadow-sm;
+  box-shadow: var(--shadow-sm);
   height: $switch-view-height;
   margin-bottom: 1rem;
   padding: .5rem;
@@ -187,18 +187,18 @@ export default {
     }
 
     &.is-active,
-	&:hover {
-      color: $white;
+    &:hover {
+      color: var(--switch-view-color);
     }
 
     &.is-active {
-      background: $primary;
+      background: var(--primary);
       font-weight: bold;
-      box-shadow: $shadow-xs;
+      box-shadow: var(--shadow-xs);
     }
 
     &:hover {
-      background: $primary;
+      background: var(--primary);
     }
   }
 }
diff --git a/src/views/list/settings/background.vue b/src/views/list/settings/background.vue
index bb3ead15d..197fa0013 100644
--- a/src/views/list/settings/background.vue
+++ b/src/views/list/settings/background.vue
@@ -167,7 +167,7 @@ export default {
     font-size: .8rem;
 
     a {
-      color: $grey-800;
+      color: var(--grey-800);
     }
   }
 
@@ -224,7 +224,7 @@ export default {
         background: rgba(0, 0, 0, 0.5);
         font-size: .75rem;
         font-weight: bold;
-        color: $white;
+        color: var(--white);
         transition: opacity $transition;
       }
 
diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue
index d2deb94f1..61e5f6933 100644
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@@ -581,7 +581,6 @@ export default {
 </script>
 
 <style lang="scss">
-$bucket-background: $grey-100;
 $ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1);
 $bucket-width: 300px;
 $bucket-header-height: 60px;
@@ -615,7 +614,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 
 	.ghost {
 		background: transparent !important;
-		border: 3px dashed $grey-300 !important;
+		border: 3px dashed var(--grey-300) !important;
 		box-shadow: none !important;
 
 		* {
@@ -624,7 +623,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 	}
 
 	.bucket {
-		background-color: $bucket-background;
+		background-color: var(--grey-100);
 		border-radius: $radius;
 		position: relative;
 
@@ -672,7 +671,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 			padding-right: 1rem;
 
 			.button {
-				background: $bucket-background;
+				background: var(--grey-100);
 				width: 100%;
 			}
 		}
@@ -706,7 +705,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 			font-weight: bold;
 
 			&.is-max {
-				color: $red;
+				color: var(--danger);
 			}
 		}
 
@@ -730,7 +729,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 			background-color: transparent;
 
 			&:hover {
-				background-color: $white;
+				background-color: var(--white);
 			}
 		}
 	}
diff --git a/src/views/list/views/List.vue b/src/views/list/views/List.vue
index 9dd4baf14..9d121fc65 100644
--- a/src/views/list/views/List.vue
+++ b/src/views/list/views/List.vue
@@ -327,8 +327,8 @@ export default {
 
 		.ghost {
 			border-radius: $radius;
-			background: $grey-100;
-			border: 2px dashed $grey-300;
+			background: var(--grey-100);
+			border: 2px dashed var(--grey-300);
 
 			* {
 				opacity: 0;
diff --git a/src/views/migrator/MigrateService.vue b/src/views/migrator/MigrateService.vue
index 89f2ba1b2..2fbebcdb1 100644
--- a/src/views/migrator/MigrateService.vue
+++ b/src/views/migrator/MigrateService.vue
@@ -200,7 +200,7 @@ export default {
 
 	span {
 		transition: all 500ms ease;
-		background: $grey-500;
+		background: var(--grey-500);
 		height: 10px;
 		width: 10px;
 		display: inline-block;
@@ -245,11 +245,11 @@ export default {
 @keyframes wave {
 	0%, 40%, 100% {
 		transform: translate(0, 0);
-		background-color: $primary;
+		background-color: var(--primary);
 	}
 	10% {
 		transform: translate(0, -15px);
-		background-color: $primary-dark;
+		background-color: var(--primary-dark);
 	}
 }
 </style>
\ No newline at end of file
diff --git a/src/views/namespaces/ListNamespaces.vue b/src/views/namespaces/ListNamespaces.vue
index addaa596e..e2b8f0dce 100644
--- a/src/views/namespaces/ListNamespaces.vue
+++ b/src/views/namespaces/ListNamespaces.vue
@@ -131,12 +131,12 @@ export default {
 
     .is-archived {
       font-size: 0.75rem;
-      border: 1px solid $grey-500;
+      border: 1px solid var(--grey-500);
       color: $grey !important;
       padding: 2px 4px;
       border-radius: 3px;
       font-family: $vikunja-font;
-      background: rgba($white, 0.75);
+      background: var(--white-translucent);
       margin-left: .5rem;
     }
 
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 30f79e78f..5f56df682 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -706,18 +706,18 @@ $flash-background-duration: 750ms;
   // This is a workaround to hide the llama background from the top on the task detail page
   margin-top: -1.5rem;
   padding: 1rem;
-  background-color: $light-background;
+  background-color: var(--site-background);
 
   @media screen and (max-width: $desktop) {
     padding-bottom: 0;
   }
 
   .subtitle {
-    color: $grey-500;
+    color: var(--grey-500);
 	margin-bottom: 1rem;
 
     a {
-      color: $grey-800;
+      color: var(--grey-800);
     }
   }
 
@@ -726,7 +726,7 @@ $flash-background-duration: 750ms;
   }
 
   .icon.is-grey {
-    color: $grey-400;
+    color: var(--grey-400);
   }
 
   :deep(.heading) {
@@ -754,7 +754,7 @@ $flash-background-duration: 750ms;
     }
 
     .title.task-id {
-      color: $grey-400;
+      color: var(--grey-400);
       white-space: nowrap;
     }
 
@@ -765,7 +765,7 @@ $flash-background-duration: 750ms;
     align-items: center;
 
     a.remove {
-      color: $red;
+      color: var(--danger);
       vertical-align: middle;
       padding-left: .5rem;
       line-height: 1;
@@ -776,7 +776,7 @@ $flash-background-duration: 750ms;
     width: 100%;
 
     a.show {
-      color: $text;
+      color: var(--text);
       padding: .25rem .5rem;
       transition: background-color $transition;
       border-radius: $radius;
@@ -784,7 +784,7 @@ $flash-background-duration: 750ms;
       margin: .1rem 0;
 
       &:hover {
-        background: $white;
+        background: var(--white);
       }
     }
 
@@ -800,7 +800,7 @@ $flash-background-duration: 750ms;
 
     .detail-title {
       display: block;
-      color: $grey-400;
+      color: var(--grey-400);
     }
 
     .none {
@@ -837,21 +837,24 @@ $flash-background-duration: 750ms;
       transition: all $transition-duration;
 
       &::placeholder {
-        color: $text-light;
+        color: var(--text-light);
         opacity: 1;
         font-style: italic;
       }
 
       &:not(:disabled) {
-        &:hover, &:active {
-          background: $input-background-color;
-          border-color: $input-border-color;
+        &:hover,
+        &:active,
+        &:focus {
+          background: var(--scheme-main);
+          border-color: var(--border);
           cursor: text;
         }
 
-        &:focus {
-          background: $input-background-color;
-          border-color: $input-focus-border-color;
+        &:hover,
+        &:active {
+          cursor: text;
+          border-color: var(--link)
         }
       }
     }
@@ -883,18 +886,18 @@ $flash-background-duration: 750ms;
 
   .created {
     font-size: .75rem;
-    color: $grey-500;
+    color: var(--grey-500);
     text-align: right;
   }
 
   .checklist-summary {
     margin-left: .25rem;
-  }	
+  }
 }
 
 .task-view-container {
   padding-bottom: 1rem;
-	
+
   @media screen and (max-width: $desktop) {
 	padding-bottom: 0;
   }
@@ -917,6 +920,11 @@ $flash-background-duration: 750ms;
   }
 }
 
+.task-view-container {
+  // simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
+  --primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a));
+}
+
 .flash-background-enter-from,
 .flash-background-enter-active  {
   animation: flash-background $flash-background-duration ease 1;
@@ -924,7 +932,7 @@ $flash-background-duration: 750ms;
 
 @keyframes flash-background {
   0% {
-    background: lighten($primary, 30);
+    background: var(--primary-light);
   }
   100% {
     background: transparent;
diff --git a/src/views/tasks/TaskDetailViewModal.vue b/src/views/tasks/TaskDetailViewModal.vue
index 6deb7421f..9b4932464 100644
--- a/src/views/tasks/TaskDetailViewModal.vue
+++ b/src/views/tasks/TaskDetailViewModal.vue
@@ -2,6 +2,7 @@
 	<modal
 		@close="close()"
 		variant="scrolling"
+		class="task-detail-view-modal"
 	>
 				<a @click="close()" class="close">
 					<icon icon="times"/>
@@ -53,11 +54,18 @@ export default {
 	position: fixed;
 	top: 5px;
 	right: 26px;
-	color: $white;
+	color: var(--white);
 	font-size: 2rem;
 
 	@media screen and (max-width: $desktop) {
-		color: $dark;
+		color: var(--dark);
 	}
 }
+</style>
+
+<style lang="scss">
+// Close icon SVG uses currentColor, change the color to keep it visible
+.dark .task-detail-view-modal .close {
+	color: var(--grey-900);
+}
 </style>
\ No newline at end of file
diff --git a/src/views/teams/ListTeams.vue b/src/views/teams/ListTeams.vue
index 2fc6f87e7..503a8b3d1 100644
--- a/src/views/teams/ListTeams.vue
+++ b/src/views/teams/ListTeams.vue
@@ -68,7 +68,7 @@ ul.teams {
       transition: background-color $transition;
 
       &:hover {
-        background: $grey-100;
+        background: var(--grey-100);
       }
     }
   }
diff --git a/src/views/user/Settings.vue b/src/views/user/Settings.vue
index 3cf782500..e7db1e184 100644
--- a/src/views/user/Settings.vue
+++ b/src/views/user/Settings.vue
@@ -83,13 +83,13 @@ const isLocalUser = computed(() => store.state.auth.info?.isLocalUser)
 		a {
 			display: block;
 			padding: .5rem;
-			color: $dark;
+			color: var(--dark);
 			width: 100%;
 			border-left: 3px solid transparent;
 
 			&:hover, &.router-link-active {
-				background: $white;
-				border-color: $primary;
+				background: var(--white);
+				border-color: var(--primary);
 			}
 		}
 	}
diff --git a/src/views/user/settings/Avatar.vue b/src/views/user/settings/Avatar.vue
index 72e097535..2f9b74d61 100644
--- a/src/views/user/settings/Avatar.vue
+++ b/src/views/user/settings/Avatar.vue
@@ -149,6 +149,6 @@ export default {
 }
 
 .vue-advanced-cropper__background {
-	background: $white;
+	background: var(--white);
 }
 </style>
diff --git a/src/views/user/settings/General.vue b/src/views/user/settings/General.vue
index db3205429..347d1cc2a 100644
--- a/src/views/user/settings/General.vue
+++ b/src/views/user/settings/General.vue
@@ -90,6 +90,21 @@
 				</div>
 			</label>
 		</div>
+		<div class="field">
+			<label class="is-flex is-align-items-center">
+					<span>
+						{{ $t('user.settings.appearance.title') }}
+					</span>
+				<div class="select ml-2">
+					<select v-model="activeColorSchemeSetting">
+						<!-- TODO: use the Vikunja logo in color scheme as option buttons -->
+						<option v-for="(title, schemeId) in colorSchemeSettings" :key="schemeId" :value="schemeId">
+							{{ title }}
+						</option>
+					</select>
+				</div>
+			</label>
+		</div>
 
 		<x-button
 			:loading="userSettingsService.loading"
@@ -102,6 +117,9 @@
 </template>
 
 <script>
+import {computed, watch} from 'vue'
+import {useI18n} from 'vue-i18n'
+
 import {playSoundWhenDoneKey} from '@/helpers/playPop'
 import {availableLanguages, saveLanguage, getCurrentLanguage} from '@/i18n'
 import {getQuickAddMagicMode, setQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
@@ -110,6 +128,29 @@ import {PrefixMode} from '@/modules/parseTaskText'
 import ListSearch from '@/components/tasks/partials/listSearch'
 import {createRandomID} from '@/helpers/randomId'
 import {playPop} from '@/helpers/playPop'
+import {useColorScheme} from '@/composables/useColorScheme'
+import {success} from '@/message'
+
+function useColorSchemeSetting() {
+	const { t } = useI18n()
+	const colorSchemeSettings = computed(() => ({
+		light: t('user.settings.appearance.colorScheme.light'),
+		auto: t('user.settings.appearance.colorScheme.system'),
+		dark: t('user.settings.appearance.colorScheme.dark'),
+	}))
+
+	const {store} = useColorScheme()
+	watch(store, (schemeId) => {
+		success({message: t('user.settings.appearance.setSuccess', {
+			colorScheme: colorSchemeSettings.value[schemeId],
+		})})
+	})
+
+	return {
+		colorSchemeSettings,
+		activeColorSchemeSetting: store,
+	}
+}
 
 function getPlaySoundWhenDoneSetting() {
 	return localStorage.getItem(playSoundWhenDoneKey) === 'true' || localStorage.getItem(playSoundWhenDoneKey) === null
@@ -141,6 +182,13 @@ export default {
 			return this.$store.getters['lists/getListById'](this.settings.defaultListId)
 		},
 	},
+
+	setup() {
+		return {
+			...useColorSchemeSetting(),
+		}
+	},
+
 	mounted() {
 		this.setTitle(`${this.$t('user.settings.general.title')} - ${this.$t('user.settings.title')}`)
 	},
diff --git a/vite.config.js b/vite.config.js
index 417ccfd88..1d44bbeb4 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -9,8 +9,8 @@ import svgLoader from 'vite-svg-loader'
 const pathSrc = path.resolve(__dirname, './src')
 
 // the @use rules have to be the first in the compiled stylesheets
-const SCSS_IMPORT_PREFIX = `@use "sass:math";
-@import "${pathSrc}/styles/variables";`
+const PREFIXED_SCSS_STYLES = `@use "sass:math";
+@import "${pathSrc}/styles/common-imports";`
 
 const isModernBuild = Boolean(process.env.BUILD_MODERN_ONLY)
 const legacy = isModernBuild
@@ -29,7 +29,10 @@ if (isModernBuild) {
 export default defineConfig({
 	css: {
 		preprocessorOptions: {
-			scss: { additionalData: SCSS_IMPORT_PREFIX },
+			scss: {
+				additionalData: PREFIXED_SCSS_STYLES,
+				charset: false, // fixes  "@charset" must be the first rule in the file" warnings
+			},
 		},
 	},
 	plugins: [
diff --git a/yarn.lock b/yarn.lock
index b99a7c1b5..efb1bd5e7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3727,6 +3727,21 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.22.tgz#26dcbe5e530f6c1f2de5ca9aeab92ab00f523b41"
   integrity sha512-qWVav014mpjEtbWbEgl0q9pEyrrIySKum8UVYjwhC6njrKzknLZPvfuYdQyVbApsqr94tf/3dP4pCuZmmjdCWQ==
 
+"@vueuse/core@^6.8.0":
+  version "6.9.2"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-6.9.2.tgz#76b16d01f33cf367dd1a2d7f2e31d106443ceb8a"
+  integrity sha512-FRwl4ccSFuHZBHLGgS9TMv/+Dd6XFaL4o9nph2qtgQIV+z29RBFokw08XjHfykiENRzB01MjYHJ7iRUnsIFQXg==
+  dependencies:
+    "@vueuse/shared" "6.9.2"
+    vue-demi "*"
+
+"@vueuse/shared@6.9.2":
+  version "6.9.2"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-6.9.2.tgz#97e4369fa7262ebc96fe1d6e210268f30b037005"
+  integrity sha512-lAiMh6XROs0kSKVd0Yb/6GKoQMxC1fYrFDi6opvQWISPtcqRNluRrQxLUZ3WTI78ovtoKRLktjhkFAtydcfFDg==
+  dependencies:
+    vue-demi "*"
+
 abab@^2.0.3, abab@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.5.tgz#c0b678fb32d60fc1219c784d6a826fe385aeb79a"
@@ -4631,10 +4646,10 @@ builtins@^1.0.3:
   resolved "https://registry.yarnpkg.com/builtins/-/builtins-1.0.3.tgz#cb94faeb61c8696451db36534e1422f94f0aee88"
   integrity sha1-y5T662HIaWRR2zZTThQi+U8K7og=
 
-bulma@0.9.3:
-  version "0.9.3"
-  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.3.tgz#ddccb7436ebe3e21bf47afe01d3c43a296b70243"
-  integrity sha512-0d7GNW1PY4ud8TWxdNcP6Cc8Bu7MxcntD/RRLGWuiw/s0a9P+XlH/6QoOIrmbj6o8WWJzJYhytiu9nFjTszk1g==
+bulma-css-variables@^0.9.33:
+  version "0.9.33"
+  resolved "https://registry.yarnpkg.com/bulma-css-variables/-/bulma-css-variables-0.9.33.tgz#b249c3410e9edcfa7a5ce8ca96049b6939fe92de"
+  integrity sha512-D85dXLyLOBBDCuSSOeASc0kN2IknJqo5hzkZ22hxDHobxko/qay0nD+zNl2CJtF8v/7iwvQXqzVSDRnFVRSg9A==
 
 byline@^5.0.0:
   version "5.0.0"
@@ -13970,6 +13985,11 @@ vue-advanced-cropper@2.7.0:
     debounce "^1.2.0"
     easy-bem "^1.0.2"
 
+vue-demi@*:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.1.tgz#f7e18efbecffd11ab069d1472d7a06e319b4174c"
+  integrity sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==
+
 vue-drag-resize@2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/vue-drag-resize/-/vue-drag-resize-2.0.3.tgz#1faf0813f43304205bb355fbb3dacc548dd9398a"