Detect the dark theme
This commit is contained in:
parent
58ed576b85
commit
bbf5bff023
2 changed files with 11 additions and 1 deletions
|
@ -12,6 +12,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
|
|||
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
### Changed
|
||||
- If the browser uses a dark theme, the default theme is also set to dark
|
||||
|
||||
|
||||
## [0.4.0] - 2023-09-26
|
||||
|
||||
### Added
|
||||
|
|
|
@ -23,8 +23,12 @@ const setGlobalAttribute = (attrName, storageName, defaultValue, allowedValues)
|
|||
'defaultValue': defaultValue,
|
||||
};
|
||||
};
|
||||
const getDefaultColorMode = () => {
|
||||
const darkMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
return darkMediaQuery.matches ? 'dark' : 'light';
|
||||
};
|
||||
const locale = setGlobalAttribute('lang', 'sake-locale', getDefaultLocale(), allowedLocales);
|
||||
const colorMode = setGlobalAttribute('data-bs-theme', 'sake-color-mode', 'light', allowedColorModes);
|
||||
const colorMode = setGlobalAttribute('data-bs-theme', 'sake-color-mode', getDefaultColorMode(), allowedColorModes);
|
||||
|
||||
const i18n = createI18n({
|
||||
legacy: false,
|
||||
|
|
Loading…
Reference in a new issue