Viren070/stremio-addon-manager
1
0
Fork 0
mirror of https://github.com/Viren070/stremio-addon-manager.git synced 2025-12-01 23:25:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

allow user to toggle dark mode setting and persist to localstorage

Browse Source
This commit is contained in:
Pan Cake
2024-02-07 20:50:30 +10:00
parent 1cb011c54c
commit a392bdea34
3 changed files with 49 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
-6
View File
@@ -13,12 +13,6 @@
<body id="top"> <body id="top">
<div id="app" class="container"></div> <div id="app" class="container"></div>
<script>
if (window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
}
</script>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>
src/App.vue
+2
View File
@@ -1,6 +1,7 @@
<script setup> <script setup>
import './assets/main.css' import './assets/main.css'
import Header from './components/Header.vue' import Header from './components/Header.vue'
import DarkModeToggle from './components/DarkModeToggle.vue'
import Summary from './components/Summary.vue' import Summary from './components/Summary.vue'
import Configuration from './components/Configuration.vue' import Configuration from './components/Configuration.vue'
import ThankYou from './components/ThankYou.vue' import ThankYou from './components/ThankYou.vue'
@@ -10,6 +11,7 @@ import Footer from './components/Footer.vue'
<template> <template>
<header> <header>
<DarkModeToggle />
<Header addonName="Stremio Addon Manager" <Header addonName="Stremio Addon Manager"
addonSummary="Effortlessly manage the order of your Stremio addons without re-installing." addonSummary="Effortlessly manage the order of your Stremio addons without re-installing."
addonTagline="Including the default Cinemeta catalogs." addonLogo="logo.png" /> addonTagline="Including the default Cinemeta catalogs." addonLogo="logo.png" />
src/components/DarkModeToggle.vue
+47
View File
@@ -0,0 +1,47 @@
<script setup>
import { ref, onMounted } from 'vue'
const darkIcon = '🌙'
const lightIcon = '☀️'
let darkEnabled = ref(getDarkModePreference())
let toggleIcon = ref(darkEnabled.value ? lightIcon : darkIcon)
function getDarkModePreference() {
const userSet = localStorage.getItem('darkMode')
// User explicit setting takes precedence
if (userSet !== null) {
return userSet === 'true'
} else {
// If user has no preference, use system preference
if (window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches) {
return true
}
}
return false
}
function toggleMode() {
darkEnabled.value = !darkEnabled.value
localStorage.setItem('darkMode', darkEnabled.value)
document.body.classList.toggle('dark')
if (darkEnabled.value) {
toggleIcon.value = lightIcon
} else {
toggleIcon.value = darkIcon
}
}
onMounted(() => {
if (darkEnabled.value) {
document.body.classList.add('dark')
}
})
</script>
<template>
<h1 class="pull-right" style="margin: 0;">
<a @click="toggleMode">{{ toggleIcon }}</a>
</h1>
</template>