Add dark theme with theme switcher

css/main.css

@@ -558,3 +558,26 @@ div.options-panel form label {
 div.isso-postbox div.form-wrapper section.auth-section p.input-wrapper {
   margin-right: 10px;
 }
+
+/*****************************************************************************/
+/*
+/* Light & Dark Theme Toggle
+/*
+/*****************************************************************************/
+
+div.theme-toggle {
+  position: static;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  z-index: 100;
+}
+
+@media (min-width: 40rem) {
+  div.theme-toggle {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: inherit;
+  }
+}

css/main_dark.css

@@ -0,0 +1,43 @@
+/* Dark theme */
+
+html {
+  background-color: #0F0908;
+}
+
+html {
+  filter: invert(90%);
+}
+
+img:not(.icon), video, div.video-container {
+  filter: invert(100%);
+}
+
+img:not(.icon) {
+  opacity: .75;
+  transition: opacity .5s ease-in-out;
+}
+
+img:hover:not(.icon) {
+  opacity: 1;
+}
+
+a:not(.card), a:hover:not(.card) {
+  filter: invert(100%);
+}
+
+a:not(.card) img:not(.icon) {
+  filter: none;
+}
+
+.post pre {
+  background-color: #fff;
+}
+
+.post code {
+  background-color: #fff;
+}
+
+.post a code {
+  background-color: #222;
+  border: 1px solid #333;
+}

css/syntax_dark.css

@@ -0,0 +1,56 @@
+.highlight code {
+  filter: invert(100%);
+  background-color: #000 !important;
+}
+.highlight  { background: #0F0908; color: #E0CCAE; }
+.highlight .c { color: #6B4035; } /* Comment */
+.highlight .err { color: #F2DDBC; background-color: #66292F } /* Error */
+.highlight .o { color: #A67458 } /* Operator */
+.highlight .cm { color: #6B4035; } /* Comment.Multiline */
+.highlight .cp { color: #6B4035; } /* Comment.Preproc */
+.highlight .c1 { color: #6B4035; } /* Comment.Single */
+.highlight .cs { color: #6B4035; } /* Comment.Special */
+.highlight .gd { color: #BF472C; background-color: #291916 } /* Generic.Deleted */
+.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
+.highlight .gr { color: #66292F } /* Generic.Error */
+.highlight .gh { color: #F2A766 } /* Generic.Heading */
+.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
+.highlight .go { color: #E0CCAE } /* Generic.Output */
+.highlight .gp { color: #8A4B53 } /* Generic.Prompt */
+.highlight .gu { color: #F2A766 } /* Generic.Subheading */
+.highlight .gt { color: #BF472C } /* Generic.Traceback */
+.highlight .kt { color: #BF472C } /* Keyword.Type */
+.highlight .m { color: #8A4B53 } /* Literal.Number */
+.highlight .s { color: #D47D49 } /* Literal.String */
+.highlight .na { color: #BF472C } /* Name.Attribute */
+.highlight .nb { color: #F2A766 } /* Name.Builtin */
+.highlight .nc { color: #445588 } /* Name.Class */
+.highlight .no { color: #F2DDBC } /* Name.Constant */
+.highlight .ni { color: #a4896f } /* Name.Entity */
+.highlight .ne { color: #990000 } /* Name.Exception */
+.highlight .nf { color: #BF472C } /* Name.Function */
+.highlight .nn { color: #BF472C } /* Name.Namespace */
+.highlight .nt { color: #F2A766 } /* Name.Tag */
+.highlight .nv { color: #A67458 } /* Name.Variable */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mf { color: #8A4B53 } /* Literal.Number.Float */
+.highlight .mh { color: #8A4B53 } /* Literal.Number.Hex */
+.highlight .mi { color: #8A4B53 } /* Literal.Number.Integer */
+.highlight .mo { color: #8A4B53 } /* Literal.Number.Oct */
+.highlight .sb { color: #D47D49 } /* Literal.String.Backtick */
+.highlight .sc { color: #D47D49 } /* Literal.String.Char */
+.highlight .sd { color: #D47D49 } /* Literal.String.Doc */
+.highlight .s2 { color: #D47D49 } /* Literal.String.Double */
+.highlight .se { color: #D47D49 } /* Literal.String.Escape */
+.highlight .sh { color: #D47D49 } /* Literal.String.Heredoc */
+.highlight .si { color: #D47D49 } /* Literal.String.Interpol */
+.highlight .sx { color: #D47D49 } /* Literal.String.Other */
+.highlight .sr { color: #D47D49 } /* Literal.String.Regex */
+.highlight .s1 { color: #D47D49 } /* Literal.String.Single */
+.highlight .ss { color: #D47D49 } /* Literal.String.Symbol */
+.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #A67458 } /* Name.Variable.Class */
+.highlight .vg { color: #A67458 } /* Name.Variable.Global */
+.highlight .vi { color: #A67458 } /* Name.Variable.Instance */
+.highlight .il { color: #8A4B53 } /* Literal.Number.Integer.Long */