diff --git a/_includes/scripts/misc.html b/_includes/scripts/misc.html
index b00d991..6b10cef 100644
--- a/_includes/scripts/misc.html
+++ b/_includes/scripts/misc.html
@@ -19,3 +19,6 @@ $(function () {$('[data-toggle="tooltip"]').tooltip()})
+
+
+
diff --git a/_sass/_base.scss b/_sass/_base.scss
index bfdfe82..c3c6cee 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -5,9 +5,9 @@
// Typography
a, table.table a {
- color: $theme-color;
+ color: var(--global-theme-color);
&:hover {
- color: $theme-color;
+ color: var(--global-theme-color);
text-decoration: underline;
}
&:hover:after {
@@ -65,7 +65,7 @@ a, table.table a {
color: inherit;
font-size: 0.875rem;
&:hover {
- color: $theme-color;
+ color: var(--global-theme-color);
text-decoration: none;
}
}
@@ -78,6 +78,7 @@ a, table.table a {
box-shadow: none;
border-bottom: 1px solid $grey-color-light;
opacity: 0.95;
+ background-color: var(--global-bg-color);
}
.navbar.navbar-light {
// Remove link decoration
@@ -86,25 +87,27 @@ a, table.table a {
text-decoration: none;
}
}
+ .navbar-brand {
+ color: var(--global-text-color);
+ }
.navbar-nav .nav-item .nav-link {
&:hover {
- color: $theme-color;
+ color: var(--global-hover-color);
}
}
.navbar-nav .nav-item.active>.nav-link {
background-color: inherit;
- color: $theme-color;
font-weight: bolder;
+ color: var(--global-theme-color);
&:hover {
- color: $theme-color;
+ color: var(--global-hover-color);
}
}
.contact-icon {
font-size: 2rem;
a {
- color: $grey-color-dark;
&:hover {
- color: $theme-color;
+ color: var(--global-hover-color);
}
}
}
@@ -150,8 +153,12 @@ a, table.table a {
.news table td {
font-size: 1rem;
+ color: var(--global-text-color);
}
+.news table th {
+ color: var(--global-text-color);
+}
// Social (bottom)
@@ -160,9 +167,9 @@ a, table.table a {
.contact-icon {
font-size: 4rem;
a {
- color: $grey-color-dark;
+ color: var(--global-icon-color);
&:hover {
- color: $theme-color;
+ color: var(--global-theme-color);
}
}
}
@@ -173,19 +180,18 @@ a, table.table a {
// Footer
-
footer.fixed-bottom {
- color: lighten($grey-color, 25%);
- background-color: $grey-color-dark;
+ color: var(--global-footer-text-color);
+ background-color: var(--global-footer-bg-color);
font-size: 0.75rem;
.container {
padding-top: 9px;
padding-bottom: 8px;
}
a {
- color: white;
+ color: var(--global-footer-link-color);
&:hover {
- color: lighten($theme-color, 25%);
+ color: pink;
text-decoration: none;
}
}
@@ -207,7 +213,7 @@ footer.sticky-bottom {
padding-top: 2rem;
padding-bottom: 5rem;
h1 {
- color: $theme-color;
+ color: var(--global-theme-color);
font-size: 5rem;
}
}
@@ -227,19 +233,19 @@ footer.sticky-bottom {
margin-bottom: 0;
}
a {
- color: black;
+ color: var(--global-text-color);
text-decoration: none;
&:hover {
- color: $theme-color;
+ color: var(--global-theme-color);
}
}
}
}
.pagination .page-item.active .page-link {
- background-color: $theme-color;
+ background-color: var(--global-theme-color);
&:hover {
- background-color: $theme-color;
+ background-color: var(--global-theme-color);
}
}
@@ -248,7 +254,7 @@ footer.sticky-bottom {
.distill {
a:hover {
- border-bottom-color: $theme-color;
+ border-bottom-color: var(--global-theme-color);
text-decoration: none;
}
}
@@ -264,7 +270,7 @@ footer.sticky-bottom {
color: black;
text-decoration: none;
&:hover {
- color: $theme-color;
+ color: var(--global-theme-color);
}
}
}
@@ -279,7 +285,7 @@ footer.sticky-bottom {
.publications {
margin-top: 2rem;
h1 {
- color: $theme-color;
+ color: var(--global-theme-color);
font-size: 2rem;
text-align: center;
margin-top: 1em;
@@ -311,7 +317,7 @@ footer.sticky-bottom {
margin-bottom: 0.5rem;
abbr {
display: inline-block;
- background-color: $theme-color;
+ background-color: var(--global-theme-color);
padding-left: 1rem;
padding-right: 1rem;
a {
@@ -322,8 +328,8 @@ footer.sticky-bottom {
}
}
.award {
- color: $theme-color !important;
- border: 1px solid $theme-color;
+ color: var(--global-theme-color) !important;
+ border: 1px solid var(--global-theme-color);
}
}
.title {
@@ -331,7 +337,7 @@ footer.sticky-bottom {
}
.author {
a {
- border-bottom: 1px dashed $theme-color;
+ border-bottom: 1px dashed var(--global-theme-color);
&:hover {
border-bottom-style: solid;
text-decoration: none;
@@ -344,15 +350,15 @@ footer.sticky-bottom {
}
.links {
a.btn {
- color: $text-color;
- border: 1px solid $text-color;
+ color: var(--global-text-color);
+ border: 1px solid var(--global-text-color);
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
&:hover {
- color: $theme-color;
- border-color: $theme-color;
+ color: var(--global-theme-color);
+ border-color: var(--global-theme-color);
}
}
}
@@ -394,3 +400,16 @@ footer.sticky-bottom {
}
}
}
+
+// Rouge Color Customization
+code {
+ color: var(--global-theme-color);
+}
+// Transitioning Themes
+html.transition,
+html.transition *,
+html.transition *:before,
+html.transition *:after {
+ transition: all 750ms !important;
+ transition-delay: 0 !important;
+}
\ No newline at end of file
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
index 3558ba3..3a676b1 100644
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@@ -4,7 +4,8 @@
body {
padding-bottom: 70px;
- color: $text-color;
+ color: var(--global-text-color);
+ background-color: var(--global-bg-color);
}
body.fixed-top-nav {
diff --git a/_sass/_themes.scss b/_sass/_themes.scss
new file mode 100644
index 0000000..8c9bf65
--- /dev/null
+++ b/_sass/_themes.scss
@@ -0,0 +1,43 @@
+/*******************************************************************************
+ * Themes
+ ******************************************************************************/
+
+:root {
+ --global-bg-color: #{$white-color};
+ --global-text-color: #{$black-color};
+ --global-theme-color: #{$purple-color};
+ --global-hover-color: #{$light-purple-color};
+ --global-footer-bg-color: #{$grey-color-dark};
+ --global-footer-text-color: #{$grey-color-light};
+ --global-footer-link-color: #{$white-color};
+ --global-icon-color: #{$grey-color-dark};
+
+ .fa-sun {
+ display : none;
+ }
+ .fa-moon {
+ padding-left: 10px;
+ padding-top: 12px;
+ display : block;
+ }
+}
+
+html[data-theme='dark'] {
+ --global-bg-color: #{$grey-color-dark};
+ --global-text-color: #{$grey-color-light};
+ --global-theme-color: #{$cyan-color};
+ --global-hover-color: #{$light-cyan-color};
+ --global-footer-bg-color: #{$grey-color-light};
+ --global-footer-text-color: #{$grey-color-dark};
+ --global-footer-link-color: #{$black-color};
+ --global-icon-color: navajowhite;
+
+ .fa-sun {
+ padding-left: 10px;
+ padding-top: 12px;
+ display : block;
+ }
+ .fa-moon {
+ display : none;
+ }
+}
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
index 5bb5270..731cf2b 100644
--- a/_sass/_variables.scss
+++ b/_sass/_variables.scss
@@ -14,12 +14,14 @@ $orange-color: #F29105 !default;
$blue-color: #0076df !default;
$blue-color-dark: #00369f !default;
$cyan-color: #2698BA !default;
+$light-cyan-color: lighten($cyan-color, 25%);
$green-color: #00ab37 !default;
$green-color-lime: #B7D12A !default;
$green-color-dark: #009f06 !default;
$green-color-light: #ddffdd !default;
$green-color-bright: #11D68B !default;
$purple-color: #B509AC !default;
+$light-purple-color: lighten($purple-color, 25%);
$pink-color: #f92080 !default;
$pink-color-light: #ffdddd !default;
$yellow-color: #efcc00 !default;
@@ -28,8 +30,5 @@ $grey-color: #828282 !default;
$grey-color-light: lighten($grey-color, 40%);
$grey-color-dark: darken($grey-color, 25%);
-/* Set theme colors *************************/
-$theme-color: $purple-color;
-
-$link-color: $theme-color;
-$text-color: #111 !default;
+$white-color: #ffffff !default;
+$black-color: #000000 !default;
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 5ad18b7..4254d2e 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -5,6 +5,7 @@
@import
"variables",
+ "themes",
"layout",
"base"
;
diff --git a/assets/js/dark_mode.js b/assets/js/dark_mode.js
new file mode 100644
index 0000000..afbd90d
--- /dev/null
+++ b/assets/js/dark_mode.js
@@ -0,0 +1,35 @@
+$(document).ready(function() {
+ const mode_toggle = document.getElementById("light-toggle");
+
+ mode_toggle.addEventListener("click", function() {
+ const temp = localStorage.getItem('theme');
+ toggleTheme(temp);
+ });
+
+ let toggleTheme = (theme) => {
+ if (theme == "dark") {
+ setTheme(null);
+ } else {
+ setTheme('dark');
+ }
+ }
+
+ let setTheme = (theme) => {
+ trans();
+ if (theme) {
+ document.documentElement.setAttribute('data-theme', theme)
+ }
+ else {
+ document.documentElement.removeAttribute('data-theme');
+ }
+ localStorage.setItem('theme', theme);
+ };
+
+ let trans = () => {
+ document.documentElement.classList.add('transition');
+ window.setTimeout(() => {
+ document.documentElement.classList.remove('transition')
+ }, 1000)
+ }
+});
+
\ No newline at end of file
diff --git a/assets/js/theme.js b/assets/js/theme.js
new file mode 100644
index 0000000..02a9610
--- /dev/null
+++ b/assets/js/theme.js
@@ -0,0 +1,17 @@
+//Has to be in the head tag, otherwise a flicker effect will occur.
+let initTheme = (theme) => {
+ if (theme == null) {
+ const userPref = window.matchMedia;
+ if (userPref && userPref('(prefers-color-scheme: dark)').matches) {
+ theme = 'dark';
+ }
+ }
+
+ if (theme) {
+ document.documentElement.setAttribute('data-theme', theme)
+ }
+
+ localStorage.setItem("theme", theme);
+}
+
+initTheme(localStorage.getItem("theme"));