From 27f20c77bb90ca9bc4ea2a9fcf51f4939eac8395 Mon Sep 17 00:00:00 2001 From: Kay0u Date: Mon, 8 Feb 2021 16:17:32 +0100 Subject: [PATCH] Add a darkmode switcher --- themes/yunohost-docs/css/custom.css | 54 ++++---- themes/yunohost-docs/css/darkMode.css | 127 ++++++++++++++++++ themes/yunohost-docs/js/darkMode.js | 47 +++++++ .../partials/darkmodeswitcher.html.twig | 3 + .../templates/partials/topbar.html.twig | 5 +- 5 files changed, 202 insertions(+), 34 deletions(-) create mode 100644 themes/yunohost-docs/css/darkMode.css create mode 100644 themes/yunohost-docs/js/darkMode.js create mode 100644 themes/yunohost-docs/templates/partials/darkmodeswitcher.html.twig diff --git a/themes/yunohost-docs/css/custom.css b/themes/yunohost-docs/css/custom.css index 56d1323f..36a3af09 100644 --- a/themes/yunohost-docs/css/custom.css +++ b/themes/yunohost-docs/css/custom.css @@ -71,19 +71,6 @@ p { margin: 0px auto; } -/* Breadcrums */ -#top-bar #breadcrumbs > span span, #top-bar #breadcrumbs > a span { - padding: 0 !important; -} - -#top-bar #breadcrumbs > span, #top-bar #breadcrumbs > a { - padding: 0 !important; -} - -#top-bar #breadcrumbs > a { - padding: 0; -} - /* Fonts and headings */ h1, h2, h3, h4, h5, h6 { @@ -129,7 +116,7 @@ img#whitelogo { border-right: 0.05rem solid #ddd; } -body .off-canvas .learn-sidebar a { +body .off-canvas .learn-sidebar a, body .off-canvas .learn-sidebar .side-tools { color: #364149; } @@ -147,24 +134,17 @@ body #top-bar { border-bottom: none; } -body #top-bar #navigation { - width: auto; -} -body #top-bar #navigation > a { - width: 3em; +body #top-bar #navigation > a, body #top-bar #navigation > span { border-left: none; } -body #top-bar #breadcrumbs > span span, #top-bar #breadcrumbs > a span { - font-size: 0.7rem; +body #top-bar .progress { + display: none; } -body #top-bar a:visited { - color: #3e7694; -} - -body #top-bar a:hover { - text-decoration: underline; +body #top-bar #navigation { + margin-left: auto; + margin-right: 0; } body .off-canvas .learn-sidebar .searchbox ::placeholder { @@ -213,8 +193,11 @@ body .off-canvas .learn-sidebar .searchbox input { color: rgb(78, 78, 78); } -body #top-bar #breadcrumbs > span, body #top-bar .progress { - display: none; +/* + * Make shortcode ui compatible with the darkmode +*/ +.tabs-wrapper.ui-theme-lite .tab { + background-color: inherit !important } /* @@ -289,7 +272,18 @@ body #top-bar #breadcrumbs > span, body #top-bar .progress { border-color: #269abc; } - +/*================================================= + Define some colors +=================================================*/ +.danger{ + background-color: #f2dede; +} +.warning { + background-color: #fcf8e3; +} +.success { + background-color: #dff0d8; +} /*================================================= App catalog diff --git a/themes/yunohost-docs/css/darkMode.css b/themes/yunohost-docs/css/darkMode.css new file mode 100644 index 00000000..a179e334 --- /dev/null +++ b/themes/yunohost-docs/css/darkMode.css @@ -0,0 +1,127 @@ +/*! + * Dark Mode Theme + * + * Inspired by Louis Charette + * https://github.com/lcharette/website/blob/cc855a6eb29693613e5e4e1d589a17ba7faf4aa9/themes/quark-custom/css/darkMode.scss + */ + +body.dark-mode { + background-color:#171b21 +} + +body.dark-mode #body-wrapper,body.dark-mode #page-wrapper { + background-color:#171b21; + color:#e8e9eb +} + +body.dark-mode a { + color:#72b6ec +} + +body.dark-mode .card,body.dark-mode #footer,body.dark-mode .dropmenu ul ul { + background-color:#111418 !important +} + +body.dark-mode h1,body.dark-mode h2,body.dark-mode h3,body.dark-mode h4,body.dark-mode h5,body.dark-mode h6,body.dark-mode #header a { + color:#fff +} + +body.dark-mode .label.label-primary { + color:#fff; + background-color:#72b6ec +} + +body.dark-mode .label.label-secondary { + color:#e8e9eb; + background-color:#3f4755 +} + +body.dark-mode .btn,body.dark-mode .button { + background:#171b21 +} + +body.dark-mode .btn:focus,body.dark-mode .btn:hover,body.dark-mode .button:focus,body.dark-mode .button:hover { + background:#111418 +} + +body.dark-mode .pagination li { + border-color:#3f4755; + background:#111418 +} + +body.dark-mode .menu { + background:#171b21; + color:#a5a9af +} + +body.dark-mode .menu .menu-item>a:focus,body.dark-mode .menu .menu-item>a:hover { + background:#111418 +} + +body.dark-mode #sidebar ul.related-pages li { + border-bottom-color:#3f4755 +} +body.dark-mode .form-input,body.dark-mode .search-input,body.dark-mode [data-grav-field="array"] input,body.dark-mode [data-grav-field="array"] textarea { + background:#111418 +} + +body.dark-mode img { + filter:brightness(0.85) contrast(1.2)}.dark-mode-switcher { + padding-left:5px !important +} + +#header,.btn,.button { + transition:none !important +} + + +/* + * + * Custom + * +*/ + +body.dark-mode #top-bar #navigation > a:hover { + background-color:#111418 +} + +body.dark-mode .learn-brand, body.dark-mode .learn-nav { + background-color:#171b21 !important +} + +body.dark-mode .off-canvas .learn-sidebar .learn-brand #logo path { + fill: #e8e9eb !important; +} + +body.dark-mode .simplebar-content h5 { + border-top: 1px solid #3f4755; +} + +body.dark-mode .off-canvas .learn-sidebar .learn-nav ul li.active > a { + color: #a5a9af +} + +body.dark-mode .off-canvas .learn-sidebar .learn-nav .read-icon, body.dark-mode .off-canvas .learn-sidebar .searchbox, body.dark-mode .off-canvas .learn-sidebar .search-options .version-chooser select, +body.dark-mode .off-canvas .learn-sidebar a, body.dark-mode .off-canvas .learn-sidebar .learn-nav ul li a > span > b, body.dark-mode .off-canvas .learn-sidebar .learn-nav ul li a > i, +body.dark-mode .off-canvas .learn-sidebar .learn-nav ul.searched .search-match a:hover, .off-canvas .learn-sidebar .learn-nav ul.searched .search-match a +{ + color: #e8e9eb +} + +body.dark-mode table tbody tr:nth-of-type(2n+1) { + background:#111418 +} + +body.dark-mode table td, table th { + border-bottom-color: #3f4755 +} + +body.dark-mode .danger{ + background-color: #806c6c; +} +body.dark-mode .warning { + background-color: #6b6859; +} +body.dark-mode .success { + background-color: #6a7964; +} \ No newline at end of file diff --git a/themes/yunohost-docs/js/darkMode.js b/themes/yunohost-docs/js/darkMode.js new file mode 100644 index 00000000..f4a6f26d --- /dev/null +++ b/themes/yunohost-docs/js/darkMode.js @@ -0,0 +1,47 @@ + +/** + * Custom dark mode + */ + +// Get user preference +const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches; + +// Select the theme preference from localStorage +const currentTheme = localStorage.getItem("theme") ? localStorage.getItem("theme") : null; + +// If the current theme in localStorage is "dark" or user prefer dark, apply it +if (currentTheme == "dark" || (currentTheme == null && prefersDarkScheme)) { + document.body.classList.add("dark-mode"); +} + +// Get all elements with switch class +const switches = document.querySelectorAll(".dark-mode-switcher"); + +// Apply event function to each element +for (var i = 0; i < switches.length; i++) { + switches[i].addEventListener('click', darkModeSwith); +} + +function darkModeSwith(event) { + + // Prevent href action + event.preventDefault(); + + // Toggle the .dark-theme class + document.body.classList.toggle("dark-mode"); + + // If the body contains the .dark-theme class... + // Then save the choice in localStorage + if (document.body.classList.contains("dark-mode")) { + localStorage.setItem("theme", "dark"); + } else { + localStorage.setItem("theme", "light"); + } + + // Close mobile menu + if (toggle = document.querySelector('#toggle')) + toggle.classList.remove('active'); + if (overlay = document.querySelector('#overlay')) + overlay.classList.remove('open'); + document.body.classList.remove('mobile-nav-open'); +} \ No newline at end of file diff --git a/themes/yunohost-docs/templates/partials/darkmodeswitcher.html.twig b/themes/yunohost-docs/templates/partials/darkmodeswitcher.html.twig new file mode 100644 index 00000000..99e7911f --- /dev/null +++ b/themes/yunohost-docs/templates/partials/darkmodeswitcher.html.twig @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/themes/yunohost-docs/templates/partials/topbar.html.twig b/themes/yunohost-docs/templates/partials/topbar.html.twig index 39bd21c0..87734f15 100644 --- a/themes/yunohost-docs/templates/partials/topbar.html.twig +++ b/themes/yunohost-docs/templates/partials/topbar.html.twig @@ -5,14 +5,11 @@ {% endif %} - {% if config.plugins.breadcrumbs.enabled %} - {% include 'partials/breadcrumbs.html.twig' %} - {% endif %} -