mirrors/caddy-website
1
0
Fork 0
mirror of https://github.com/caddyserver/website.git synced 2025-04-22 04:56:17 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Implement light/dark theme toggle

Browse source
This commit is contained in:
Francis Lavoie 2020-03-28 11:45:13 -04:00
parent eae81aed75
commit 4685121d37
No known key found for this signature in database
GPG key ID: 7D1A27F0725BE5D8
4 changed files with 116 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/includes/docs-head.html
View file

@ -1,5 +1,10 @@
{{include "/includes/head.html"}} {{include "/includes/head.html"}}
<!-- https://github.com/GoogleChromeLabs/dark-mode-toggle -->
<script type="module" src="https://unpkg.com/dark-mode-toggle"></script>
<link rel="stylesheet" href="/resources/css/docs.css"> <link rel="stylesheet" href="/resources/css/docs.css">
<link rel="stylesheet" href="/resources/css/docs-dark.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="/resources/css/chroma.css"> <link rel="stylesheet" href="/resources/css/chroma.css">
<script src="/resources/js/jquery-3.4.1.min.js"></script> <script src="/resources/js/jquery-3.4.1.min.js"></script>
<script src="/resources/js/docs.js"></script> <script src="/resources/js/docs.js"></script>

10
src/includes/docs-nav.html
View file

@ -42,4 +42,14 @@
<li><a href="/docs/logging">How Logging Works</a></li> <li><a href="/docs/logging">How Logging Works</a></li>
<li><a href="/docs/architecture">Caddy Architecture</a></li> <li><a href="/docs/architecture">Caddy Architecture</a></li>
</ul> </ul>
<!-- https://github.com/GoogleChromeLabs/dark-mode-toggle -->
<dark-mode-toggle
id="dark-mode-toggle-1"
appearance="switch"
light="Light"
dark="Dark"
permanent="true"
style="margin: 32px 0 16px 16px;"
></dark-mode-toggle>
</nav> </nav>

101
src/resources/css/docs-dark.css Normal file
View file

@ -0,0 +1,101 @@
body {
background-color: #060e17;
color: #bdd6f7;
}
#search {
background: rgb(28, 52, 79);
color: #bdd6f7;
}
#search:focus {
background: rgb(46, 70, 96);
}
#paper1,
#paper2 {
background-color: #030a11;
}
.paper3 {
background-color: #051628;
}
#logo {
/* TODO: Add some color */
filter: invert(1) opacity(.35);
}
#logo-docs {
color: #5aa3dc;
}
.breadcrumbs {
color: #5aa3dc;
}
main nav li a {
color: #668d9b;
}
main nav ul li a:hover {
color: #5aa3dc;
}
main nav ul li a.current {
background-color: #061b35;
}
.breadcrumbs {
border-color: #061b35;
}
h1 {
color: #5aa3dc;
}
code {
background-color: #122844;
}
code.cmd {
background-color: #000;
color: #ccc;
}
.json .key a:not([href]) {
color: #bdd6f7
}
#hovercard,
.arrow-box {
background-color: #0a192b;
}
.arrow-box:after {
border-bottom-color: #0a192b;
}
#hovercard .module-link:hover {
background: #0f2c50;
}
#hovercard .module-link-description {
color: rgb(167, 167, 167);
}
#hovercard-namespace-box,
#hovercard-inline-link {
border-color: #0a2b53;
}
article aside.tip {
color: #8c81e4;
}
th {
background-color: #142638;
}
th,
td {
border-bottom-color: #233444;
}

106
src/resources/css/docs.css
View file

@ -805,109 +805,3 @@ td code {
display: none; display: none;
} }
} }
@media (prefers-color-scheme: dark) {
body {
background-color: #060e17;
color: #bdd6f7;
}
#search {
background: rgb(28, 52, 79);
color: #bdd6f7;
}
#search:focus {
background: rgb(46, 70, 96);
}
#paper1,
#paper2 {
background-color: #030a11;
}
.paper3 {
background-color: #051628;
}
#logo {
/* TODO: Add some color */
filter: invert(1) opacity(.35);
}
#logo-docs {
color: #5aa3dc;
}
.breadcrumbs {
color: #5aa3dc;
}
main nav li a {
color: #668d9b;
}
main nav ul li a:hover {
color: #5aa3dc;
}
main nav ul li a.current {
background-color: #061b35;
}
.breadcrumbs {
border-color: #061b35;
}
h1 {
color: #5aa3dc;
}
code {
background-color: #122844;
}
code.cmd {
background-color: #000;
color: #ccc;
}
.json .key a:not([href]) {
color: #bdd6f7
}
#hovercard,
.arrow-box {
background-color: #0a192b;
}
.arrow-box:after {
border-bottom-color: #0a192b;
}
#hovercard .module-link:hover {
background: #0f2c50;
}
#hovercard .module-link-description {
color: rgb(167, 167, 167);
}
#hovercard-namespace-box,
#hovercard-inline-link {
border-color: #0a2b53;
}
article aside.tip {
color: #8c81e4;
}
th {
background-color: #142638;
}
th,
td {
border-bottom-color: #233444;
}
}