From d2330cb26158f62412c142f940fd4a62a3835272 Mon Sep 17 00:00:00 2001 From: George Cushen Date: Sun, 2 Dec 2018 00:17:35 +0000 Subject: [PATCH] feat(theme): enable users to switch between day and night modes Close #807 --- assets/js/academic.js | 50 +++++++++++++++++++++++++++- data/themes/dark.toml | 2 +- exampleSite/config.toml | 2 ++ layouts/partials/css/academic.css | 28 ++++++++++------ layouts/partials/css/parse_theme.css | 30 +++++++++++++---- layouts/partials/navbar.html | 7 ++++ 6 files changed, 101 insertions(+), 18 deletions(-) diff --git a/assets/js/academic.js b/assets/js/academic.js index 8f2cd5be..0b65ff4f 100644 --- a/assets/js/academic.js +++ b/assets/js/academic.js @@ -267,7 +267,49 @@ } /* --------------------------------------------------------------------------- - * On window load. + * Toggle day/night mode. + * --------------------------------------------------------------------------- */ + + function toggleDarkMode() { + if ($('body').hasClass('dark')) { + $('body').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 500); + $('body').removeClass('dark'); + $('.js-dark-toggle i').removeClass('fa-sun'); + $('.js-dark-toggle i').addClass('fa-moon'); + localStorage.setItem('dark_mode', '0'); + } else { + $('body').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 500); + $('body').addClass('dark'); + $('.js-dark-toggle i').removeClass('fa-moon'); + $('.js-dark-toggle i').addClass('fa-sun'); + localStorage.setItem('dark_mode', '1'); + } + } + + /* --------------------------------------------------------------------------- + * On document ready. + * --------------------------------------------------------------------------- */ + + $(document).ready(function() { + // Set dark mode if user chose it. + let default_mode = 0; + if ($('body').hasClass('dark')) { + default_mode = 1; + } + let dark_mode = parseInt(localStorage.getItem('dark_mode') || default_mode); + if (dark_mode) { + $('body').addClass('dark'); + $('.js-dark-toggle i').removeClass('fa-moon'); + $('.js-dark-toggle i').addClass('fa-sun'); + } else { + $('body').removeClass('dark'); + $('.js-dark-toggle i').removeClass('fa-sun'); + $('.js-dark-toggle i').addClass('fa-moon'); + } + }); + + /* --------------------------------------------------------------------------- + * On window loaded. * --------------------------------------------------------------------------- */ $(window).on('load', function() { @@ -398,6 +440,12 @@ } }); + // Toggle day/night mode. + $('.js-dark-toggle').click(function(e) { + e.preventDefault(); + toggleDarkMode(); + }); + }); })(jQuery); diff --git a/data/themes/dark.toml b/data/themes/dark.toml index 953d9adb..3b09d8f5 100644 --- a/data/themes/dark.toml +++ b/data/themes/dark.toml @@ -17,4 +17,4 @@ menu_title = "#fff" # Home sections home_section_odd = "hsla(231, 15%, 18%, 1)" -home_section_even = "hsla(231, 15%, 17%, 1)" +home_section_even = "hsla(231, 15%, 16%, 1)" diff --git a/exampleSite/config.toml b/exampleSite/config.toml index bc60c145..ed23a662 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -100,6 +100,8 @@ enableGitInfo = false # Color theme. # Choose from `default`, `ocean`, `forest`, `dark`, `apogee`, `1950s`, `coffee`, `cupcake`. color_theme = "default" + # Enable users to switch between day and night mode? + day_night = true # Font style. # Choose from `default`, `classic`, or `playfair`. diff --git a/layouts/partials/css/academic.css b/layouts/partials/css/academic.css index 1604ec76..bbc44b9b 100644 --- a/layouts/partials/css/academic.css +++ b/layouts/partials/css/academic.css @@ -26,13 +26,13 @@ body { line-height: inherit; color: inherit; background-color: {{ .Get "background" }}; - margin-top: 71px; /* Offset body content by navbar height. */ + margin-top: 70px; /* Offset body content by navbar height. */ padding-top: 0; counter-reset: captions; } @media screen and (max-width: 1200px) { /* Match max-width of .nav-bar query. */ body { - margin-top: 51px; /* Offset body content by navbar height. */ + margin-top: 50px; /* Offset body content by navbar height. */ } } @@ -486,6 +486,14 @@ a[data-fancybox] img { background-color: {{ .Get "home_section_even" }}; } +.dark .home-section { + background-color: {{ .Get "dark_home_section_odd" }}; +} + +.dark .home-section:nth-of-type(even) { + background-color: {{ .Get "dark_home_section_even" }}; +} + @media screen and (max-width: 768px) { .home-section { padding: 60px 0 60px 0; @@ -1861,9 +1869,9 @@ div.alert a { .docs-sidebar { position: -webkit-sticky; position: sticky; - top: 51px; + top: 50px; z-index: 10; - height: calc(100vh - 51px) + height: calc(100vh - 50px) } } } @@ -1876,9 +1884,9 @@ div.alert a { .docs-sidebar { position: -webkit-sticky; position: sticky; - top: 71px; + top: 70px; z-index: 10; - height: calc(100vh - 71px) + height: calc(100vh - 70px) } } } @@ -1931,7 +1939,7 @@ div.alert a { @media (min-width:768px) { @supports ((position:-webkit-sticky) or (position:sticky)) { .docs-links { - max-height: calc(100vh - 5rem - 71px); + max-height: calc(100vh - 5rem - 70px); overflow-y: auto; } } @@ -1956,8 +1964,8 @@ div.alert a { .docs-toc { position: -webkit-sticky; position: sticky; - top: 71px; - height: calc(100vh - 71px); + top: 70px; + height: calc(100vh - 70px); overflow-y: auto } } @@ -2063,7 +2071,7 @@ body.dark, .dark .form-control, .dark .form-control:focus { color: rgb(248, 248, 242); - background: rgb(40, 42, 54); + background: {{ .Get "dark_background" }}; } .dark .form-control { diff --git a/layouts/partials/css/parse_theme.css b/layouts/partials/css/parse_theme.css index 9e1a300c..cda684fe 100644 --- a/layouts/partials/css/parse_theme.css +++ b/layouts/partials/css/parse_theme.css @@ -21,12 +21,32 @@ {{- $scr.Set "light" $theme.light -}} - {{ if $theme.background }} + {{ if and $theme.background $theme.light }} {{- $scr.Set "background" $theme.background -}} - {{ else if $theme.light }} - {{- $scr.Set "background" "#fff" -}} {{ else }} - {{- $scr.Set "background" "rgb(40, 42, 54)" -}} + {{- $scr.Set "background" "#fff" -}} + {{ end }} + + {{ if and $theme.background (not $theme.light) }} + {{- $scr.Set "dark_background" $theme.background -}} + {{ else }} + {{- $scr.Set "dark_background" "rgb(40, 42, 54)" -}} + {{ end }} + + {{ if $theme.light }} + {{- $scr.Set "home_section_odd" $theme.home_section_odd -}} + {{- $scr.Set "home_section_even" $theme.home_section_even -}} + {{ else }} + {{- $scr.Set "home_section_odd" "rgb(255, 255, 255)" -}} + {{- $scr.Set "home_section_even" "rgb(247, 247, 247)" -}} + {{ end }} + + {{ if not $theme.light }} + {{- $scr.Set "dark_home_section_odd" $theme.home_section_odd -}} + {{- $scr.Set "dark_home_section_even" $theme.home_section_even -}} + {{ else }} + {{- $scr.Set "dark_home_section_odd" "hsla(231, 15%, 18%, 1)" -}} + {{- $scr.Set "dark_home_section_even" "hsla(231, 15%, 16%, 1)" -}} {{ end }} {{ if $theme.link }} @@ -50,6 +70,4 @@ {{- $scr.Set "menu_text_active" $theme.menu_text_active -}} {{- $scr.Set "menu_title" $theme.menu_title -}} - {{- $scr.Set "home_section_odd" $theme.home_section_odd -}} - {{- $scr.Set "home_section_even" $theme.home_section_even -}} {{ end }} diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html index 77377c47..8fb4ca44 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -114,6 +114,13 @@ {{ end }} + + {{ if .Site.Params.day_night }} +
  • + +
    • + {{ end }} +