2024-03-30 23:15:56 +00:00
|
|
|
<template>
|
|
|
|
|
<DocSectionText v-bind="$attrs">
|
|
|
|
|
<p>
|
|
|
|
|
The color scheme palette that varies between light and dark modes is specified with the surface tokens. Example below uses <i>zinc</i> for light mode and <i>slategray</i> for dark mode. With this setting, light mode, would have a
|
2024-12-07 21:18:08 +00:00
|
|
|
grayscale tone and dark mode would include bluish tone.
|
2024-03-30 23:15:56 +00:00
|
|
|
</p>
|
|
|
|
|
</DocSectionText>
|
|
|
|
|
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
code: {
|
|
|
|
|
basic: `
|
|
|
|
|
const MyPreset = definePreset(Aura, {
|
|
|
|
|
semantic: {
|
|
|
|
|
colorScheme: {
|
|
|
|
|
light: {
|
|
|
|
|
surface: {
|
|
|
|
|
0: '#ffffff',
|
|
|
|
|
50: '{zinc.50}',
|
|
|
|
|
100: '{zinc.100}',
|
|
|
|
|
200: '{zinc.200}',
|
|
|
|
|
300: '{zinc.300}',
|
|
|
|
|
400: '{zinc.400}',
|
|
|
|
|
500: '{zinc.500}',
|
|
|
|
|
600: '{zinc.600}',
|
|
|
|
|
700: '{zinc.700}',
|
|
|
|
|
800: '{zinc.800}',
|
|
|
|
|
900: '{zinc.900}',
|
|
|
|
|
950: '{zinc.950}'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
dark: {
|
|
|
|
|
surface: {
|
|
|
|
|
0: '#ffffff',
|
|
|
|
|
50: '{slate.50}',
|
|
|
|
|
100: '{slate.100}',
|
|
|
|
|
200: '{slate.200}',
|
|
|
|
|
300: '{slate.300}',
|
|
|
|
|
400: '{slate.400}',
|
|
|
|
|
500: '{slate.500}',
|
|
|
|
|
600: '{slate.600}',
|
|
|
|
|
700: '{slate.700}',
|
|
|
|
|
800: '{slate.800}',
|
|
|
|
|
900: '{slate.900}',
|
|
|
|
|
950: '{slate.950}'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
`
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
