TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

better handling of the auto theme to prevent further bugs with it

Browse source
This commit is contained in:
Bnyro 2022-10-06 19:58:31 +02:00
parent 7ffa8b2cfe
commit c7595049bd
4 changed files with 8 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/App.vue
View file

@ -108,10 +108,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 +133,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 +150,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 +179,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 +190,4 @@ h2 {
.dark .line { .dark .line {
@apply bg-white; @apply bg-white;
} }
.auto .line {
@apply dark:(bg-white);
}
</style> </style>

3
src/components/FooterComponent.vue
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>

8
src/components/SearchSuggestions.vue
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;
} }

8
src/main.js
View file

@ -239,6 +239,13 @@ const mixin = {
}, },
computed: { computed: {
theme() { theme() {
this.refreshTheme; // forces Vue to recompute the value when the var gets changed
if (this.getPreferenceString("theme", "dark") == "auto") {
const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
// Forces the app to recompute the theme class
darkModePreference.addEventListener("change", () => this.refreshTheme++);
return darkModePreference.matches ? "dark" : "light";
}
return this.getPreferenceString("theme", "dark"); return this.getPreferenceString("theme", "dark");
}, },
authenticated(_this) { authenticated(_this) {
@ -269,6 +276,7 @@ const mixin = {
return { return {
TimeAgo: TimeAgo, TimeAgo: TimeAgo,
TimeAgoConfig: timeAgo, TimeAgoConfig: timeAgo,
refreshTheme: 0,
}; };
}, },
}; };