Merge pull request #28 from dreamerblue/master

Add dark style
This commit is contained in:
MeiK
2020-05-05 19:36:54 +08:00
committed by GitHub
3 changed files with 244 additions and 1 deletions

View File

@@ -5,6 +5,8 @@
href="{{ "css/frameworks.css" | absURL }}" />
<link crossorigin="anonymous" media="all"
rel="stylesheet" href="{{ "css/github.css" | absURL }}" />
<link crossorigin="anonymous" media="(prefers-color-scheme: dark)"
rel="stylesheet" href="{{ "css/dark.css" | absURL }}" />
<meta name="viewport" content="width=device-width">
<title>{{ if .IsHome }}{{ else }}{{ .Title }} - {{ end }}{{ .Site.Title }}</title>

View File

@@ -62,11 +62,25 @@
</div>
{{ if .Site.Params.utterances }}
<div class="utterances"></div>
<script src="https://utteranc.es/client.js"
<!-- <script src="https://utteranc.es/client.js"
repo="{{ .Site.Params.utterances }}"
issue-term="title"
theme="github-light"
crossorigin="anonymous"
async>
</script> -->
<script>
this.systemThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
var systemTheme = this.systemThemeMediaQuery.matches ? 'dark' : 'light';
var utterancesTheme = systemTheme === 'dark' ? 'github-dark' : 'github-light';
var utterancesScript = document.createElement('script');
utterancesScript.src = 'https://utteranc.es/client.js';
utterancesScript.setAttribute('repo', '{{ .Site.Params.utterances }}');
utterancesScript.setAttribute('issue-term', 'title');
utterancesScript.setAttribute('theme', utterancesTheme);
utterancesScript.setAttribute('crossorigin', 'anonymous');
utterancesScript.setAttribute('async', '');
document.querySelector('.utterances').appendChild(utterancesScript);
</script>
<noscript>Please enable JavaScript to view the comments</noscript>
{{ end }}

227
static/css/dark.css Normal file
View File

@@ -0,0 +1,227 @@
/* powered by DARK READER */
body {
color: rgb(216, 214, 208);
background-color: rgb(24, 26, 27);
}
a {
color: rgb(77, 172, 253);
}
.UnderlineNav-item.selected {
color: rgb(216, 214, 208) !important;
border-bottom-color: rgb(196, 85, 8) !important;
}
.UnderlineNav-item {
color: rgb(196, 191, 183);
border-bottom-color: transparent;
}
.UnderlineNav-item:focus,
.UnderlineNav-item:hover {
color: rgb(216, 214, 208);
text-decoration-color: initial;
border-bottom-color: rgb(55, 61, 69);
}
.Box {
background-color: rgb(24, 26, 27);
border-top-color: rgb(55, 61, 69);
border-right-color: rgb(55, 61, 69);
border-bottom-color: rgb(55, 61, 69);
border-left-color: rgb(55, 61, 69);
}
.Box-header {
background-color: rgb(27, 28, 30);
border-top-color: rgb(55, 61, 69);
border-right-color: rgb(55, 61, 69);
border-bottom-color: rgb(55, 61, 69);
border-left-color: rgb(55, 61, 69);
}
.Box-body {
border-bottom-color: rgb(52, 59, 68);
}
.Counter {
color: rgb(196, 191, 183);
background-color: rgba(27, 31, 35, 0.08);
}
.text-gray {
color: rgb(196, 191, 183) !important;
}
.btn {
color: rgb(216, 214, 208);
background-color: rgb(29, 31, 32);
background-image: linear-gradient(
-180deg,
rgb(26, 27, 28),
rgb(29, 31, 32) 90%
);
}
.btn.hover,
.btn:hover {
background-color: rgb(31, 33, 35);
background-image: linear-gradient(
-180deg,
rgb(29, 30, 32),
rgb(31, 33, 35) 90%
);
border-top-color: rgba(86, 99, 112, 0.35);
border-right-color: rgba(86, 99, 112, 0.35);
border-bottom-color: rgba(86, 99, 112, 0.35);
border-left-color: rgba(86, 99, 112, 0.35);
}
.btn-outline.disabled,
.btn-outline:disabled {
color: rgba(220, 218, 212, 0.3);
background-color: rgb(24, 26, 27);
border-top-color: rgba(86, 99, 112, 0.15);
border-right-color: rgba(86, 99, 112, 0.15);
border-bottom-color: rgba(86, 99, 112, 0.15);
border-left-color: rgba(86, 99, 112, 0.15);
box-shadow: none;
}
.btn.disabled,
.btn:disabled {
color: rgba(216, 214, 208, 0.4);
background-color: rgb(29, 31, 32);
background-image: none;
border-top-color: rgba(86, 99, 112, 0.2);
border-right-color: rgba(86, 99, 112, 0.2);
border-bottom-color: rgba(86, 99, 112, 0.2);
border-left-color: rgba(86, 99, 112, 0.2);
box-shadow: none;
}
.btn-outline {
color: rgb(77, 172, 253);
background-color: rgb(24, 26, 27);
background-image: none;
}
.btn-outline.selected,
.btn-outline:active,
.btn-outline:hover,
[open] > .btn-outline {
color: rgb(255, 255, 255);
background-color: rgb(3, 95, 199);
background-image: none;
border-top-color: rgb(3, 99, 207);
border-right-color: rgb(3, 99, 207);
border-bottom-color: rgb(3, 99, 207);
border-left-color: rgb(3, 99, 207);
}
.btn-outline.disabled,
.btn-outline:disabled {
color: rgba(220, 218, 212, 0.3);
background-color: rgb(24, 26, 27);
border-top-color: rgba(86, 99, 112, 0.15);
border-right-color: rgba(86, 99, 112, 0.15);
border-bottom-color: rgba(86, 99, 112, 0.15);
border-left-color: rgba(86, 99, 112, 0.15);
box-shadow: none;
}
.user-profile-nav {
background-color: rgb(24, 26, 27);
border-bottom-color: rgb(55, 61, 69);
}
.vcard-username {
color: rgb(195, 191, 182);
}
.vcard-username {
color: rgb(195, 191, 182);
}
.vcard-detail .octicon {
color: rgb(189, 184, 174);
}
.border-top {
border-top-color: rgb(52, 59, 68) !important;
}
.border-bottom {
border-bottom-color: rgb(52, 59, 68) !important;
}
.repohead.experiment-repo-nav {
background-color: rgb(26, 27, 28);
}
.repohead h1 {
color: rgb(196, 191, 183);
}
.pagehead {
border-bottom-color: rgb(52, 59, 68);
}
.file-info-divider {
background-color: rgb(34, 36, 37);
}
.markdown-body h1,
.markdown-body h2 {
border-bottom-color: rgb(50, 57, 66);
}
.markdown-body .highlight pre,
.markdown-body pre {
background-color: rgb(27, 28, 30);
}
.markdown-body table tr {
background-color: rgb(24, 26, 27);
border-top-color: rgb(57, 63, 71);
}
.markdown-body table td,
.markdown-body table th {
border-top-color: rgb(53, 59, 66);
border-right-color: rgb(53, 59, 66);
border-bottom-color: rgb(53, 59, 66);
border-left-color: rgb(53, 59, 66);
}
.markdown-body table tr {
background-color: rgb(24, 26, 27);
border-top-color: rgb(57, 63, 71);
}
.markdown-body table tr:nth-child(2n) {
background-color: rgb(27, 28, 30);
}
.markdown-body table td,
.markdown-body table th {
border-top-color: rgb(53, 59, 66);
border-right-color: rgb(53, 59, 66);
border-bottom-color: rgb(53, 59, 66);
border-left-color: rgb(53, 59, 66);
}
.markdown-body blockquote {
color: rgb(189, 184, 174);
border-left-color: rgb(53, 59, 66);
}
.markdown-body hr {
background-color: rgb(33, 35, 36);
border-top-color: initial;
border-right-color: initial;
border-bottom-color: initial;
border-left-color: initial;
}