AutoChangeDarkMode.js-code

以下ソースコード

code:AutoChangeDarkMode.js

export const projectTheme = document.documentElement.dataset.projectTheme;

let defaultConfig = {

"lightTheme": projectTheme,

"darkTheme": "default-dark"

}

export function main(config=defaultConfig){

// ダーク&ライト変更をリアルタイムで検知する

let styleTag = document.createElement('style');

styleTag.textContent = `/* ライトモード */

@media (prefers-color-scheme: light) {

display: none;

}

}

/* ダークモード */

@media (prefers-color-scheme: dark) {

position: fixed;

top: 0;

left: 0;

height: 0px;

width: 0px;

display: block;

}

}`;

document.head.appendChild(styleTag);

let isDarkMode = false // (or true)

// 監視用のelementを作成

let darkmodeDOM = document.createElement("div");

darkmodeDOM.id = "darkmode-dummy";

document.body.appendChild(darkmodeDOM);

// オブザーバーを作る

const observer = new IntersectionObserver(() => {

// 変更があったときに発火される関数

isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches

changeColorScheme(isDarkMode);

})

// darkmodeDOMの監視開始

observer.observe(darkmodeDOM)

function changeColorScheme(isDarkMode){

if (isDarkMode) {

changeTheme(config.darkTheme);

} else{

changeTheme(config.lightTheme);

}

}

function changeTheme(theme){

document.documentElement.dataset.projectTheme = theme

const observer = new MutationObserver(() => {

document.documentElement.dataset.projectTheme = theme

});

observer.observe(document.documentElement, {attribute: true, subtree: true, childList: true});

}

changeColorScheme();

}