ダークモードはどのWebサイトにとっても非常に重要です。さまざまな興味を持つユーザーが Web サイトにアクセスします。ダークモードが好きな人もいれば、ライトモードが好きな人もいます。
調査によると、約 70% ～ 80% の人がダーク モードを好み、ライト モードを好む人は 20% ～ 30% のみです。したがって、ユーザーがダーク モードとライト モードを切り替えることができるダーク モードを Web サイトに作成する必要があります。
以下では、HTML、CSS、JavaScript を使用して簡単な Web ページを作成します。さらに、JavaScript と CSS を使用してライト モードとダーク モードを実装する方法を学習します。
文法
ユーザーは、次の構文に従って、暗いテーマと明るいテーマを切り替えることができます。
body.classList.toggle("dark-theme");
上記の構文では、ダーク テーマのクラス名を引数として toggle メソッドに渡しています。特定の HTML 要素にクラスを追加および削除します。
アルゴリズム
ユーザーは、次のアルゴリズムに従って、暗いテーマと明るいテーマを切り替えることができます。
-
ステップ 1 - Web ページの HTML をコーディングし、ライト テーマに通常どおり CSS を適用します。
-
ステップ 2 - CSS を使用してダークテーマのスタイルを作成します。
-
ステップ 3 - ボタンを作成し、ボタンに onclick イベントを追加します。ユーザーがボタンをクリックすると、暗いテーマと明るいテーマが切り替わります。
-
ステップ4 * -暗いテーマと明るいテーマを切り替えるには、要素に特定のクラスを追加および削除できます。たとえば、ダーク テーマ用のクラスを作成し、ダーク テーマ用の CSS を作成します。本体にダークテーマクラスを追加すると、Webサイト全体にダークテーマが適用され、削除すると通常のテーマになるはずです。
例1
以下の例では、ユーザーがボタンをクリックすると、changeMode() 関数が呼び出されます。changeMode() 関数は、テーマに従ってボタンのテキストを変更します。
さらに、document.body を使用して Web ページ全体にアクセスし、JavaScript を使用して Web ページ全体にダークテーマ クラスを追加し、テーマをダーク モードに変更します。
body {
color: black;
background-color: rgb(241, 241, 241);
text-align: center;
justify-content: center;
}
.dark-theme {
color: white;
background-color: rgb(26, 20, 20);
}
button {
width: 13rem;
height: 2rem;
font-size: 1.5rem;
background-color: aqua;
border: none;
border-radius: 12px;
}
p {
font-size: 1.2rem;
}
Using the toggle method to toggle between light and dark mode in JavaScript.
This is the content of the webpage.
Dark Mode
function changeMode() {
var body = document.body;
// toggle the theme
body.classList.toggle("dark-theme");
let button = document.getElementById('button');
// change the button text
if (button.innerHTML == "Dark Mode") {
button.innerHTML = "Normal Mode";
} else {
button.innerHTML = "Dark Mode"
}
}
例 2
以下の例では、HTML と CSS を使用してトグル ボタンを作成します。トグルスイッチにはチェックボックスを使用しました。したがって、ユーザーがチェックボックスをオンにするたびに、スイッチがオンになります。したがって、チェックボックスがチェックされているかどうかに応じて、ダークテーマのクラスを追加または削除できます。
さらに、JQuery の addClass() メソッドとremoveClass() メソッドを使用して、本体内のクラスを追加および削除しました。
body {
color: black;
background-color: rgb(241, 241, 241);
text-align: center;
justify-content: center;
}
.dark-class {
color: white;
background-color: rgb(12, 10, 10);
}
p {
font-size: 1.2rem;
}
.toggleButton {
width: 5rem;
height: 2rem;
position: relative;
display: inline-block;
}
.toggleButton input {
opacity: 0;
}
.roundButton {
background-color: black;
top: 0;
left: 0;
position: absolute;
right: 0;
bottom: 0;
cursor: pointer;
}
.roundButton:before {
left: 0;
bottom: 0;
position: absolute;
content: "";
background-color: grey;
transition: 1s;
height: 2rem;
width: 2rem;
}
input:checked+.roundButton {
background-color: white;
}
input:checked+.roundButton:before {
transform: translateX(3rem);
}
.roundButton.circle {
border-radius: 2rem;
}
.roundButton.circle:before {
border-radius: 50%;
}
Using the JQuery to toggle between light and dark modes in JavaScript.
This is the content of the webpage.
// If the input checkbox is checked, activate dark mode by adding dark-class to the body
$('#toggle').change(() => {
if ($('#toggle').is(":checked")) {
$("body").addClass("dark-class");
} else {
$("body").removeClass("dark-class")
}
})JavaScript と JQuery を使用してダーク モードとライト モードを切り替える方法を学びました。Web ページの CSS を変更し、その CSS をダークテーマに適用する必要があります。Web ページにクラスを追加または削除することで、CSS をダーク モードに適用できます。