CSSを使用してWebサイトのダーク/ライトモードを作成する方法
ページのテキストの色と背景色を変更することで、Webサイトにダーク/ライトモードを追加できます。
構文
次の構文を使用して、ダークモードを適用できます。
Selector {
color: white;
background-color: black
} 例
<!DOCTYPE html>
<html>
<head>
<style>
div {
font-size: 1.4em;
text-align: center;
}
.dark {
color: white;
background-color: black;
}
</style>
</head>
<body>
<div>
<p>Suspendisse eget finibus nulla, a pulvinar est. Suspendisse eget eleifend nibh. In nec massa molestie, vehicula sapien a, consectetur nunc. Aenean at nisl vulputate mi scelerisque commodo nec et mauris. Duis tincidunt auctor posuere.</p>
<button id="btn" onclick="change()">Normal Mode</button>
</div>
<script>
let btnText = document.getElementById("btn");
function change() {
let btn = document.body;
btn.classList.toggle("dark");
if (btnText.innerHTML === "Normal Mode") {
btnText.innerHTML = "Dark Mode!";
} else {
btnText.innerHTML = "Normal Mode";
}}
</script>
</body>
</html> これにより、次の出力が得られます
例
<!DOCTYPE html>
<html>
<head>
<style>
div {
font-size: 1.4em;
text-align: center;
}
.dark {
color: white;
background-color: black;
}
</style>
</head>
<body>
<div>
<button id="btn" onclick="change()">Normal Mode</button>
<p>Duis tincidunt auctor posuere.</p>
<img src="https://images.unsplash.com/photo-1610718055968-4e3cf23d96db?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" />
</div>
<script>
let btnText = document.getElementById("btn");
function change() {
let btn = document.body;
btn.classList.toggle("dark");
if (btnText.innerHTML === "Normal Mode") {
btnText.innerHTML = "Dark Mode!";
} else {
btnText.innerHTML = "Normal Mode";
}}
</script>
</body>
</html> これにより、次の出力が得られます
-
Edgeブラウザを使用してWebサイトでダークモードを強制する方法
ウェブサイトとウェブコンテンツを強制的にダークモードで表示することができます Edgeブラウザを使用する 。これは、白い背景の代わりに、Webコンテンツが黒い背景に表示されることを意味します。 GoogleChromeを使用してウェブサイトでダークモードを強制する方法はすでに見てきました。次に、 Microsoft Edgeを使用してそれを行う方法を見てみましょう。 。これは、エッジでダークモードテーマを有効にすることとは異なります。 Edgeを使用するWebサイトでダークモードを強制する Windows10でMicrosoftEdgeChromiumを使用してWebサイトに暗い背景
-
ChromeforAndroidでダークモードを有効にする方法
Chromeに付属するすべてのアップデートで、長い間待ち望んでいたバグ修正またはオプションを入手できます。 Chrome 74を使用すると、Googleはダークモードを実現し、従来の真っ白な外観から脱却します。 Android向けChromeのダークモードを楽しむには、Chromeを最新の状態にする必要があります。有効にすると、Chromeの従来の白い外観に戻ることはできません。 AndroidでGoogleChromeを更新する方法 [アプリケーションマネージャー]に移動し、Chromeをタップします。お持ちのChromeのバージョンは上を向いている必要があります。 Chrome