mirror of
https://github.com/Bubka/2FAuth.git
synced 2025-05-16 20:21:20 +02:00
Set up basic light/dark theme toggling
This commit is contained in:
Bubka
parent
304bc55601
commit
ecb6ad3c65
@ -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",
|
||||
|
||||
9
resources/js_vue3/app.js
vendored
9
resources/js_vue3/app.js
vendored
@ -77,4 +77,11 @@ app.config.errorHandler = (err, instance, info) => {
|
||||
}
|
||||
|
||||
// App mounting
|
||||
app.mount('#app')
|
||||
app.mount('#app')
|
||||
|
||||
// Theme
|
||||
import { useColorMode } from '@vueuse/core'
|
||||
|
||||
const mode = useColorMode({
|
||||
attribute: 'data-theme',
|
||||
})
|
||||
|
||||
139
resources/js_vue3/assets/app.scss
vendored
139
resources/js_vue3/assets/app.scss
vendored
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user