Added dark theme

1 files changed, 88 insertions, 38 deletions

diff --git a/theme/custom/custom.css b/theme/custom/custom.css
index f27695a..db4e5f5 100755
--- a/theme/custom/custom.css
+++ b/theme/custom/custom.css
@@ -1,14 +1,42 @@
-body {
- color:#2e3440;
+html[data-theme="dark"] {
+  --main-text-color: #d8dee9;
+  --main-background-color: #2e3440;
+  --side-background-color: #222;
+  --border-color: #4c566a;
+  --link-color: #88c0d0;
 }
 
-main nav {
- border-bottom: 1px solid #d8dee9;
+html[data-theme="dark"] main article h1, main article h2 {
+ color: #5e81ac;
 }
-hr {
- background-color: #d8dee9;
+
+html[data-theme="dark"] main article a:hover {
+ background-color:#5e81ac;
+ color:#fff;
 }
 
+html[data-theme="light"] {
+  --main-text-color: #2e3440;
+  --main-background-color: #fff;
+  --side-background-color: #2e3440;
+  --border-color: #eee;
+  --link-color: #5e81ac;
+}
+
+body {
+ color: var(--main-text-color);
+ background-color: var(--main-background-color);
+}
+a {
+ color: var(--link-color);
+}
+aside {
+ background-color: var(--side-background-color);
+}
+aside,
+aside a {
+ color:#eceff4
+}
 a.btn,
 .tag-cloud a,
 section#isso-thread section.auth-section p.post-action input {
@@ -20,49 +48,34 @@ a.btn:hover,
  background-color:#5e81ac;
  color:#fff;
 }
-
-a {
- color: #5e81ac;
-}
 a:hover {
  color: #5e81ac;
  text-decoration:underline
 }
-
-aside {
- background-color:#2e3440;
-}
-
-aside,
-aside a {
- color:#eceff4
-}
 aside a:hover {
  color:#d8dee9;
  text-decoration:none;
 }
 
-main article :not(pre)>code {
- font-size:.8em;
- white-space:nowrap;
- color:#c25;
- padding:1px 3px;
- background-color:#f7f7f9;
- border:1px solid #e1e1e8;
- border-radius:3px
+
+aside a:hover {
+ color:#d8dee9;
+ text-decoration:none;
 }
-main footer p {
- margin:2px;
- text-align:center;
- padding:0 40px;
- color:#999;
- font-size:11px
+hr {
+ background-color: var(--border-color);
 }
+
 div.related-posts {
  margin:15px 0;
  padding-bottom:20px;
- border-top:1px solid #eee;
- border-bottom:1px solid #eee
+ border-top:1px solid var(--border-color);
+ border-bottom:1px solid var(--border-color);
+}
+
+
+main nav {
+ border-bottom: 1px solid #d8dee9;
 }
 ul.social a.sc-facebook {
  background-color:#3e5b98
@@ -138,6 +151,37 @@ ul.social a.sc-flickr {
 ul.social a.sc-lastfm {
  background-color:#d92323
 }
+main article table {
+ width: 100%;
+}
+.theme-switch {
+  color: unset;
+  background-color: unset;
+  border: 0px;
+}
+@media screen and (max-width: 768px) {
+ .theme-switch {
+  position: absolute;
+  top: 25px;
+  right: 25px;
+ }
+}
+@media screen and (min-width: 768px) {
+ .theme-switch {
+  position: fixed;
+  bottom: 10px;
+ }
+}
+main footer {
+ border-top: var(--border-color);
+}
+main footer p {
+ margin:2px;
+ text-align:center;
+ padding:0 40px;
+ color:#999;
+ font-size:11px
+}
 div.admonition div,
 div.admonition p,
 div.admonition pre {
@@ -183,9 +227,6 @@ div.figure {
  font-size:90%;
  color:#6c757d
 }
-main article table {
- width: 100%;
-}
 main article table th.field-name {
     width: 10em;
     text-align: right;
@@ -195,3 +236,12 @@ main article table th.field-name {
 main article table td.field-body {
     border-top: 0px;
 }
+main article :not(pre)>code {
+ font-size:.8em;
+ white-space:nowrap;
+ color:#c25;
+ padding:1px 3px;
+ background-color:#f7f7f9;
+ border:1px solid #e1e1e8;
+ border-radius:3px
+}