Support dark color-scheme

This patch updates the html documentation to add the color-scheme meta
element, signaling ligth and dark color scheme support, and updating the
inline CSS styles to override some colors when dark mode is active, to
make sure that the document is always readable.

I've also cleaned up a bit the CSS styles, but without functional
changes.
This commit is contained in:
Andrea Pappacoda 2023-01-07 22:56:16 +01:00 committed by Howard Hinnant
parent 88d9e5ceff
commit 8eeae97520
7 changed files with 55 additions and 75 deletions

View File

@ -4,20 +4,17 @@
<head>
<title>chrono_io</title>
<meta name="color-scheme" content="light dark" />
<style>
p {text-align:justify}
li {text-align:justify}
blockquote.note
{
background-color:#E0E0E0;
padding-left: 15px;
padding-right: 15px;
padding-top: 1px;
padding-bottom: 1px;
}
li, p {text-align:justify}
ins {color:#00A000}
del {color:#A00000}
code {white-space:pre;}
@media (prefers-color-scheme: dark)
{
ins {color:#88FF88}
del {color:#FF5555}
}
</style>
</head>
<body>

View File

@ -3,19 +3,11 @@
<html>
<head>
<meta charset="utf-8">
<meta name="color-scheme" content="light dark">
<title>Extending &lt;chrono&gt; to Calendars and Time Zones</title>
<style type="text/css">
p {text-align:justify}
li {text-align:justify}
blockquote.note
{
background-color:#E0E0E0;
padding-left: 15px;
padding-right: 15px;
padding-top: 1px;
padding-bottom: 1px;
}
p.note
li, p {text-align:justify}
blockquote.note, p.note
{
background-color:#E0E0E0;
padding-left: 15px;
@ -27,9 +19,15 @@
del {color:#A00000}
address {text-align:right;}
h1 {text-align:center;}
span.comment {color:#C80000;}
code {white-space:pre;}
@media (prefers-color-scheme: dark)
{
blockquote.note, p.note {background-color:#505050}
ins {color:#88FF88}
del {color:#FF5555}
}
</style>
</head>
<body>

View File

@ -4,20 +4,17 @@
<head>
<title>date</title>
<meta name="color-scheme" content="light dark" />
<style>
p {text-align:justify}
li {text-align:justify}
blockquote.note
{
background-color:#E0E0E0;
padding-left: 15px;
padding-right: 15px;
padding-top: 1px;
padding-bottom: 1px;
}
li, p {text-align:justify}
ins {color:#00A000}
del {color:#A00000}
code {white-space:pre;}
@media (prefers-color-scheme: dark)
{
ins {color:#88FF88}
del {color:#FF5555}
}
</style>
</head>
<body>

View File

@ -4,20 +4,17 @@
<head>
<title>islamic</title>
<meta name="color-scheme" content="light dark" />
<style>
p {text-align:justify}
li {text-align:justify}
blockquote.note
{
background-color:#E0E0E0;
padding-left: 15px;
padding-right: 15px;
padding-top: 1px;
padding-bottom: 1px;
}
li, p {text-align:justify}
ins {color:#00A000}
del {color:#A00000}
code {white-space:pre;}
@media (prefers-color-scheme: dark)
{
ins {color:#88FF88}
del {color:#FF5555}
}
</style>
</head>
<body>

View File

@ -4,20 +4,17 @@
<head>
<title>iso_week</title>
<meta name="color-scheme" content="light dark" />
<style>
p {text-align:justify}
li {text-align:justify}
blockquote.note
{
background-color:#E0E0E0;
padding-left: 15px;
padding-right: 15px;
padding-top: 1px;
padding-bottom: 1px;
}
li, p {text-align:justify}
ins {color:#00A000}
del {color:#A00000}
code {white-space:pre;}
@media (prefers-color-scheme: dark)
{
ins {color:#88FF88}
del {color:#FF5555}
}
</style>
</head>
<body>

View File

@ -4,20 +4,17 @@
<head>
<title>julian</title>
<meta name="color-scheme" content="light dark" />
<style>
p {text-align:justify}
li {text-align:justify}
blockquote.note
{
background-color:#E0E0E0;
padding-left: 15px;
padding-right: 15px;
padding-top: 1px;
padding-bottom: 1px;
}
li, p {text-align:justify}
ins {color:#00A000}
del {color:#A00000}
code {white-space:pre;}
@media (prefers-color-scheme: dark)
{
ins {color:#88FF88}
del {color:#FF5555}
}
</style>
</head>
<body>

17
tz.html
View File

@ -4,20 +4,17 @@
<head>
<title>Time Zone Database Parser</title>
<meta name="color-scheme" content="light dark" />
<style>
p {text-align:justify}
li {text-align:justify}
blockquote.note
{
background-color:#E0E0E0;
padding-left: 15px;
padding-right: 15px;
padding-top: 1px;
padding-bottom: 1px;
}
li, p {text-align:justify}
ins {color:#00A000}
del {color:#A00000}
code {white-space:pre;}
@media (prefers-color-scheme: dark)
{
ins {color:#88FF88}
del {color:#FF5555}
}
</style>
</head>
<body>