mirror of
https://github.com/MeiK2333/github-style.git
synced 2025-10-07 01:54:06 +00:00
Add dark style
This commit is contained in:
bLue
@@ -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>
|
||||
|
||||
@@ -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
227
static/css/dark.css
Normal 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;
|
||||
}
|
||||
Reference in New Issue
Block a user