From ecb6ad3c653feadb1818fb58c4555466afb49b87 Mon Sep 17 00:00:00 2001 From: Bubka <858858+Bubka@users.noreply.github.com> Date: Fri, 29 Sep 2023 13:16:41 +0200 Subject: [PATCH] Set up basic light/dark theme toggling --- package.json | 1 + resources/js_vue3/app.js | 9 +- resources/js_vue3/assets/app.scss | 139 ------------------------------ 3 files changed, 9 insertions(+), 140 deletions(-) diff --git a/package.json b/package.json index 614a646a..7685a179 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@fortawesome/vue-fontawesome": "^3.0.3", "@kyvg/vue3-notification": "^3.0.2", "@vitejs/plugin-vue": "^4.3.4", + "@vueuse/components": "^10.4.1", "@vueuse/core": "^10.4.1", "axios": "^1.1.2", "bulma": "^0.9.4", diff --git a/resources/js_vue3/app.js b/resources/js_vue3/app.js index fc7c4498..974ed623 100644 --- a/resources/js_vue3/app.js +++ b/resources/js_vue3/app.js @@ -77,4 +77,11 @@ app.config.errorHandler = (err, instance, info) => { } // App mounting -app.mount('#app') \ No newline at end of file +app.mount('#app') + +// Theme +import { useColorMode } from '@vueuse/core' + +const mode = useColorMode({ + attribute: 'data-theme', + }) diff --git a/resources/js_vue3/assets/app.scss b/resources/js_vue3/assets/app.scss index 453c74b3..e5d88d25 100644 --- a/resources/js_vue3/assets/app.scss +++ b/resources/js_vue3/assets/app.scss @@ -19,25 +19,10 @@ footer, :root[data-theme="dark"] .options-header { background-color: $black-ter; } -@media (prefers-color-scheme: dark) { - :root[data-theme="system"], - :root[data-theme="system"] footer, - :root[data-theme="system"] .header, - :root[data-theme="system"] .modal-background, - :root[data-theme="system"] .modal-slot, - :root[data-theme="system"] .options-header { - background-color: $black-ter; - } -} :root[data-theme="dark"] .about-debug { background-color: $black-bis; } -@media (prefers-color-scheme: dark) { - :root[data-theme="system"] .about-debug { - background-color: $black-bis; - } -} a:hover { color: hsl(204, 86%, 53%); @@ -96,11 +81,6 @@ a:hover { :root[data-theme="dark"] .toolbar button { background-color: $black-ter; } -@media (prefers-color-scheme: dark) { - :root[data-theme="system"] .toolbar button { - background-color: $black-ter; - } -} .toolbar button.delete { background-color: $grey; @@ -146,12 +126,6 @@ a:hover { border-color: $grey-darker; color: $light; } -@media (prefers-color-scheme: dark) { - :root[data-theme="system"] .group-item { - border-color: $grey-darker; - color: $light; - } -} .group-item:first-of-type { margin-top: 2.5rem; @@ -218,11 +192,6 @@ a:hover { :root[data-theme="dark"] .tfa-grid { background-color: hsl(0, 0%, 10%); } -@media (prefers-color-scheme: dark) { - :root[data-theme="system"] .tfa-grid { - background-color: hsl(0, 0%, 10%); - } -} .tfa-list { text-align: inherit; @@ -235,12 +204,6 @@ a:hover { background-color: $black-ter; border-bottom: 1px solid $grey-darker; } -@media (prefers-color-scheme: dark) { - :root[data-theme="system"] .tfa-list { - background-color: $black-ter; - border-bottom: 1px solid $grey-darker; - } -} @media screen and (max-width: 1217px) { .tfa-list { @@ -347,11 +310,6 @@ a:hover { :root[data-theme="dark"] .tfa-text { color: $white; } -@media (prefers-color-scheme: dark) { - :root[data-theme="system"] .tfa-text { - color: $white; - } -} .tfa-container img { height: 0.75em; @@ -447,12 +405,6 @@ figure.no-icon { :root[data-theme="dark"] .add-icon-button:hover { color: $black-bis; } -@media (prefers-color-scheme: dark) { - :root[data-theme="system"] .add-icon-button, - :root[data-theme="system"] .add-icon-button:hover { - color: $black-bis; - } -} .dots { list-style: none; @@ -484,11 +436,6 @@ figure.no-icon { :root[data-theme="dark"] .dots li[data-is-active]~li { background: $black-bis; } -@media (prefers-color-scheme: dark) { - :root[data-theme="system"] .dots li[data-is-active]~li { - background: $black-bis; - } -} .dots li:nth-child(-n+9) { background: hsl(48, 100%, 67%); @@ -511,28 +458,12 @@ figure.no-icon { border-color: hsl(0, 0%, 29%); color: hsl(0, 0%, 100%); } -@media (prefers-color-scheme: dark) { - :root[data-theme="system"] .input, - :root[data-theme="system"] .select select, - :root[data-theme="system"] .textarea { - background-color: $grey-darker; - border-color: hsl(0, 0%, 29%); - color: hsl(0, 0%, 100%); - } -} :root[data-theme="dark"] .select select::placeholder, :root[data-theme="dark"] .textarea::placeholder, :root[data-theme="dark"] .input::placeholder { color: hsl(0, 0%, 48%); } -@media (prefers-color-scheme: dark) { - :root[data-theme="system"] .select select::placeholder, - :root[data-theme="system"] .textarea::placeholder, - :root[data-theme="system"] .input::placeholder { - color: hsl(0, 0%, 48%); - } -} .select select[disabled], [disabled].textarea, @@ -557,20 +488,6 @@ fieldset[disabled] .input { box-shadow: none; color: $grey-darker; } -@media (prefers-color-scheme: dark) { - :root[data-theme="system"] .select select[disabled], - :root[data-theme="system"] [disabled].textarea, - :root[data-theme="system"] [disabled].input, - :root[data-theme="system"] fieldset[disabled] .select select, - :root[data-theme="system"] .select fieldset[disabled] select, - :root[data-theme="system"] fieldset[disabled] .textarea, - :root[data-theme="system"] fieldset[disabled] .input { - background-color: hsl(0, 0%, 10%); - border-color: $grey-darker; - box-shadow: none; - color: $grey-darker; - } -} :root[data-theme="dark"] .select select[disabled]::placeholder, :root[data-theme="dark"] [disabled].textarea::placeholder, @@ -581,17 +498,6 @@ fieldset[disabled] .input { :root[data-theme="dark"] fieldset[disabled] .input::placeholder { color: $grey-darker; } -@media (prefers-color-scheme: dark) { - :root[data-theme="system"] .select select[disabled]::placeholder, - :root[data-theme="system"] [disabled].textarea::placeholder, - :root[data-theme="system"] [disabled].input::placeholder, - :root[data-theme="system"] fieldset[disabled] .select select::placeholder, - :root[data-theme="system"] .select fieldset[disabled] select::placeholder, - :root[data-theme="system"] fieldset[disabled] .textarea::placeholder, - :root[data-theme="system"] fieldset[disabled] .input::placeholder { - color: $grey-darker; - } -} .button.has-line-height { height: inherit !important; @@ -931,12 +837,6 @@ button.button.tag.is-white, border-color: $grey; background: none; } -@media (prefers-color-scheme: dark) { - :root[data-theme="system"] .is-checkradio[type="checkbox"]+label::before { - border-color: $grey; - background: none; - } -} .is-checkradio[type="checkbox"]:checked + label::before { border-color: $grey; @@ -944,11 +844,6 @@ button.button.tag.is-white, :root[data-theme="dark"] .is-checkradio[type="checkbox"]:checked + label::before { border-color: $grey-lighter; } -@media (prefers-color-scheme: dark) { - :root[data-theme="system"] .is-checkradio[type="checkbox"]:checked + label::before { - border-color: $grey-lighter; - } -} .label { color: hsl(0, 0%, 48%); @@ -971,11 +866,6 @@ button.button.tag.is-white, :root[data-theme="dark"] .is-underscored.is-dot { background-color: $success-dark; } -@media (prefers-color-scheme: dark) { - :root[data-theme="system"] .is-underscored.is-dot { - background-color: $success-dark; - } -} .is-mid-width-field input { width: 50% !important; @@ -1002,21 +892,10 @@ button.button.tag.is-white, :root[data-theme="dark"] .control.has-icons-right .icon { color: inherit; } -@media (prefers-color-scheme: dark) { - :root[data-theme="system"] .control.has-icons-left .icon, - :root[data-theme="system"] .control.has-icons-right .icon { - color: inherit; - } -} :root[data-theme="dark"].is-search { border-color: $grey-darker; } -@media (prefers-color-scheme: dark) { - :root[data-theme="system"].is-search { - border-color: $grey-darker; - } -} .modal .field.is-grouped:last-child { justify-content: center; @@ -1152,11 +1031,6 @@ footer .field.is-grouped { :root[data-theme="dark"] quick-uploader-button::before { opacity: 0.05; } -@media (prefers-color-scheme: dark) { - :root[data-theme="system"] quick-uploader-button::before { - opacity: 0.05; - } -} .error-404, .error-generic, @@ -1207,11 +1081,6 @@ footer .field.is-grouped { :root[data-theme="dark"] .about-logo { filter: none; } -@media (prefers-color-scheme: dark) { - :root[data-theme="system"] .about-logo { - filter: none; - } -} // Themed Spinner .spinner-container { @@ -1226,14 +1095,6 @@ footer .field.is-grouped { color: $light; } } -@media (prefers-color-scheme: dark) { - :root[data-theme="system"] .spinner-container { - background-color: $black-ter; - .spinner { - color: $light; - } - } -} .fadeInOut-enter-active { animation: fadeIn 500ms