cssがどのように“明るい-暗い”の色のモードを調節することについて論じます
スクリプトがあります.
方法1
方法1 .dark{}
を作って、bodyの上に置いて(あるいは個別のラベルを加えてどうせページ全体の他のものを全部入れます)、すべてのスタイルは明るくて暗くて、暗い色は後代のセレクタに書きます.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
*{
background-color: #f8f8f8;
color: #181818;
}
html,body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.title {
font-size: 30pt;
font-weight: 600;
padding: 10pt 0;
text-align: center;
}
.subtitle {
text-align: center;
font-size: 14pt;
}
p {
font-size: 20pt;
line-height: 24pt;
}
p::before {
content: "";
width: 2em;
display: inline-block;
}
.dark {
background-color: #222;
color: #d0d0d0;
}
.dark .title{
background-color: inherit;
color: #fff;
}
.dark .subtitle{
background-color: inherit;
color: #c0c0c0;
}
.dark p{
background-color: inherit;
color: inherit;
}
style>
head>
<body>
<div class="title">
div>
<div class="subtitle"> div>
<p>
, ! , ! , ! , 。 , 。 , 。 , 。 , 。 , 。 , 。
p>
<p>
? 。 , 。 , 。 , , ! , 。 , 。 , !
p>
<p>
, , 。 , 。 , ; , 。 , 。 , , !
p>
<button onclick="change()"> button>
body>
html>
<script>
function change() {
var body = document.body;
if (body.getAttribute('class'))
body.setAttribute('class', '');
else
body.setAttribute('class', 'dark');
}
script>
方法2
もちろん、2つの.light{}
.dark{}
だけを書いて、他の全継承を書くこともできます.しかし、あまり柔軟ではありません.要素のスタイルが花なら、この方法を使うべきではありません.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
* {
color: inherit;
background-color: inherit;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.title {
font-size: 30pt;
font-weight: 600;
padding: 10pt 0;
text-align: center;
}
.subtitle {
text-align: center;
font-size: 14pt;
}
p {
font-size: 20pt;
line-height: 24pt;
}
p::before {
content: "";
width: 2em;
display: inline-block;
}
.light {
background-color: #f8f8f8;
color: #181818;
}
.dark {
background-color: #222;
color: #d0d0d0;
}
style>
head>
<body class="light">
<div class="title">
div>
<div class="subtitle"> div>
<p>
, ! , ! , ! , 。 , 。 , 。 , 。 , 。 , 。 , 。
p>
<p>
? 。 , 。 , 。 , , ! , 。 , 。 , !
p>
<p>
, , 。 , 。 , ; , 。 , 。 , , !
p>
<button onclick="change()"> button>
body>
html>
<script>
function change() {
var body = document.getElementsByTagName('body')[0];
if (body.getAttribute('class') == 'light')
body.setAttribute('class', 'dark');
else
body.setAttribute('class', 'light');
}
script>
方法3
スタイルシートのパスを直接変更します.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<link id="color" href="css/light.css" rel="stylesheet" type="text/css">
<link href="css/app.css" rel="stylesheet" type="text/css">
head>
<body class="light">
<div class="title">
div>
<div class="subtitle"> div>
<p>
, ! , !! , ! , 。 , 。 , 。 , 。 , 。 , 。 , 。
p>
<p>
? 。 , 。 , 。 , , ! , 。 , 。 , !
p>
<p>
, , 。 , 。 , ; , 。 , 。 , , !
p>
<button onclick="change()"> button>
body>
html>
<script>
function change() {
var body = document.getElementById('color');
if (body.getAttribute('href') == 'css/light.css')
body.setAttribute('href', 'css/dark.css');
else
body.setAttribute('href', 'css/light.css');
}
script>
また、デバイスの色モードを自動的に適合させる場合は、応答式@media(prefers-color-scheme:......)を使用します。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
*{
background-color: #f8f8f8;
color: #181818;
}
html,body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.title {
font-size: 30pt;
font-weight: 600;
padding: 10pt 0;
text-align: center;
}
.subtitle {
text-align: center;
font-size: 14pt;
}
p {
font-size: 20pt;
line-height: 24pt;
}
p::before {
content: "";
width: 2em;
display: inline-block;
}
.dark {
background-color: #222;
color: #d0d0d0;
}
.dark .title{
background-color: inherit;
color: #fff;
}
.dark .subtitle{
background-color: inherit;
color: #c0c0c0;
}
.dark p{
background-color: inherit;
color: inherit;
}
style>
head>
<body>
<div class="title">
div>
<div class="subtitle"> div>
<p>
, ! , ! , ! , 。 , 。 , 。 , 。 , 。 , 。 , 。
p>
<p>
? 。 , 。 , 。 , , ! , 。 , 。 , !
p>
<p>
, , 。 , 。 , ; , 。 , 。 , , !
p>
<button onclick="change()"> button>
body>
html>
<script>
function change() {
var body = document.body;
if (body.getAttribute('class'))
body.setAttribute('class', '');
else
body.setAttribute('class', 'dark');
}
script>
もちろん、2つの
.light{}
.dark{}
だけを書いて、他の全継承を書くこともできます.しかし、あまり柔軟ではありません.要素のスタイルが花なら、この方法を使うべきではありません.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
* {
color: inherit;
background-color: inherit;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.title {
font-size: 30pt;
font-weight: 600;
padding: 10pt 0;
text-align: center;
}
.subtitle {
text-align: center;
font-size: 14pt;
}
p {
font-size: 20pt;
line-height: 24pt;
}
p::before {
content: "";
width: 2em;
display: inline-block;
}
.light {
background-color: #f8f8f8;
color: #181818;
}
.dark {
background-color: #222;
color: #d0d0d0;
}
style>
head>
<body class="light">
<div class="title">
div>
<div class="subtitle"> div>
<p>
, ! , ! , ! , 。 , 。 , 。 , 。 , 。 , 。 , 。
p>
<p>
? 。 , 。 , 。 , , ! , 。 , 。 , !
p>
<p>
, , 。 , 。 , ; , 。 , 。 , , !
p>
<button onclick="change()"> button>
body>
html>
<script>
function change() {
var body = document.getElementsByTagName('body')[0];
if (body.getAttribute('class') == 'light')
body.setAttribute('class', 'dark');
else
body.setAttribute('class', 'light');
}
script>
方法3
スタイルシートのパスを直接変更します.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<link id="color" href="css/light.css" rel="stylesheet" type="text/css">
<link href="css/app.css" rel="stylesheet" type="text/css">
head>
<body class="light">
<div class="title">
div>
<div class="subtitle"> div>
<p>
, ! , !! , ! , 。 , 。 , 。 , 。 , 。 , 。 , 。
p>
<p>
? 。 , 。 , 。 , , ! , 。 , 。 , !
p>
<p>
, , 。 , 。 , ; , 。 , 。 , , !
p>
<button onclick="change()"> button>
body>
html>
<script>
function change() {
var body = document.getElementById('color');
if (body.getAttribute('href') == 'css/light.css')
body.setAttribute('href', 'css/dark.css');
else
body.setAttribute('href', 'css/light.css');
}
script>
また、デバイスの色モードを自動的に適合させる場合は、応答式@media(prefers-color-scheme:......)を使用します。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<link id="color" href="css/light.css" rel="stylesheet" type="text/css">
<link href="css/app.css" rel="stylesheet" type="text/css">
head>
<body class="light">
<div class="title">
div>
<div class="subtitle"> div>
<p>
, ! , !! , ! , 。 , 。 , 。 , 。 , 。 , 。 , 。
p>
<p>
? 。 , 。 , 。 , , ! , 。 , 。 , !
p>
<p>
, , 。 , 。 , ; , 。 , 。 , , !
p>
<button onclick="change()"> button>
body>
html>
<script>
function change() {
var body = document.getElementById('color');
if (body.getAttribute('href') == 'css/light.css')
body.setAttribute('href', 'css/dark.css');
else
body.setAttribute('href', 'css/light.css');
}
script>