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

Add auto theme option.

Browse source
This commit is contained in:
FireMasterK 2021-07-06 00:03:00 +05:30
parent b5a0ca8324
commit 9b79a9c848
No known key found for this signature in database
GPG key ID: 49451E4482CC5BCD
2 changed files with 13 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/components/Preferences.vue
View file

@ -34,6 +34,7 @@
<b>Theme</b> <b>Theme</b>
<br /> <br />
<select class="uk-select uk-width-auto" v-model="selectedTheme" @change="onChange($event)"> <select class="uk-select uk-width-auto" v-model="selectedTheme" @change="onChange($event)">
<option value="auto">Auto</option>
<option value="dark">Dark</option> <option value="dark">Dark</option>
<option value="light">Light</option> <option value="light">Light</option>
</select> </select>

17
src/main.js
View file

@ -129,22 +129,29 @@ const mixin = {
apiUrl() { apiUrl() {
return this.getPreferenceString("instance", "https://pipedapi.kavin.rocks"); return this.getPreferenceString("instance", "https://pipedapi.kavin.rocks");
}, },
getEffectiveTheme() {
var theme = this.getPreferenceString("theme", "dark");
if (theme === "auto")
theme =
window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
return theme;
},
}, },
computed: { computed: {
backgroundColor() { backgroundColor() {
return this.getPreferenceString("theme", "dark") === "light" ? "#fff" : "#0b0e0f"; return this.getEffectiveTheme() === "light" ? "#fff" : "#0b0e0f";
}, },
secondaryBackgroundColor() { secondaryBackgroundColor() {
return this.getPreferenceString("theme", "dark") === "light" ? "#e5e5e5" : "#242727"; return this.getEffectiveTheme() === "light" ? "#e5e5e5" : "#242727";
}, },
foregroundColor() { foregroundColor() {
return this.getPreferenceString("theme", "dark") === "light" ? "#15191a" : "#0b0e0f"; return this.getEffectiveTheme() === "light" ? "#15191a" : "#0b0e0f";
}, },
secondaryForegroundColor() { secondaryForegroundColor() {
return this.getPreferenceString("theme", "dark") === "light" ? "#666" : "#393d3d"; return this.getEffectiveTheme() === "light" ? "#666" : "#393d3d";
}, },
darkMode() { darkMode() {
return this.getPreferenceString("theme", "dark") !== "light"; return this.getEffectiveTheme() !== "light";
}, },
}, },
}; };