mirror of
https://github.com/Brandon-Rozek/website-theme.git
synced 2024-09-19 06:25:11 -04:00
Merge pull request #71 from Phyxius/auto-dark-theme
Add automatic dark theme support
This commit is contained in:
Kazuki Koide
GitHub
commit
8ce69fef4c
6 changed files with 148 additions and 4 deletions
89
assets/css/markdown-dark.css
Normal file
89
assets/css/markdown-dark.css
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
#contentBody img {
|
||||
box-shadow: 0px 3px 15px rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
#contentBody hr {
|
||||
border-bottom: 1px solid #201d1a;
|
||||
}
|
||||
|
||||
#contentBody hr {
|
||||
background-color: #1e1b17;
|
||||
}
|
||||
|
||||
#contentBody blockquote {
|
||||
color: #958c82;
|
||||
border-left: 0.25em solid #201d1a;
|
||||
}
|
||||
|
||||
#contentBody kbd {
|
||||
color: #bbb2a9;
|
||||
background-color: #050403;
|
||||
border: solid 1px #39342e;
|
||||
border-bottom-color: #6a625a;
|
||||
box-shadow: inset 0 -1px 0 #6a625a;
|
||||
}
|
||||
|
||||
#contentBody h1 .octicon-link,
|
||||
#contentBody h2 .octicon-link,
|
||||
#contentBody h3 .octicon-link,
|
||||
#contentBody h4 .octicon-link,
|
||||
#contentBody h5 .octicon-link,
|
||||
#contentBody h6 .octicon-link {
|
||||
color: #e4e0dc;
|
||||
}
|
||||
|
||||
#contentBody h1 {
|
||||
border-bottom: 1px solid #363636;
|
||||
}
|
||||
|
||||
#contentBody h2 {
|
||||
border-bottom: 1px solid #363636;
|
||||
}
|
||||
|
||||
|
||||
#contentBody h6 {
|
||||
font-size: 0.85em;
|
||||
color: #958c82;
|
||||
}
|
||||
|
||||
#contentBody table th,
|
||||
#contentBody table td {
|
||||
padding: 6px 13px;
|
||||
border: 1px solid #363636;
|
||||
background-color: #090909;
|
||||
}
|
||||
|
||||
#contentBody img {
|
||||
background-color: #090909;
|
||||
}
|
||||
|
||||
|
||||
#contentBody code {
|
||||
background-color: #090909;
|
||||
}
|
||||
|
||||
#contentBody .highlight pre,
|
||||
#contentBody pre {
|
||||
background-color: #090909;
|
||||
}
|
||||
|
||||
#contentBody .full-commit .btn-outline:not(:disabled):hover {
|
||||
color: #005cc5;
|
||||
border-color: #005cc5;
|
||||
}
|
||||
|
||||
#contentBody kbd {
|
||||
color: #bbb2a9;
|
||||
background-color: #050403;
|
||||
border: solid 1px #2e2a25;
|
||||
border-bottom-color: #39342e;
|
||||
box-shadow: inset 0 -1px 0 #c6cbd1;
|
||||
}
|
||||
|
||||
#contentBody :checked+.radio-label {
|
||||
border-color: #0366d6;
|
||||
}
|
||||
|
||||
#contentBody hr {
|
||||
border-bottom-color: #111;
|
||||
}
|
||||
|
|
@ -485,7 +485,6 @@
|
|||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#contentBody pre code {
|
||||
|
|
|
|||
52
assets/css/style-dark.css
Normal file
52
assets/css/style-dark.css
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
/* General */
|
||||
body {
|
||||
background-color: #101010;
|
||||
color: #8f8f8f;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: #8f8f8f;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #8f8f8f;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #8f8f8f;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: #8f8f8f;
|
||||
}
|
||||
|
||||
#searchBox #searchBoxInput {
|
||||
color: #8f8f8f;
|
||||
background-color:#363636;
|
||||
border: solid 1px #363636;
|
||||
}
|
||||
|
||||
#searchBox #searchBoxInput::placeholder {
|
||||
color: #363636;
|
||||
}
|
||||
|
||||
#searchResults {
|
||||
background-color:#363636;
|
||||
border: solid 1px #363636;
|
||||
}
|
||||
|
||||
#searchResults mark {
|
||||
background-color: #222020;
|
||||
}
|
||||
|
||||
#tags li a {
|
||||
background-color: #222020;
|
||||
}
|
||||
|
||||
#contentsList hr.separator {
|
||||
border: solid 1px #363636;
|
||||
}
|
||||
|
||||
img.avatar-border {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
<!-- avator -->
|
||||
<div class="avatar">
|
||||
<img class="avatarMask" src="/img/{{ .Site.Params.avatar }}" alt="avatar">
|
||||
<img src="/img/avatar-border.svg" alt="avatar-border">
|
||||
<img src="/img/avatar-border.svg" class="avatar-border" alt="avatar-border">
|
||||
</div>
|
||||
<!-- author -->
|
||||
<h1 class="author">{{ .Site.Params.Author }}</h1>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,11 @@
|
|||
{{ $syntaxHighlight := resources.Get "css/syntax-highlight.css" }}
|
||||
{{ $css := slice $style $markdown $syntaxHighlight | resources.Concat "style.css" | resources.Minify | resources.Fingerprint }}
|
||||
<link rel="stylesheet" href="{{ $css.Permalink }}" integrity="{{ $css.Data.Integrity }}">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/all.css" integrity="sha384-rtJEYb85SiYWgfpCr0jn174XgJTn4rptSOQsMroFBPQSGLdOC5IbubP6lJ35qoM9" crossorigin="anonymous">
|
||||
{{ $styleDark := resources.Get "css/style-dark.css" }}
|
||||
{{ $markdownDark := resources.Get "css/markdown-dark.css" }}
|
||||
{{ $cssDark := slice $styleDark $markdownDark | resources.Concat "style-dark.css" | resources.Minify | resources.Fingerprint }}
|
||||
<link rel="stylesheet" href="{{ $cssDark.Permalink }}" media="(prefers-color-scheme: dark)" integrity="{{ $cssDark.Data.Integrity }}">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
||||
|
||||
<!-- custom css -->
|
||||
{{ range .Site.Params.custom_css }}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<!-- avator -->
|
||||
<div class="avatar">
|
||||
<img class="avatarMask" src="{{ .Site.BaseURL }}/img/{{ .Site.Params.avatar }}">
|
||||
<a href="{{ .Site.BaseURL }}"><img src="{{ .Site.BaseURL }}/img/avatar-border.svg"></a>
|
||||
<a href="{{ .Site.BaseURL }}"><img class="avatar-border" src="{{ .Site.BaseURL }}/img/avatar-border.svg"></a>
|
||||
</div>
|
||||
<!-- author -->
|
||||
<h2><a class="author" href="{{ .Site.BaseURL }}">{{ .Site.Params.Author }}</a></h2>
|
||||
|
|
|
|||
Loading…
Reference in a new issue