Add WIP hacked up dark theme / mode.
diff --git a/source/_assets/css/main.css b/source/_assets/css/main.css
index 4286565..3bfa73a 100644
--- a/source/_assets/css/main.css
+++ b/source/_assets/css/main.css
@@ -1,10 +1,88 @@
+/* Style overrides for light and dark mode / theme */
+html, html[data-theme="light"] {
+ --main-navbar-color: #eee;
+ --main-navbar-li-active-text-color: rgb(152, 144, 130);
+ --main-navbar-li-active-text-color: #818181;
+ --main-navbar-li-active-background-color: #dfdfdf;
+ --main-background-color: #fff;
+ --main-text-color: #000;
+ --main-border-color: #ccc;
+ --main-code-text-color: #c7254e;
+ --main-code-background-color: #f9f2f4;;
+ --main-syntax-highlight-background-color: #fff0f0;
+ --main-carousel-color: #333;
+ --main-post-date-author: rgba(77,77,77,0.75);
+ --main-navbar-text-color: #000;
+ --main-a-text-color: #428bca;
+ --main-a-hover-focus-color: #2a6496;
+ --main-hr-border-color: #eee;
+}
+
+html[data-theme="dark"] {
+ --main-navbar-color: rgb(34, 36, 38);
+ --main-navbar-li-active-text-color: rgb(152, 144, 130);
+ --main-navbar-li-active-background-color: rgb(42, 46, 47);
+ --main-background-color: rgb(24, 26, 27);
+ --main-text-color: rgb(200, 195, 188);
+ --main-border-color: rgb(62, 68, 70);
+ --main-code-text-color: rgb(221, 73, 110);
+ --main-code-background-color: rgb(43, 20, 26);
+ --main-syntax-highlight-background-color: rgb(60, 0, 0);
+ --main-carousel-color: #fff;
+ --main-post-date-author: rgba(183, 177, 168, 0.75);
+ --main-navbar-text-color: #fff;
+ --main-a-text-color: rgb(125, 178, 219);
+ --main-a-hover-focus-color: rgb(125, 178, 219);
+ --main-hr-border-color: rgb(53, 57, 59);
+}
+
+@media (prefers-color-scheme: dark) {
+ html, html[data-theme="dark"] {
+ --main-navbar-color: rgb(34, 36, 38);
+ --main-navbar-li-active-text-color: rgb(152, 144, 130);
+ --main-navbar-li-active-background-color: rgb(42, 46, 47);
+ --main-background-color: rgb(24, 26, 27);
+ --main-text-color: rgb(200, 195, 188);
+ --main-border-color: rgb(62, 68, 70);
+ --main-code-text-color: rgb(221, 73, 110);
+ --main-code-background-color: rgb(43, 20, 26);
+ --main-syntax-highlight-background-color: rgb(60, 0, 0);
+ --main-carousel-color: #fff;
+ --main-post-date-author: rgba(183, 177, 168, 0.75);
+ --main-navbar-text-color: #fff;
+ --main-a-text-color: rgb(125, 178, 219);
+ --main-a-hover-focus-color: rgb(125, 178, 219);
+ --main-hr-border-color: rgb(53, 57, 59);
+ }
+ html[data-theme="light"] {
+ --main-navbar-color: #eee;
+ --main-navbar-li-active-text-color: rgb(152, 144, 130);
+ --main-navbar-li-active-text-color: #818181;
+ --main-navbar-li-active-background-color: #dfdfdf;
+ --main-text-color: #000;
+ --main-background-color: #fff;
+ --main-border-color: #ccc;
+ --main-code-text-color: #c7254e;
+ --main-code-background-color: #f9f2f4;;
+ --main-syntax-highlight-background-color: #fff0f0;
+ --main-carousel-color: #333;
+ --main-post-date-author: rgba(77,77,77,0.75);
+ --main-navbar-text-color: #000;
+ --main-a-text-color: #428bca;
+ --main-a-hover-focus-color: #2a6496;
+ --main-hr-border-color: #eee;
+ }
+}
+
html, body {
height: 100%;
+ background-color: var(--main-background-color);
+ color: var(--main-text-color);
}
body {
font-family: 'Open Sans', sans-serif;
- font-size: 1.5em;
+ font-size: 1.6em;
padding-top: 80px;
}
@@ -64,7 +142,7 @@
/* Custom background color for the navbar */
.navbar-inverse {
- background-color: #eeeeee;
+ background-color: var(--main-navbar-color);
}
/* Custom hover background */
@@ -77,12 +155,12 @@
}
.navbar-brand {
- color: #000000 !important;
+ color: var(--main-navbar-text-color) !important;
}
.navbar-nav > li.active > a {
- color: #818181 !important;
- background-color: #dfdfdf !important;
+ color: var(--main-navbar-li-active-text-color) !important;
+ background-color: var(--main-navbar-li-active-background-color) !important;
}
/* Custom color for responsive button thingy */
@@ -98,7 +176,7 @@
/* Custom style for responsive menu bar */
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
- background-color: #eeeeee;
+ background-color: var(-main-navbar-color);
/*border-top: #0c60ff solid;*/
}
@@ -149,7 +227,7 @@
}
.carousel-control {
- color: #333 !important;
+ color: var(--main-carousel-color) !important;
}
/* Content pages */
@@ -217,10 +295,23 @@
margin-bottom: 15px;
}
+pre {
+ background-color: var(--main-navbar-color);
+ color: var(--main-text-color);
+}
+
+.popover {
+ background-color: var(--main-background-color);
+ border: 1px solid var(--main-border-color);
+}
+
+pre {
+ border: 1px solid var(--main-border-color);
+}
+
span.post-date-author {
font-style: italic;
- color: rgb(77,77,77);
- color: rgba(77,77,77,0.75);
+ color: var(--main-post-date-author);
}
div.post-content {
@@ -269,3 +360,33 @@
div.footer-text {
margin-top: 10px;
}
+
+div.footer-theme-switch {
+ margin-bottom: 10px;
+}
+
+div.footer-theme-switch a {
+ cursor: pointer;
+}
+
+/* Overrides for purposes of dark and light theme. */
+hr {
+ border-color: var(--main-hr-border-color);
+}
+a {
+ color: var(--main-a-text-color);
+}
+
+a:hover,
+a:focus {
+ color: var(--main-a-hover-focus-color);
+}
+.s {
+ background-color: var(--main-syntax-highlight-background-color);
+}
+
+code {
+ color: var(--main-code-text-color);
+ background-color: var(--main-code-background-color);
+}
+
diff --git a/source/_assets/js/mode-switcher.js b/source/_assets/js/mode-switcher.js
new file mode 100644
index 0000000..eff46a6
--- /dev/null
+++ b/source/_assets/js/mode-switcher.js
@@ -0,0 +1,53 @@
+let systemInitiatedDark = window.matchMedia("(prefers-color-scheme: dark)");
+let theme = sessionStorage.getItem('theme');
+
+if (systemInitiatedDark.matches) {
+ document.getElementById("theme-toggle").innerHTML = "Light Mode";
+} else {
+ document.getElementById("theme-toggle").innerHTML = "Dark Mode";
+}
+
+function prefersColorTest(systemInitiatedDark) {
+ if (systemInitiatedDark.matches) {
+ document.documentElement.setAttribute('data-theme', 'dark');
+ document.getElementById("theme-toggle").innerHTML = "Light Mode";
+ sessionStorage.setItem('theme', '');
+ } else {
+ document.documentElement.setAttribute('data-theme', 'light');
+ document.getElementById("theme-toggle").innerHTML = "Dark Mode";
+ sessionStorage.setItem('theme', '');
+ }
+}
+systemInitiatedDark.addListener(prefersColorTest);
+
+
+function modeSwitcher() {
+ let theme = sessionStorage.getItem('theme');
+ if (theme === "dark") {
+ document.documentElement.setAttribute('data-theme', 'light');
+ sessionStorage.setItem('theme', 'light');
+ document.getElementById("theme-toggle").innerHTML = "Dark Mode";
+ } else if (theme === "light") {
+ document.documentElement.setAttribute('data-theme', 'dark');
+ sessionStorage.setItem('theme', 'dark');
+ document.getElementById("theme-toggle").innerHTML = "Light Mode";
+ } else if (systemInitiatedDark.matches) {
+ document.documentElement.setAttribute('data-theme', 'light');
+ sessionStorage.setItem('theme', 'light');
+ document.getElementById("theme-toggle").innerHTML = "Dark Mode";
+ } else {
+ document.documentElement.setAttribute('data-theme', 'dark');
+ sessionStorage.setItem('theme', 'dark');
+ document.getElementById("theme-toggle").innerHTML = "Light Mode";
+ }
+}
+
+if (theme === "dark") {
+ document.documentElement.setAttribute('data-theme', 'dark');
+ sessionStorage.setItem('theme', 'dark');
+ document.getElementById("theme-toggle").innerHTML = "Light Mode";
+} else if (theme === "light") {
+ document.documentElement.setAttribute('data-theme', 'light');
+ sessionStorage.setItem('theme', 'light');
+ document.getElementById("theme-toggle").innerHTML = "Dark Mode";
+}
diff --git a/source/_includes/footer.html b/source/_includes/footer.html
index b4d77f8..0a142ad 100644
--- a/source/_includes/footer.html
+++ b/source/_includes/footer.html
@@ -1,3 +1,7 @@
+<div class="footer-theme-switch">
+Theme: <a id="theme-toggle" onclick="modeSwitcher()"></a>
+</div>
+
<div class="footer-links">
<p><a href="http://www.apache.org/licenses/">License</a> | <a
href="/security.html">Security</a> | <a
diff --git a/source/_layouts/default.html b/source/_layouts/default.html
index fd08db6..397b3e7 100644
--- a/source/_layouts/default.html
+++ b/source/_layouts/default.html
@@ -89,9 +89,10 @@
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
- {% assign url = page.url | remove:"index.html" %}
+ {% assign url = page.url | remove:"index.html" | replace: ".html", "" %}
{% for item in site.navigation %}
- <li {% if item.text != "Home" and url == item.url %}class="active"{% endif %}><a href="{{ item.url }}" {% if item.external %}target="_blank"{% endif %}>{{ item.text }}</a></li>
+ {% assign item_url = item.url | remove:"index.html" | replace: ".html", "" %}
+ <li {% if item.text != "Home" and url == item_url %}class="active"{% endif %}><a href="{{ item.url }}" {% if item.external %}target="_blank"{% endif %}>{{ item.text }}</a></li>
{% endfor %}
</ul>
</div><!-- /.navbar-collapse -->
@@ -118,6 +119,7 @@
- _assets/js/extern/jquery-3.3.1.min.js
- _assets/js/extern/bootstrap.js
- _assets/js/main.js
+ - _assets/js/mode-switcher.js
{% endjavascript_asset_tag %}
{% if page.url == "/" or page.url == "/index.html" %}
