mirror of
https://github.com/YunoHost/doc.git
synced 2024-09-03 20:06:26 +02:00
Add a darkmode switcher
This commit is contained in:
Kay0u
parent
9543b81789
commit
27f20c77bb
5 changed files with 202 additions and 34 deletions
|
|
@ -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
|
||||
|
|
|
|||
127
themes/yunohost-docs/css/darkMode.css
Normal file
127
themes/yunohost-docs/css/darkMode.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
47
themes/yunohost-docs/js/darkMode.js
Normal file
47
themes/yunohost-docs/js/darkMode.js
Normal file
|
|
@ -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');
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<a href="#" class="dark-mode-switcher">
|
||||
<i class="fa fa-moon-o"></i>
|
||||
</a>
|
||||
|
|
@ -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 [←]" href="{{ progress.nextSibling(page.path).url }}"> <i class="fa fa-angle-left"></i></a>
|
||||
{% else %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue