rodolphe/sake-app
1
0
Fork 0
Code Issues Pull requests Projects Releases 5 Packages Wiki Activity

Detect the dark theme

Browse source
This commit is contained in:
Rodolphe Bréard 2023-09-29 18:11:25 +02:00
parent 58ed576b85
commit bbf5bff023
2 changed files with 11 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
CHANGELOG.md
View file

@ -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). 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 ## [0.4.0] - 2023-09-26
### Added ### Added

6
src/main.js
View file

@ -23,8 +23,12 @@ const setGlobalAttribute = (attrName, storageName, defaultValue, allowedValues)
'defaultValue': defaultValue, '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 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({ const i18n = createI18n({
legacy: false, legacy: false,