docs: add automatic dark-mode to docs site

This commit is contained in:
Jose Diaz-Gonzalez
2021-03-04 23:06:31 -05:00
parent f734fb34f8
commit 13d69a13f1
3 changed files with 77 additions and 41 deletions

View File

@@ -1,6 +1,9 @@
:root {
color-scheme: light dark;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 62.5%;
font-size: 62.5%;
font-weight: 400;
padding-bottom: 40px;
color: #5a5a5a;
@@ -231,7 +234,7 @@ h1 {
}
.list-group-item {
border: none;
font-size: 1.1em;
font-size: 14px;
font-weight: normal;
padding: .2rem .5rem;
color: #157577;
@@ -317,7 +320,7 @@ a.list-group-item {
right: 0;
width: auto;
height: auto;
font-size: 1.2em;
font-size: 1em;
border-radius: 0 0 0 5px;
padding: 0 0.5em;
text-shadow: none;
@@ -654,3 +657,74 @@ ul.fas li .fa-large:before, ul.fas li .fa-large:before {
width: 200px;
}
}
@media (prefers-color-scheme: dark) {
body {
background-color: rgb(13, 17, 23);
}
.header {
background-color: #075c9b;
}
.blurb {
filter: invert(1);
}
.slack-channel {
background-color: #110e09;
}
code {
background-color: rgb(22, 27, 34);
color: #bbb;
}
pre {
background-color: rgb(22, 27, 34);
color: #bbb;
border: 1px solid #555;
box-shadow: 0 0 0 3px #111;
}
.highlight-show-language-label {
filter: invert(1);
}
.list-group-item {
background-color: rgb(13, 17, 23);
}
blockquote {
background-color: rgba(0, 82, 204, 0.18);
border-left: 4px solid rgba(108, 169, 255, 0.3);;
color: rgb(108, 169, 255);
}
blockquote.warning {
border-left: 4px solid rgba(239, 136, 84, 0.3);
background-color: rgba(235, 100, 32, 0.18);
color: rgb(239, 136, 84);
}
blockquote.new-as-of {
border-left: 4px solid rgba(11, 216, 73, 0.3);
background-color: rgba(9, 171, 60, 0.18);
color: rgb(11, 216, 73);
}
.dev-warning, .outdated-warning {
background-color: #ccb430
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: #080808
}
.table-hover tbody tr:hover {
background-color: #3b3b3b;
color: #bbb;
}
.table td, .table th {
border-top: 1px solid #131110;
}
.table thead th {
border-bottom: 2px solid #131110;
}
.markdown-body {
color: rgb(184, 181, 171);
}
.markdown-body h1 {
color: #bbb;
}
.markdown-body h2, .markdown-body h3, .markdown-body h4 {
color: #aaa;
}
}

View File

@@ -36,35 +36,6 @@
<link href="https://cdn.jsdelivr.net/gh/dokku/dokku@v0.24.0/docs/assets/style.css" rel="stylesheet">
<!-- <link href="/dokku/docs/assets/style.css" rel="stylesheet"> -->
<style>
.sponsors {
background-color: #272822;
color: #FCFCFC;
}
.sponsors a {
color: #f0ad4e;
}
.sponsors .backer img,
.sponsors .sponsor img {
-webkit-border-radius: 3px;
border-radius: 3px;
border: 8px solid gray;
margin: 20px auto 20px auto;
max-width: 192px;
}
.sponsors .backer img {
-webkit-border-radius: 50%;
border-radius: 50%;
border: 0;
}
.sponsors img:hover {
-moz-box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.75);
}
.sponsors .fund-link {
display: block;
font-size: .8em;
}
</style>
</head>
<body>

View File

@@ -46,15 +46,6 @@
<!-- <link href="/dokku/docs/assets/style.css" rel="stylesheet"> -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.list-group-item {
font-size: 14px;
}
.markdown-body {
line-height: 1.5;
}
</style>
</head>
<body>