Dark Mode Support

This commit is contained in:
athul 2020-04-16 12:50:38 +05:30
parent 877a560391
commit a8fce7c6f4
4 changed files with 99 additions and 5 deletions

View file

@ -16,15 +16,15 @@
{{ $data := .Data }} {{ $data := .Data }}
<div class="tag-cloud"> <div class="tag-cloud">
<ul>
{{ range $key, $value := .Data.Terms.ByCount }} {{ range $key, $value := .Data.Terms.ByCount }}
{{ $size := (add (mul (div $value.Count $biggest) (sub $max $min)) $min) }} {{ $size := (add (mul (div $value.Count $biggest) (sub $max $min)) $min) }}
{{ $size := (cond (eq $biggest $smallest) $min $size) }} {{ $size := (cond (eq $biggest $smallest) $min $size) }}
<a style="font-size: {{ $size }}rem;" href="{{ $.Site.LanguagePrefix | absURL }}{{ $data.Plural }}/{{ $value.Name | urlize }}/">{{ $value.Name }}</a> <li><a style="font-size: {{ $size }}rem;" href="{{ $.Site.LanguagePrefix | absURL }}{{ $data.Plural }}/{{ $value.Name | urlize }}/">{{ $value.Name }}</a></li>
{{ end }} {{ end }}
</ul>
</div> </div>
{{ partial "footer.html" . }}
<hr>
{{ partial "footer.html" . }}
</div> </div>
</body> </body>

View file

@ -28,6 +28,9 @@
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="{{ .Site.BaseURL }}css/main.css" /> <link rel="stylesheet" type="text/css" media="screen" href="{{ .Site.BaseURL }}css/main.css" />
{{- if or (eq .Site.Params.mode "auto") (eq .Site.Params.mode "dark") -}}
<link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/dark.css" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} />
{{- end -}}
{{- range .Site.Params.customJS }} {{- range .Site.Params.customJS }}
{{- if or (hasPrefix . "http://") (hasPrefix . "https://") }} {{- if or (hasPrefix . "http://") (hasPrefix . "https://") }}
<script src="{{ . }}"></script> <script src="{{ . }}"></script>

90
static/css/dark.css Normal file
View file

@ -0,0 +1,90 @@
body {
color: white;
background-color: #202124;
}
::-moz-selection {
background: blue;
color: #fff;
text-shadow: none
}
::selection {
background: red;
color: #fff;
text-shadow: none
}
hr {
border-top: 3px dotted blue;
}
code {
background-color: lightblue;
color:black;
text-decoration: bold;
padding: .1em .2em;
}
pre {
background-color: #272822;
line-height: 1.4;
overflow-x: auto;
padding: 1em;
}
blockquote {
border-color: blue;
}
h1,h2,h3,h4,h5,h6 {
color: #ddd;
}
h1::before { color: var(--darkMaincolor); content: '# '; }
h2::before { color: var(--darkMaincolor); content: '## '; }
h3::before { color: var(--darkMaincolor); content: '### '; }
h4::before { color: var(--darkMaincolor); content: '#### '; }
h5::before { color: var(--darkMaincolor); content: '##### '; }
h6::before { color: var(--darkMaincolor); content: '###### '; }
a{
border-bottom: 3px solid var(--darkMaincolor);
color:inherit;
}
a:hover {
background-color: var(--darkMaincolor);
color:black;
}
.site-description a{
color: #ddd;
}
.site-description a:hover {
color: black;
}
.tags a{
border-bottom: 3px solid var(--darkMaincolor);
}
.tags a:hover{
color: black;
}
.site-title a {
color: white;
text-decoration: none !important;
}
.header nav,
.footer {
border-color: #333;
}
.highlight {
background-color: #333;
}
.soc:hover{
color: black;
}
.draft-label{
color:var(--darkMaincolor);
background-color: blue;
}

View file

@ -6,6 +6,7 @@
--bordercl:rebeccapurple; --bordercl:rebeccapurple;
--callouctcolor:dodgerblue; --callouctcolor:dodgerblue;
--hovercolor:navy; --hovercolor:navy;
--darkMaincolor: #50fa7b;
} }
html { html {
color: #232333; color: #232333;
@ -51,7 +52,7 @@ a {
} }
a:hover { a:hover {
background-color: var(--hovercolor); background-color: var(--hovercolor);
color: #fff; color: #fff;
} }
ul { ul {