Merge pull request #1537 from Bnyro/auto

Better handling of the auto theme to prevent further bugs with it
This commit is contained in:
Kavin 2022-10-10 10:15:39 +01:00 committed by GitHub
commit 7356d3602f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 40 deletions

View File

@ -15,12 +15,31 @@
<script> <script>
import NavBar from "./components/NavBar.vue"; import NavBar from "./components/NavBar.vue";
import FooterComponent from "./components/FooterComponent.vue"; import FooterComponent from "./components/FooterComponent.vue";
const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
export default { export default {
components: { components: {
NavBar, NavBar,
FooterComponent, FooterComponent,
}, },
data() {
return {
theme: "dark",
};
},
methods: {
setTheme() {
let themePref = this.getPreferenceString("theme", "dark");
if (themePref == "auto") this.theme = darkModePreference.matches ? "dark" : "light";
else this.theme = themePref;
},
},
mounted() { mounted() {
this.setTheme();
darkModePreference.addEventListener("change", () => {
this.setTheme();
});
if (this.getPreferenceBoolean("watchHistory", false)) if (this.getPreferenceBoolean("watchHistory", false))
if ("indexedDB" in window) { if ("indexedDB" in window) {
const request = indexedDB.open("piped-db", 1); const request = indexedDB.open("piped-db", 1);
@ -108,10 +127,6 @@ b {
@apply text-black bg-white; @apply text-black bg-white;
} }
.auto {
@apply dark:(text-white bg-dark-900);
}
.dark { .dark {
@apply text-white bg-dark-900; @apply text-white bg-dark-900;
} }
@ -137,12 +152,6 @@ b {
@apply text-gray-400 bg-dark-400; @apply text-gray-400 bg-dark-400;
} }
.auto .input,
.auto .select,
.auto .btn {
@apply dark:(text-gray-400 bg-dark-400);
}
.input { .input {
@apply pl-2.5; @apply pl-2.5;
} }
@ -160,10 +169,6 @@ hr {
@apply border-dark-100; @apply border-dark-100;
} }
.auto hr {
@apply dark:border-dark-100;
}
h1, h1,
h2 { h2 {
@apply m-0 font-bold; @apply m-0 font-bold;
@ -193,18 +198,10 @@ h2 {
@apply hover:(text-gray-300 underline underline-gray-300); @apply hover:(text-gray-300 underline underline-gray-300);
} }
.auto .link {
@apply dark:hover:(text-gray-300 underline underline-gray-300);
}
.dark .link-secondary { .dark .link-secondary {
@apply text-gray-300 hover:(text-gray-400 underline underline-gray-400); @apply text-gray-300 hover:(text-gray-400 underline underline-gray-400);
} }
.auto .link-secondary {
@apply dark:(text-gray-300 hover:(text-gray-400 underline underline-gray-400));
}
.line { .line {
@apply px-2.5 py-0.25 my-0.45 rounded-xl bg-dark-900; @apply px-2.5 py-0.25 my-0.45 rounded-xl bg-dark-900;
} }
@ -212,8 +209,4 @@ h2 {
.dark .line { .dark .line {
@apply bg-white; @apply bg-white;
} }
.auto .line {
@apply dark:(bg-white);
}
</style> </style>

View File

@ -52,7 +52,4 @@ footer {
.dark footer { .dark footer {
@apply bg-dark-800; @apply bg-dark-800;
} }
.auto footer {
@apply dark:(bg-dark-800);
}
</style> </style>

View File

@ -89,10 +89,6 @@ export default {
@apply bg-dark-400; @apply bg-dark-400;
} }
.auto .suggestions-container {
@apply dark:bg-dark-400;
}
.suggestion-selected { .suggestion-selected {
@apply bg-gray-200; @apply bg-gray-200;
} }
@ -101,10 +97,6 @@ export default {
@apply bg-dark-100; @apply bg-dark-100;
} }
.auto .suggestion-selected {
@apply dark:bg-dark-100;
}
.suggestion { .suggestion {
@apply p-y-1; @apply p-y-1;
} }

View File

@ -238,9 +238,6 @@ const mixin = {
}, },
}, },
computed: { computed: {
theme() {
return this.getPreferenceString("theme", "dark");
},
authenticated(_this) { authenticated(_this) {
return _this.getAuthToken() !== undefined; return _this.getAuthToken() !== undefined;
}, },