|
- // 变量设定部分
- @mixin light {
- --color-mode: 'light';
- --color-bg: #fffffd;
- }
- @mixin dark {
- --color-mode: 'dark';
- --color-bg: #2f3136;
- }
- body[data-theme='auto'] {
- @include light();
- @media (prefers-color-scheme: dark) {
- @include dark();
- }
- }
- body[data-theme='light'] {
- @include light();
- }
- body[data-theme='dark'] {
- @include dark();
- }
- // 变量使用部分
- body {
- background-color: var(--color-bg);
- }
复制代码
可以换种方式试试
|
|