florent/pages
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Issue 105 : Dark Mode + Theming #118 (#119)

Browse Source 
* Dark Mode + Theming

* Themes scss file created with default color scheme and dark color scheme.

* Logic for managing dark mode toggle added.

* Modified existing scss/html to work with theme toggling.

* Fixed hover issues

* Added enable_darkmode to configs.  

* Added the requested option of disabling/enabling dark mode via config files.
This commit is contained in:
JD 2020-10-04 17:32:47 -07:00 committed by GitHub
parent c085a63ca6
commit e30a46bbfa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 170 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_config.yml
View File

@ -151,6 +151,7 @@ enable_google_analytics: false
enable_mansory: true
enable_math: true
enable_tooltips: false
enable_darkmode: false
show_social_icons: false
# -----------------------------------------------------------------------------

5
_includes/head.html
View File

@ -32,3 +32,8 @@
<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | relative_url }}">
<!-- Theming-->
{% if site.enable_darkmode %}
<script src="{{ '/assets/js/theme.js' | relative_url }}"></script>
{% endif %}

10
_includes/header.html
View File

@ -1,7 +1,7 @@
<header>
<!-- Nav Bar -->
<nav id="navbar" class="navbar navbar-light bg-white navbar-expand-sm {% if site.navbar_fixed %}fixed-top{% else %}sticky-top{% endif %}">
<nav id="navbar" class="navbar navbar-light navbar-expand-sm {% if site.navbar_fixed %}fixed-top{% else %}sticky-top{% endif %}">
<div class="container">
{% if page.title != "about" %}
<a class="navbar-brand title font-weight-lighter" href="{{ site.baseurl | prepend: site.url }}/">
@ -56,6 +56,14 @@
</li>
{% endif %}
{% endfor %}
{% if site.enable_darkmode %}
<div class = "toggle-container">
<a id = "light-toggle">
<i class="fas fa-moon"></i>
<i class="fas fa-sun"></i>
</a>
</div>
{% endif %}
</ul>
</div>
</div>

3
_includes/scripts/misc.html
View File

@ -19,3 +19,6 @@ $(function () {$('[data-toggle="tooltip"]').tooltip()})
<!-- Load Common JS -->
<script src="{{ '/assets/js/common.js' | relative_url }}"></script>
<!-- Load DarkMode JS -->
<script src="{{ '/assets/js/dark_mode.js' | relative_url }}"></script>

81
_sass/_base.scss
View File

@ -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;
}

3
_sass/_layout.scss
View File

@ -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 {

43
_sass/_themes.scss Normal file
View File

@ -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;
}
}

9
_sass/_variables.scss
View File

@ -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;

1
assets/css/main.scss
View File

@ -5,6 +5,7 @@
@import
"variables",
"themes",
"layout",
"base"
;

35
assets/js/dark_mode.js Normal file
View File

@ -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)
}
});

17
assets/js/theme.js Normal file
View File

@ -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"));