40 lines
1.4 KiB
JavaScript
40 lines
1.4 KiB
JavaScript
/****************
|
|
* Theme Helpers *
|
|
*****************/
|
|
|
|
function setTheme(theme) {
|
|
document.documentElement.setAttribute("data-theme", theme);
|
|
}
|
|
|
|
function initTheme() {
|
|
function getBrowserThemePreferences() {
|
|
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
|
return "dark";
|
|
}
|
|
if (window.matchMedia("(prefers-color-scheme: light)").matches) {
|
|
return "light";
|
|
}
|
|
return undefined;
|
|
}
|
|
function changeEditorThemeSettingIfNecessary(theme) {
|
|
if (theme === "dark" && document.appConfig.editorCreateOptions.theme === "vs") {
|
|
document.appConfig.editorCreateOptions.theme = "vs-dark";
|
|
}
|
|
if (theme === "light" && document.appConfig.editorCreateOptions.theme === "vs-dark") {
|
|
document.appConfig.editorCreateOptions.theme = "vs";
|
|
}
|
|
}
|
|
function onMediaColorPreferencesChanged(event) {
|
|
const theme = event.matches ? "dark" : "light";
|
|
document.appConfig.theme = theme
|
|
changeEditorThemeSettingIfNecessary(theme);
|
|
updateConfig(document.appConfig);
|
|
}
|
|
// set theme to last saved settings or browser preference or "light"
|
|
document.appConfig.theme = document.appConfig.theme || getBrowserThemePreferences() || "light";
|
|
setTheme(document.appConfig.theme);
|
|
changeEditorThemeSettingIfNecessary(document.appConfig.theme);
|
|
// listen to browser change event
|
|
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", onMediaColorPreferencesChanged);
|
|
}
|