Add a darkmode switcher

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 {
+body #top-bar #navigation > a, body #top-bar #navigation > span {
-    width: auto;
-}
-body #top-bar #navigation > a {
-    width: 3em;
     border-left: none;
 }
 
-body #top-bar #breadcrumbs > span span, #top-bar #breadcrumbs > a span {
+body #top-bar .progress {
-    font-size: 0.7rem;
+    display: none;
 }
 
-body #top-bar a:visited {
+body #top-bar #navigation {
-    color: #3e7694;
+    margin-left: auto;
-}
+    margin-right: 0;
-
-body #top-bar a:hover {
-    text-decoration: underline;
 }
 
 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

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

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');
+}

themes/yunohost-docs/templates/partials/darkmodeswitcher.html.twig

@@ -0,0 +1,3 @@
+<a href="#" class="dark-mode-switcher">
+    <i class="fa fa-moon-o"></i>
+</a>

themes/yunohost-docs/templates/partials/topbar.html.twig

@@ -5,14 +5,11 @@
     </div>
   {% endif %}
 
-  {% if config.plugins.breadcrumbs.enabled %}
-    {% include 'partials/breadcrumbs.html.twig' %}
-  {% endif %}
-
   <div id="navigation">
     {% if theme_var('github.link') %}
       {% include 'partials/github-link.html.twig' %}
     {% endif %}
+    {% include 'partials/darkmodeswitcher.html.twig' %}
     {% if not progress.isFirst(page.path) %}
       <a class="nav-prev tooltip tooltip-bottom" data-tooltip="Previous Page [&larr;]" href="{{ progress.nextSibling(page.path).url }}"> <i class="fa fa-angle-left"></i></a>
     {% else %}