TIL 19. DarkMode
2327 ワード
JavaScriptを使用して自己紹介ページでDarkModeを実装してみます.
方法を探索する際,cssを導入して色を変えることを考慮したが,css特性がカスケードされているためか,適用可能なブロックもあれば,適用されないブロックもある.
JavaScriptのstyleはHTML内部でInline styleを使用していることを確認します.backgroundColorとcolorを使うことにしました.
const main = document.querySelector('.main__container');
const header = document.querySelector('header');
const footer = document.querySelector('footer');
const darkBtn = document.querySelector('.nav__container__dark-mode');function darkMode() {
// color
main.style.backgroundColor = "#282b2d";
header.style.backgroundColor = "#282b2d";
footer.style.backgroundColor = "#282b2d";
header.style.color = "#f5f5f5";
main.style.color = "#f5f5f5";
footer.style.color = "#f5f5f5";
// transtition
header.style.transition = `all 0.2s ease`;
main.style.transition = `all 0.2s ease`;
footer.style.transition = `all 0.2s ease`;
// classList
darkBtn.classList.remove('white');
darkBtn.classList.add('dark');
// content
darkBtn.innerText = 'White';
}function whiteMode() {
// color
main.style.backgroundColor = "#f5f5f5";
header.style.backgroundColor = "#f5f5f5";
footer.style.backgroundColor = "#f5f5f5";
header.style.color = "#282b2d";
main.style.color = "#282b2d";
footer.style.color = "#282b2d";
// transtition
header.style.transition = `all 0.3s ease`;
main.style.transition = `all 0.3s ease`;
footer.style.transition = `all 0.3s ease`;
// classList
darkBtn.classList.add('white');
darkBtn.classList.remove('dark');
// content
darkBtn.innerText = 'Dark';
}
darkBtn.addEventListener('click', function() {
const ScreenColor = darkBtn.classList.contains('white');
if(ScreenColor === true) {
darkMode();
} else {
whiteMode()
}
})☝🏻 結論と自問
まず、関数の中でもバンドルされた要素を注釈でバンドルすることができますが、それらも関数になると、もっと効率的ではないでしょうか.
Reference
この問題について(TIL 19. DarkMode), 我々は、より多くの情報をここで見つけました https://velog.io/@syeon02/TIL-19.-DarkModeテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol