Last active
April 6, 2024 16:55
-
-
Save Kcko/186afd5f8ebb762aee3624fb0dce8aad to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="settings"> | |
<div class="settings-row"> | |
<ThemeSelector /> | |
theme {{ theme }} | |
<div :class="selectedTheme">Here's how the {{ selectedTheme }} theme looks like.</div> | |
</div> | |
</div> | |
</template> | |
<script setup> | |
import { useThemeSelection } from '../composables/ThemeSelection'; | |
import ThemeSelector from '../components/ThemeSelector.vue'; | |
const { selectedTheme, theme } = useThemeSelection(); | |
</script> | |
<style> | |
.light { | |
background-color: #fff; | |
color: #000; | |
} | |
.dark { | |
background-color: #000; | |
color: #fff; | |
} | |
.green { | |
background-color: green; | |
color: #fff; | |
} | |
.red { | |
background-color: red; | |
color: #fff; | |
} | |
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { ref, computed } from 'vue'; | |
const theme = ref('light'); | |
export function useThemeSelection() { | |
const getTheme = () => theme.value; | |
const setTheme = v => { | |
theme.value = v; | |
}; | |
const selectedTheme = computed({ | |
get: () => getTheme(), | |
set: newTheme => setTheme(newTheme), | |
}); | |
return { | |
theme, | |
selectedTheme, | |
}; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div> <!-- lze oboji ;) --> | |
<select @change="handleChange" v-model="theme"> | |
<option value="light">Light</option> | |
<option value="dark">Dark</option> | |
<option value="red">Red</option> | |
<option value="green">Green</option> | |
</select> | |
<select @change="handleChange" v-model="selectedTheme"> | |
<option value="light">Light</option> | |
<option value="dark">Dark</option> | |
<option value="red">Red</option> | |
<option value="green">Green</option> | |
</select> | |
</div> | |
</template> | |
<script setup> | |
import { useThemeSelection } from '../composables/ThemeSelection'; | |
const { selectedTheme, theme } = useThemeSelection(); | |
const handleChange = event => { | |
const newTheme = event.target.value; | |
theme.value = newTheme; // Set the new theme | |
}; | |
</script> | |
<style lang="scss" scoped></style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment