Color scheme
Вспомогательные функции для управления цветовой схемой. Composable functions for color scheme management.
Import Permalink to "Import"
js
import useProximaColorScheme from 'proxima-vue/composables/colorScheme';Use Permalink to "Use"
Для начала необходимо активировать текущую тему в корневом компоненте, значение берется из localStorage: First you need to activate the current scheme in the root component, the value is taken from localStorage:
ts
// app.vue
import { onBeforeMount } from 'vue';
import useProximaColorScheme from 'proxima-vue/composables/colorScheme';
const { setPreferredColorScheme } = useProximaColorScheme();
onBeforeMount(setPreferredColorScheme);Switcher Permalink to "Switcher"
colorScheme: systemhtml
<ProximaToggle
:options="colorOptions"
:model-value="colorScheme"
@update:modelValue="setColorScheme"
/>js
import useProximaColorScheme from 'proxima-vue/composables/colorScheme';
const { colorScheme, colorSchemes, setColorScheme } = useProximaColorScheme();
const colorOptions = [
{ value: colorSchemes.Light, label: 'Light' },
{ value: colorSchemes.System, label: 'Auto' },
{ value: colorSchemes.Dark, label: 'Dark' },
];Preferred Permalink to "Preferred"
User preferred: light
html
User preferred:
<b v-if="isDarkPreferred">dark</b>
<b v-if="isLightPreferred">light</b>js
import useProximaColorScheme from 'proxima-vue/composables/colorScheme';
const { isDarkPreferred, isLightPreferred } = useProximaColorScheme();