diff --git a/themes/yunohost-docs/css/custom.css b/themes/yunohost-docs/css/custom.css
index bbeff4c5..7143bc4e 100644
--- a/themes/yunohost-docs/css/custom.css
+++ b/themes/yunohost-docs/css/custom.css
@@ -1,203 +1,503 @@
-.off-canvas .learn-sidebar:before {
-    background: none;
+body.light-mode {
+  background-color: white;
+  /*=================================================
+  Side Bar
+  =================================================*/
+  /*=================================================
+   App catalog
+  =================================================*/
+  /*=================================================
+   Other
+  =================================================*/
+}
+body.light-mode ::selection {
+  background-color: #dddddd;
+}
+body.light-mode #body-wrapper,
+body.light-mode #page-wrapper {
+  background-color: white;
+  color: #171b21;
+}
+body.light-mode a {
+  color: #72b6ec;
+}
+body.light-mode .card,
+body.light-mode #footer,
+body.light-mode .dropmenu ul ul {
+  background-color: #f0f0f0 !important;
+}
+body.light-mode h1,
+body.light-mode h2,
+body.light-mode h3,
+body.light-mode h4,
+body.light-mode h5,
+body.light-mode h6,
+body.light-mode #header a {
+  color: #242931;
+}
+body.light-mode .label.label-primary {
+  color: #242931;
+  background-color: #72b6ec;
+}
+body.light-mode .label.label-secondary {
+  color: #171b21;
+  background-color: #dddddd;
+}
+body.light-mode .pagination li {
+  border-color: #dddddd;
+  background: #f0f0f0;
+}
+body.light-mode #sidebar-id {
+  background: white;
+}
+body.light-mode .menu,
+body.light-mode .learn-brand,
+body.light-mode .learn-nav {
+  color: #111418;
+}
+body.light-mode .menu .menu-item > a:focus,
+body.light-mode .menu .menu-item > a:hover,
+body.light-mode #top-bar #navigation > a:hover {
+  background: #f0f0f0;
+}
+body.light-mode #sidebar ul.related-pages li {
+  border-bottom-color: #dddddd;
+}
+body.light-mode .form-input,
+body.light-mode .search-input,
+body.light-mode [data-grav-field=array] input,
+body.light-mode [data-grav-field=array] textarea {
+  background: #f0f0f0;
+}
+body.light-mode .off-canvas .learn-sidebar .learn-brand #logo path {
+  fill: #171b21 !important;
+}
+body.light-mode .simplebar-content h5 {
+  border-top-color: #dddddd;
+}
+body.light-mode .off-canvas .learn-sidebar .learn-nav ul.searched a,
+body.light-mode .off-canvas .learn-sidebar .searchbox input {
+  color: #171b21;
+}
+body.light-mode .off-canvas .learn-sidebar .learn-nav ul li.active > a,
+body.light-mode .off-canvas .learn-sidebar .searchbox ::placeholder {
+  color: #111418;
+  background-color: transparent;
+}
+body.light-mode .off-canvas .learn-sidebar .learn-nav ul.searched .search-match a:hover,
+body.light-mode .off-canvas .learn-sidebar .learn-nav ul.searched .search-match a {
+  color: #72b6ec;
+}
+body.light-mode .off-canvas .learn-sidebar .learn-nav .read-icon,
+body.light-mode .off-canvas .learn-sidebar .searchbox {
+  color: #171b21;
+}
+body.light-mode .off-canvas .learn-sidebar .search-options .version-chooser select {
+  color: #171b21;
+}
+body.light-mode .off-canvas .learn-sidebar a,
+body.light-mode .off-canvas .learn-sidebar .learn-nav ul li a,
+body.light-mode .off-canvas .learn-sidebar .learn-nav ul li a > i,
+body.light-mode .off-canvas .learn-sidebar .learn-nav ul li a > span > b {
+  color: #171b21;
+}
+body.light-mode .off-canvas .learn-sidebar a:hover {
+  color: #111418;
+}
+body.light-mode #filter-app-icon {
+  background-color: #f0f0f0;
+}
+body.light-mode #app-cards-list .app-title {
+  color: #242931;
+}
+body.light-mode #app-cards-list .app-buttons {
+  border-top: 0.05rem solid #f0f0f0;
+}
+body.light-mode #app-cards-list .app-buttons > .btn-default {
+  color: #242931;
+  background-color: #dddddd;
+}
+body.light-mode #app-cards-list .app-buttons > .btn:first-child {
+  border-right: 0.1rem solid #f0f0f0;
+}
+body.light-mode #app-cards-list .app-card {
+  border-color: #dddddd;
+}
+body.light-mode #app-cards-list .label {
+  color: #111418;
+  background-color: #f0f0f0;
+}
+body.light-mode table tbody tr:nth-of-type(2n + 1) {
+  background: #f0f0f0;
+}
+body.light-mode table td,
+body.light-mode table th {
+  border-bottom-color: #dddddd;
+}
+body.light-mode .danger {
+  background-color: #f2dede;
+}
+body.light-mode .warning {
+  background-color: #fcf8e3;
+}
+body.light-mode .success {
+  background-color: #dff0d8;
+}
+body.light-mode .page-toc {
+  background-color: #f0f0f0;
+}
+body.light-mode .page-toc li,
+body.light-mode .page-toc li > a {
+  color: #242931;
+}
+
+/*=================================================
+ Light mode specific
+=================================================*/
+body.light-mode {
+  /* Give a gray background to the white logo*/
+}
+body.light-mode img#whitelogo {
+  background-color: gray;
+  padding: 10px;
+}
+
+/*!
+ * 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;
+  /*=================================================
+  Side Bar
+  =================================================*/
+  /*=================================================
+   App catalog
+  =================================================*/
+  /*=================================================
+   Other
+  =================================================*/
+}
+body.dark-mode ::selection {
+  background-color: #3f4755;
+}
+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: white;
+}
+body.dark-mode .label.label-primary {
+  color: white;
+  background-color: #72b6ec;
+}
+body.dark-mode .label.label-secondary {
+  color: #e8e9eb;
+  background-color: #3f4755;
+}
+body.dark-mode .pagination li {
+  border-color: #3f4755;
+  background: #111418;
+}
+body.dark-mode #sidebar-id {
+  background: #171b21;
+}
+body.dark-mode .menu,
+body.dark-mode .learn-brand,
+body.dark-mode .learn-nav {
+  color: #a5a9af;
+}
+body.dark-mode .menu .menu-item > a:focus,
+body.dark-mode .menu .menu-item > a:hover,
+body.dark-mode #top-bar #navigation > 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 .off-canvas .learn-sidebar .learn-brand #logo path {
+  fill: #e8e9eb !important;
+}
+body.dark-mode .simplebar-content h5 {
+  border-top-color: #3f4755;
+}
+body.dark-mode .off-canvas .learn-sidebar .learn-nav ul.searched a,
+body.dark-mode .off-canvas .learn-sidebar .searchbox input {
+  color: #e8e9eb;
+}
+body.dark-mode .off-canvas .learn-sidebar .learn-nav ul li.active > a,
+body.dark-mode .off-canvas .learn-sidebar .searchbox ::placeholder {
+  color: #a5a9af;
+  background-color: transparent;
+}
+body.dark-mode .off-canvas .learn-sidebar .learn-nav ul.searched .search-match a:hover,
+body.dark-mode .off-canvas .learn-sidebar .learn-nav ul.searched .search-match a {
+  color: #72b6ec;
+}
+body.dark-mode .off-canvas .learn-sidebar .learn-nav .read-icon,
+body.dark-mode .off-canvas .learn-sidebar .searchbox {
+  color: #e8e9eb;
+}
+body.dark-mode .off-canvas .learn-sidebar .search-options .version-chooser select {
+  color: #e8e9eb;
+}
+body.dark-mode .off-canvas .learn-sidebar a,
+body.dark-mode .off-canvas .learn-sidebar .learn-nav ul li a,
+body.dark-mode .off-canvas .learn-sidebar .learn-nav ul li a > i,
+body.dark-mode .off-canvas .learn-sidebar .learn-nav ul li a > span > b {
+  color: #e8e9eb;
+}
+body.dark-mode .off-canvas .learn-sidebar a:hover {
+  color: #a5a9af;
+}
+body.dark-mode #filter-app-icon {
+  background-color: #111418;
+}
+body.dark-mode #app-cards-list .app-title {
+  color: white;
+}
+body.dark-mode #app-cards-list .app-buttons {
+  border-top: 0.05rem solid #111418;
+}
+body.dark-mode #app-cards-list .app-buttons > .btn-default {
+  color: white;
+  background-color: #3f4755;
+}
+body.dark-mode #app-cards-list .app-buttons > .btn:first-child {
+  border-right: 0.1rem solid #111418;
+}
+body.dark-mode #app-cards-list .app-card {
+  border-color: #3f4755;
+}
+body.dark-mode #app-cards-list .label {
+  color: #a5a9af;
+  background-color: #111418;
+}
+body.dark-mode table tbody tr:nth-of-type(2n + 1) {
+  background: #111418;
+}
+body.dark-mode table td,
+body.dark-mode 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;
+}
+body.dark-mode .page-toc {
+  background-color: #111418;
+}
+body.dark-mode .page-toc li,
+body.dark-mode .page-toc li > a {
+  color: white;
+}
+
+/*=================================================
+ Dark mode specific
+=================================================*/
+body.dark-mode img {
+  filter: brightness(0.85) contrast(1.2);
+}
+body.dark-mode img#whitelogo {
+  background-color: unset;
+  padding: 10px;
+}
+body.dark-mode #ynhlogo {
+  filter: invert(1);
+}
+body.dark-mode .notices.yellow {
+  border-left-color: #935b0c;
+  background-color: #31220b;
+  color: #eea034;
+}
+body.dark-mode .notices.red {
+  border-left-color: #89211e;
+  background-color: #2e0b0b;
+  color: #db5a56;
+}
+body.dark-mode .notices.blue,
+body.dark-mode .notices.note {
+  border-left-color: #1b6e86;
+  background-color: #13222a;
+  color: #4bb9da;
+}
+body.dark-mode .notices.green {
+  border-left-color: #347834;
+  background-color: #192c13;
+  color: #7ac57a;
+}
+
+.learn-sidebar:before {
+  background: none !important;
 }
 
 #chapter {
- max-width: 80%;
+  max-width: 80%;
 }
 
 /* Images helper classes */
 img.inline {
- display:inline;
- margin:5px 15px 5px 5px;
- vertical-align: middle;
+  display: inline;
+  margin: 5px 15px 5px 5px;
+  vertical-align: middle;
 }
 
 img.center {
- display: block;
- margin:5px 15px 5px 5px;
- margin-left: auto;
- margin-right: auto;
+  display: block;
+  margin: 5px 15px 5px 5px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 td img {
- margin: 0.2rem auto;
+  margin: 0.2rem auto;
 }
 
 /* Figures and caption */
 figure img {
- margin: auto;
+  margin: auto;
 }
 
 figure figcaption {
- font-style: italic;
+  font-style: italic;
 }
 
 /* List spacing */
-ul li, ol li {
- margin-top: 0;
+ul li,
+ol li {
+  margin-top: 0;
 }
 
-ul, ol {
- margin-bottom: 0;
+ul,
+ol {
+  margin-bottom: 0;
 }
 
 li p {
- margin: inherit;
+  margin: inherit;
 }
 
 /* Paragraphs */
 p {
- margin: 0 0 1rem;
+  margin: 0 0 1rem;
 }
 
 .notices p {
- margin: 0 0 0 0.5rem;
+  margin: 0 0 0 0.5rem;
 }
 
 /* Flex */
 .flex-container {
- display: flex;
- justify-content: space-around;
- flex-wrap: wrap;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
 }
 
 .flex-child {
- display: inline-flex;
- text-align: center;
+  display: inline-flex;
+  text-align: center;
 }
 
 .nomargin * {
- margin: 0px auto;
+  margin: 0px auto;
 }
 
 /* Fonts and headings */
-
-h1, h2, h3, h4, h5, h6 {
-   font-family: "Source Sans Pro", "Metropolis", "Helvetica Neue", sans-serif;
-   margin-top: 1rem;
-   margin-bottom: 1rem;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Source Sans Pro", "Metropolis", "Helvetica Neue", sans-serif;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 
 .simplebar-content h5 .fa {
-   font-size: 0.75em;
-   margin-right: 0.2em;
-   margin-left: 0.4em;
+  font-size: 0.75em;
+  margin-right: 0.2em;
+  margin-left: 0.4em;
 }
 
 .simplebar-content h5 {
-   letter-spacing: 0em;
-   border-top: 1px solid #ddd;
-   padding: 0.8em 0;
-   margin: 0;
+  letter-spacing: 0em;
+  border-top: 1px solid;
+  padding: 0.8em 0;
+  margin: 0;
 }
 
 @font-face {
-    font-family: 'Source Sans Pro';
-    src: url('../fonts/SourceSansPro-Bold-webfont.eot');
-    src: url('../fonts/SourceSansPro-Bold-webfont.eot?#iefix') format('embedded-opentype'),
-         url('../fonts/SourceSansPro-Bold-webfont.woff') format('woff'),
-         url('../fonts/SourceSansPro-Bold-webfont.ttf') format('truetype'),
-         url('../fonts/SourceSansPro-Bold-webfont.svg#fonts/SourceSansProBold') format('svg');
-    font-weight: 700;
-    font-style: normal;
+  font-family: "Source Sans Pro";
+  src: url("../fonts/SourceSansPro-Bold-webfont.eot");
+  src: url("../fonts/SourceSansPro-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/SourceSansPro-Bold-webfont.woff") format("woff"), url("../fonts/SourceSansPro-Bold-webfont.ttf") format("truetype"), url("../fonts/SourceSansPro-Bold-webfont.svg#fonts/SourceSansProBold") format("svg");
+  font-weight: 700;
+  font-style: normal;
 }
-
-/* Give a gray background to the white logo*/
-img#whitelogo {
-    background-color: gray;
-    padding: 10px;
-}
-
-/* Sidebar */
-
-#sidebar-id {
-    background-color: #fffefe;
-    border-right: 0.05rem solid #ddd;
-}
-
-body .off-canvas .learn-sidebar a, body .off-canvas .learn-sidebar .side-tools {
-    color: #364149;
-}
-
-body .off-canvas .learn-sidebar .learn-nav ul li.active > a {
-    color: black;
-    background-color: transparent;
-}
-
-body .off-canvas .learn-sidebar .learn-brand #logo path {
-    fill: black!important;
-}
-
+/*=================================================
+ TOP BAR
+=================================================*/
 body #top-bar {
-    background: none;
-    border-bottom: none;
+  background: none;
+  border-bottom: none;
 }
 
-body #top-bar #navigation > a, body #top-bar #navigation > span {
-    border-left: none;
+body #top-bar #navigation > a,
+body #top-bar #navigation > span {
+  border-left: none;
 }
 
 body #top-bar .progress {
-    display: none;
+  display: none;
 }
 
 body #top-bar #navigation {
-    margin-left: auto;
-    margin-right: 0;
-}
-
-body .off-canvas .learn-sidebar .learn-nav ul.searched a {
-    color: black;
-}
-
-body .off-canvas .learn-sidebar .learn-nav ul.searched .search-match a:hover, body  .off-canvas .learn-sidebar .learn-nav ul.searched .search-match a {
-    color: #37419a;
-}
-
-body .off-canvas .learn-sidebar a:hover {
-    color: #37419a;
-}
-
-body #header .off-canvas .learn-sidebar a:hover {
-    color: black;
-    text-decoration: underline black;
-}
-
-body .off-canvas .learn-sidebar .learn-nav ul .parent ul {
-    margin-left: 0.5rem;
-}
-
-body .off-canvas .learn-sidebar .learn-nav ul li a > span > b {
-    color: black;
-}
-
-body .off-canvas .learn-sidebar .learn-nav ul.topics > li.active, body .off-canvas .learn-sidebar .learn-nav ul.topics > li.parent {
-    background-color: rgba(0, 0, 0, 0.1);
+  margin-left: auto;
+  margin-right: 0;
 }
 
+/*=================================================
+ SIDE BAR
+=================================================*/
 body .off-canvas .learn-sidebar .learn-nav ul li ul li.active > a {
-    background-color: rgba(0, 0, 0, 0.1);
-    border-left: 4px solid mediumturquoise;
+  background-color: rgba(0, 0, 0, 0.1);
+  border-left: 4px solid mediumturquoise;
 }
 
-body .off-canvas .learn-sidebar .learn-nav .read-icon, body .off-canvas .learn-sidebar .searchbox, body .off-canvas .learn-sidebar .search-options .version-chooser select {
-    color: rgba(0, 0, 0, 0.6);
-}
-
-body .off-canvas .learn-sidebar .searchbox ::placeholder {
-    color: rgba(68, 68, 68, 0.8);
-}
-
-body .off-canvas .learn-sidebar .searchbox input {
-    color: rgb(78, 78, 78);
-}
-
-/*
- * Make shortcode ui compatible with the darkmode
-*/
+/*=================================================
+ SHORTCODE UI
+=================================================*/
 .tabs-wrapper.ui-theme-lite .tab {
-    background-color: inherit !important
+  background-color: inherit !important;
 }
 
 /*
@@ -205,163 +505,149 @@ body .off-canvas .learn-sidebar .searchbox input {
   Style sheet for the cards
 ###############################################################################
 */
-
 .hardware.active {
-    box-shadow: 0 0 15px #bbb;
-    border-radius: 5px;
+  box-shadow: 0 0 15px #bbb;
+  border-radius: 5px;
 }
 
 .hardware-image #cards-list:after {
-    content:'';
-    display:block;
-    clear: both;
+  content: "";
+  display: block;
+  clear: both;
 }
 
 .hardware-image .card {
-    margin-bottom:20px;
-    width:270px;
-    float:left;
-    min-height: 1px;
-    margin-right: 10px;
-    margin-left: 10px;
+  margin-bottom: 20px;
+  width: 270px;
+  float: left;
+  min-height: 1px;
+  margin-right: 10px;
+  margin-left: 10px;
 }
 
-.hardware-image .card .panel-body >  h3 {
-    margin-top:0;
-    margin-bottom:5px;
-    font-size:1.2em;
+.hardware-image .card .panel-body > h3 {
+  margin-top: 0;
+  margin-bottom: 5px;
+  font-size: 1.2em;
 }
 
 .hardware-image .card-desc {
-    height:135px;
-    overflow: hidden;
+  height: 135px;
+  overflow: hidden;
 }
 
 .hardware-image .card .btn-group {
-    width:100%;
-    margin-left: 0px;
+  width: 100%;
+  margin-left: 0px;
 }
-.hardware-image .card > .btn-group > .btn{
-    border-bottom:0;
+
+.hardware-image .card > .btn-group > .btn {
+  border-bottom: 0;
 }
-.hardware-image .card > .btn-group {   
-    border-left:0;
-    border-top-left-radius:0;
-    border-top-right-radius:0;
-    margin-left: 0px;
+
+.hardware-image .card > .btn-group {
+  border-left: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  margin-left: 0px;
 }
+
 .hardware-image .card-comment {
-    font-size: 0.8em;
-    margin-top:-5px;
+  font-size: 0.8em;
+  margin-top: -5px;
 }
+
 .hardware-image .card > .annotations {
-    text-align:center;
-    font-size:small;
+  text-align: center;
+  font-size: small;
 }
+
 .hardware-image .card img {
-    margin: 1rem auto;
+  margin: 1rem auto;
 }
+
 .hardware-image .btn-group .btn.btn-info {
-    color: #ffffff;
-    background-color: #5bc0de;
-    border-color: #46b8da;
+  color: #ffffff;
+  background-color: #5bc0de;
+  border-color: #46b8da;
 }
-.hardware-image .btn-group .btn.btn-info:hover, .btn.btn-info:focus {
-    color: #ffffff;
-    background-color: #39b3d7;
-    border-color: #269abc;
+
+.hardware-image .btn-group .btn.btn-info:hover,
+.btn.btn-info:focus {
+  color: #ffffff;
+  background-color: #39b3d7;
+  border-color: #269abc;
 }
 
 /*=================================================
- Define some colors
-=================================================*/
-.danger{
-  background-color: #f2dede;
-}
-.warning {
-  background-color: #fcf8e3;
-}
-.success {
-  background-color: #dff0d8;
-}
-
-/*=================================================
- App catalog
+  App catalog
 =================================================*/
 #filter-app-icon {
-    padding: 6px 12px;
-    margin-right: -2px;
-    background-color: #f0f0f0;
+  padding: 6px 12px;
+  margin-right: -2px;
 }
 
-#filter-app-cards, #app-cards-list {
-    width:100%;
+#filter-app-cards,
+#app-cards-list {
+  width: 100%;
 }
 
 #app-cards-list:after {
-    content:'';
-    display:block;
-    clear: both;
+  content: "";
+  display: block;
+  clear: both;
 }
 
 #app-cards-list .app-card {
-    margin-bottom:30px;
-    width:28%;
-    float:left;
-    min-height: 1px;
-    margin-right: 15px;
-    margin-left: 15px;
-    border-radius: 3px;
-    position: relative;
-    height: 230px;
+  margin-bottom: 30px;
+  width: 28%;
+  float: left;
+  min-height: 1px;
+  margin-right: 15px;
+  margin-left: 15px;
+  border-radius: 3px;
+  position: relative;
+  height: 230px;
 }
 
 #app-cards-list .app-title {
-    margin-top: 0;
-    margin-bottom: 5px;
-    font-size: 1.2em;
-    font-weight: 700;
-    line-height: 1.1;
-    color: black;
-    padding: 1rem 1rem;
-    padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 5px;
+  font-size: 1.2em;
+  font-weight: 700;
+  line-height: 1.1;
+  padding: 1rem 1rem;
+  padding-bottom: 0;
 }
 
 #app-cards-list .app-title .label {
-    font-size: 0.5em;
-    display: inline-block;
-    vertical-align: middle;
-    padding: 0.5em 0.6em;
-    padding-bottom: 0.3em;
+  font-size: 0.5em;
+  display: inline-block;
+  vertical-align: middle;
+  padding: 0.5em 0.6em;
+  padding-bottom: 0.3em;
 }
 
 #app-cards-list .app-descr {
-    height:120px;
-    overflow: hidden;
-    padding: 0.2rem 1rem;
+  height: 120px;
+  overflow: hidden;
+  padding: 0.2rem 1rem;
 }
 
 #app-cards-list .app-footer {
-   width:100%;
-   position: absolute;
-   bottom: 0;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
 }
 
 #app-cards-list .app-buttons {
-    border-top: 0.05rem solid #ddd;
-    width:100%;
+  width: 100%;
 }
+
 #app-cards-list .app-buttons > .btn {
-    border: 0;
-    font-size: 0.9em;
-    line-height: 1.58;
-}
-
-#app-cards-list .app-buttons > .btn-default {
-    color: #222;
-}
-
-#app-cards-list .app-buttons > .btn:first-child {
-    border-right: 0.1rem solid #ddd;
+  border: 0;
+  font-size: 0.9em;
+  line-height: 1.58;
 }
 
+/*# sourceMappingURL=custom.css.map */
diff --git a/themes/yunohost-docs/css/custom.css.map b/themes/yunohost-docs/css/custom.css.map
new file mode 100644
index 00000000..67bc4448
--- /dev/null
+++ b/themes/yunohost-docs/css/custom.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/theme/light/_custom.scss","../scss/theme/dark/_custom.scss","../scss/theme/_global.scss"],"names":[],"mappings":"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ACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EAIA;EACA;;AAGF;AAAA;AAAA;AAIA;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAMA;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;AAAA;EAEE;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA","file":"custom.css"}
\ No newline at end of file
diff --git a/themes/yunohost-docs/css/darkMode.css b/themes/yunohost-docs/css/darkMode.css
deleted file mode 100644
index 99a782c5..00000000
--- a/themes/yunohost-docs/css/darkMode.css
+++ /dev/null
@@ -1,163 +0,0 @@
-/*!
- * 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 .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)
-}
-
-
-/*
- * 
- * 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.searched a {
-    color: #e8e9eb
-}
-
-body.dark-mode .off-canvas .learn-sidebar .learn-nav ul li.active > a {
-    color: #a5a9af
-}
-
-body.dark-mode .off-canvas .learn-sidebar .searchbox ::placeholder {
-    color: #a5a9af
-}
-
-body.dark-mode .off-canvas .learn-sidebar .searchbox input {
-    color: #e8e9eb
-}
-
-body .off-canvas .learn-sidebar .learn-nav ul.searched .search-match a:hover, body  .off-canvas .learn-sidebar .learn-nav ul.searched .search-match a {
-    color: #666c9c;
-}
-
-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
-{
-    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;
-}
-
-body.dark-mode .notices.yellow {
-    border-left-color: rgb(147, 91, 12);
-    background-color: rgb(49, 34, 11);
-    color: rgb(238, 160, 52);
-}
-
-body.dark-mode .notices.red {
-    border-left-color: rgb(137, 33, 30);
-    background-color: rgb(46, 11, 11);
-    color: rgb(219, 90, 86);
-}
-
-body.dark-mode .notices.note {
-    border-left-color: rgb(27, 110, 134);
-    background-color: rgb(19, 34, 42);
-    color: rgb(75, 185, 218);
-}
-
-body.dark-mode .notices.green {
-    border-left-color: rgb(52, 120, 52);
-    background-color: rgb(25, 44, 19);
-    color: rgb(122, 197, 122);
-}
-
-body.dark-mode #ynhlogo {
-    filter: invert(1);
-}
-
-/* Give a gray background to the white logo*/
-body.dark-mode img#whitelogo {
-    background-color: unset;
-    padding: 0;
-}
diff --git a/themes/yunohost-docs/js/darkMode.js b/themes/yunohost-docs/js/darkMode.js
index f4a6f26d..7df345a2 100644
--- a/themes/yunohost-docs/js/darkMode.js
+++ b/themes/yunohost-docs/js/darkMode.js
@@ -13,6 +13,10 @@ const currentTheme = localStorage.getItem("theme") ? localStorage.getItem("theme
 if (currentTheme == "dark" || (currentTheme == null && prefersDarkScheme)) {
     document.body.classList.add("dark-mode");
 }
+else
+{
+    document.body.classList.add("light-mode");
+}
 
 // Get all elements with switch class
 const switches = document.querySelectorAll(".dark-mode-switcher");
@@ -29,6 +33,7 @@ function darkModeSwith(event) {
 
     // Toggle the .dark-theme class
     document.body.classList.toggle("dark-mode");
+    document.body.classList.toggle("light-mode");
 
     // If the body contains the .dark-theme class...
     // Then save the choice in localStorage
diff --git a/themes/yunohost-docs/scss/custom.scss b/themes/yunohost-docs/scss/custom.scss
new file mode 100644
index 00000000..d97a909c
--- /dev/null
+++ b/themes/yunohost-docs/scss/custom.scss
@@ -0,0 +1,3 @@
+@import 'theme/light/custom';
+@import 'theme/dark/custom';
+@import 'theme/global';
diff --git a/themes/yunohost-docs/scss/theme/_global.scss b/themes/yunohost-docs/scss/theme/_global.scss
new file mode 100644
index 00000000..55c13438
--- /dev/null
+++ b/themes/yunohost-docs/scss/theme/_global.scss
@@ -0,0 +1,297 @@
+.learn-sidebar:before {
+  background: none !important;
+}
+
+#chapter {
+  max-width: 80%;
+}
+
+/* Images helper classes */
+img.inline {
+  display: inline;
+  margin: 5px 15px 5px 5px;
+  vertical-align: middle;
+}
+
+img.center {
+  display: block;
+  margin: 5px 15px 5px 5px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+td img {
+  margin: 0.2rem auto;
+}
+
+/* Figures and caption */
+figure img {
+  margin: auto;
+}
+
+figure figcaption {
+  font-style: italic;
+}
+
+/* List spacing */
+ul li,
+ol li {
+  margin-top: 0;
+}
+
+ul,
+ol {
+  margin-bottom: 0;
+}
+
+li p {
+  margin: inherit;
+}
+
+/* Paragraphs */
+p {
+  margin: 0 0 1rem;
+}
+
+.notices p {
+  margin: 0 0 0 0.5rem;
+}
+
+/* Flex */
+.flex-container {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+
+.flex-child {
+  display: inline-flex;
+  text-align: center;
+}
+
+.nomargin * {
+  margin: 0px auto;
+}
+
+/* Fonts and headings */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Source Sans Pro", "Metropolis", "Helvetica Neue", sans-serif;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.simplebar-content h5 .fa {
+  font-size: 0.75em;
+  margin-right: 0.2em;
+  margin-left: 0.4em;
+}
+
+.simplebar-content h5 {
+  letter-spacing: 0em;
+  border-top: 1px solid;
+  padding: 0.8em 0;
+  margin: 0;
+}
+
+@font-face {
+  font-family: "Source Sans Pro";
+  src: url("../fonts/SourceSansPro-Bold-webfont.eot");
+  src: url("../fonts/SourceSansPro-Bold-webfont.eot?#iefix") format("embedded-opentype"),
+    url("../fonts/SourceSansPro-Bold-webfont.woff") format("woff"),
+    url("../fonts/SourceSansPro-Bold-webfont.ttf") format("truetype"),
+    url("../fonts/SourceSansPro-Bold-webfont.svg#fonts/SourceSansProBold") format("svg");
+  font-weight: 700;
+  font-style: normal;
+}
+
+/*=================================================
+ TOP BAR
+=================================================*/
+
+body #top-bar {
+  background: none;
+  border-bottom: none;
+}
+
+body #top-bar #navigation > a,
+body #top-bar #navigation > span {
+  border-left: none;
+}
+
+body #top-bar .progress {
+  display: none;
+}
+
+body #top-bar #navigation {
+  margin-left: auto;
+  margin-right: 0;
+}
+
+/*=================================================
+ SIDE BAR
+=================================================*/
+
+body .off-canvas .learn-sidebar .learn-nav ul li ul li.active > a {
+  background-color: rgba(0, 0, 0, 0.1);
+  border-left: 4px solid mediumturquoise;
+}
+
+/*=================================================
+ SHORTCODE UI
+=================================================*/
+
+.tabs-wrapper.ui-theme-lite .tab {
+  background-color: inherit !important;
+}
+
+/*
+###############################################################################
+  Style sheet for the cards
+###############################################################################
+*/
+
+.hardware.active {
+  box-shadow: 0 0 15px #bbb;
+  border-radius: 5px;
+}
+
+.hardware-image #cards-list:after {
+  content: "";
+  display: block;
+  clear: both;
+}
+
+.hardware-image .card {
+  margin-bottom: 20px;
+  width: 270px;
+  float: left;
+  min-height: 1px;
+  margin-right: 10px;
+  margin-left: 10px;
+}
+
+.hardware-image .card .panel-body > h3 {
+  margin-top: 0;
+  margin-bottom: 5px;
+  font-size: 1.2em;
+}
+
+.hardware-image .card-desc {
+  height: 135px;
+  overflow: hidden;
+}
+
+.hardware-image .card .btn-group {
+  width: 100%;
+  margin-left: 0px;
+}
+.hardware-image .card > .btn-group > .btn {
+  border-bottom: 0;
+}
+.hardware-image .card > .btn-group {
+  border-left: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  margin-left: 0px;
+}
+.hardware-image .card-comment {
+  font-size: 0.8em;
+  margin-top: -5px;
+}
+.hardware-image .card > .annotations {
+  text-align: center;
+  font-size: small;
+}
+.hardware-image .card img {
+  margin: 1rem auto;
+}
+.hardware-image .btn-group .btn.btn-info {
+  color: #ffffff;
+  background-color: #5bc0de;
+  border-color: #46b8da;
+}
+.hardware-image .btn-group .btn.btn-info:hover,
+.btn.btn-info:focus {
+  color: #ffffff;
+  background-color: #39b3d7;
+  border-color: #269abc;
+}
+
+/*=================================================
+  App catalog
+=================================================*/
+
+#filter-app-icon {
+  padding: 6px 12px;
+  margin-right: -2px;
+}
+
+#filter-app-cards,
+#app-cards-list {
+  width: 100%;
+}
+
+#app-cards-list:after {
+  content: "";
+  display: block;
+  clear: both;
+}
+
+#app-cards-list .app-card {
+  margin-bottom: 30px;
+  width: 28%;
+  float: left;
+  min-height: 1px;
+  margin-right: 15px;
+  margin-left: 15px;
+  border-radius: 3px;
+  position: relative;
+  height: 230px;
+}
+
+
+#app-cards-list .app-title {
+  margin-top: 0;
+  margin-bottom: 5px;
+  font-size: 1.2em;
+  font-weight: 700;
+  line-height: 1.1;
+  padding: 1rem 1rem;
+  padding-bottom: 0;
+}
+
+#app-cards-list .app-title .label {
+  font-size: 0.5em;
+  display: inline-block;
+  vertical-align: middle;
+  padding: 0.5em 0.6em;
+  padding-bottom: 0.3em;
+}
+
+#app-cards-list .app-descr {
+  height: 120px;
+  overflow: hidden;
+  padding: 0.2rem 1rem;
+}
+
+#app-cards-list .app-footer {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+}
+
+#app-cards-list .app-buttons {
+  width: 100%;
+}
+
+#app-cards-list .app-buttons > .btn {
+  border: 0;
+  font-size: 0.9em;
+  line-height: 1.58;
+}
\ No newline at end of file
diff --git a/themes/yunohost-docs/scss/theme/dark/_custom.scss b/themes/yunohost-docs/scss/theme/dark/_custom.scss
new file mode 100644
index 00000000..a52dd3c9
--- /dev/null
+++ b/themes/yunohost-docs/scss/theme/dark/_custom.scss
@@ -0,0 +1,270 @@
+/*!
+ * Dark Mode Theme
+ * 
+ * Inspired by Louis Charette
+ * https://github.com/lcharette/website/blob/cc855a6eb29693613e5e4e1d589a17ba7faf4aa9/themes/quark-custom/css/darkMode.scss
+ */
+
+body.dark-mode {
+  // Variables
+  $background-color: rgb(23, 27, 33);
+  $text-color: rgb(232, 233, 235);
+  $text-accent-color: white;
+  $text-darker-color: rgb(165, 169, 175);
+  $card-bg-color: rgb(17, 20, 24);
+  $border-color: rgb(63, 71, 85);
+  $link-color: rgb(114, 182, 236);
+
+  $danger: rgb(128, 108, 108);
+  $warning: rgb(107, 104, 89);
+  $success: rgb(106, 121, 100);
+
+  // Main body background
+  background-color: $background-color;
+
+  ::selection {
+    background-color: $border-color;
+  }
+
+  // Page wrapper
+  #body-wrapper,
+  #page-wrapper {
+    background-color: $background-color;
+    color: $text-color;
+  }
+
+  // Darker blue for links
+  a {
+    color: $link-color;
+  }
+
+  // Card, header and dropdown have darker background
+  .card,
+  #footer,
+  .dropmenu ul ul {
+    background-color: $card-bg-color !important;
+  }
+
+  // Headers have whiter color
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  #header a {
+    color: $text-accent-color;
+  }
+
+  // Labels are grey
+  .label.label-primary {
+    color: $text-accent-color;
+    background-color: $link-color;
+  }
+  .label.label-secondary {
+    color: $text-color;
+    background-color: $border-color;
+  }
+
+  // Pagination border is slighly different than the text
+  .pagination li {
+    border-color: $border-color;
+    background: $card-bg-color;
+  }
+
+  #sidebar-id {
+    background: $background-color;
+  }
+  // Sidebar menu use darker text color for focus
+  .menu,
+  .learn-brand,
+  .learn-nav {
+    color: $text-darker-color;
+  }
+
+  .menu .menu-item > a:focus,
+  .menu .menu-item > a:hover,
+  #top-bar #navigation > a:hover {
+    background: $card-bg-color;
+  }
+
+  #sidebar ul.related-pages li {
+    border-bottom-color: $border-color;
+  }
+
+  // Form background
+  .form-input,
+  .search-input,
+  [data-grav-field="array"] input,
+  [data-grav-field="array"] textarea {
+    background: $card-bg-color;
+  }
+
+  /*=================================================
+  Side Bar
+  =================================================*/
+  // Change logo color
+  .off-canvas .learn-sidebar .learn-brand #logo path {
+    fill: $text-color !important;
+  }
+
+  // Sidebar separator
+  .simplebar-content h5 {
+    border-top-color: $border-color;
+  }
+
+  // Text in the sidebar during a search
+  .off-canvas .learn-sidebar .learn-nav ul.searched a,
+  .off-canvas .learn-sidebar .searchbox input {
+    color: $text-color;
+  }
+
+  // Selected text in the sidebar
+  .off-canvas .learn-sidebar .learn-nav ul li.active > a,
+  // Placeholder of the searching bar
+  .off-canvas .learn-sidebar .searchbox ::placeholder {
+    color: $text-darker-color;
+    background-color: transparent;
+  }
+
+  // Matching text in the sidebar
+  .off-canvas .learn-sidebar .learn-nav ul.searched .search-match a:hover,
+  .off-canvas .learn-sidebar .learn-nav ul.searched .search-match a {
+    color: $link-color;
+  }
+
+  // Icons
+  .off-canvas .learn-sidebar .learn-nav .read-icon,
+  .off-canvas .learn-sidebar .searchbox {
+    color: $text-color;
+  }
+
+  // Language selector
+  .off-canvas .learn-sidebar .search-options .version-chooser select {
+    color: $text-color;
+  }
+
+  // Default text color
+  .off-canvas .learn-sidebar a,
+  .off-canvas .learn-sidebar .learn-nav ul li a,
+  .off-canvas .learn-sidebar .learn-nav ul li a > i,
+  .off-canvas .learn-sidebar .learn-nav ul li a > span > b {
+    color: $text-color;
+  }
+
+  .off-canvas .learn-sidebar a:hover {
+    color: $text-darker-color;
+  }
+
+  /*=================================================
+   App catalog
+  =================================================*/
+
+  #filter-app-icon {
+    background-color: $card-bg-color;
+  }
+
+  #app-cards-list .app-title {
+    color: $text-accent-color;
+  }
+
+  #app-cards-list .app-buttons {
+    border-top: 0.05rem solid $card-bg-color;
+  }
+
+  #app-cards-list .app-buttons > .btn-default {
+    color: $text-accent-color;
+    background-color: $border-color;
+  }
+  
+  #app-cards-list .app-buttons > .btn:first-child {
+    border-right: 0.1rem solid $card-bg-color;
+  }
+
+  #app-cards-list .app-card {
+    border-color: $border-color;
+  }
+
+  #app-cards-list .label {
+    color: $text-darker-color;
+    background-color: $card-bg-color;
+  }
+
+  /*=================================================
+   Other
+  =================================================*/
+
+  // Html tables
+  table tbody tr:nth-of-type(2n + 1) {
+    background: $card-bg-color;
+  }
+
+  table td,
+  table th {
+    border-bottom-color: $border-color;
+  }
+
+  // Color utils
+  .danger {
+    background-color: $danger;
+  }
+  .warning {
+    background-color: $warning;
+  }
+  .success {
+    background-color: $success;
+  }
+
+  .page-toc {
+    background-color: $card-bg-color;
+  }
+
+  .page-toc li,
+  .page-toc li > a {
+    color: $text-accent-color;
+  }
+}
+
+/*=================================================
+ Dark mode specific
+=================================================*/
+body.dark-mode {
+  // Dim images
+  img {
+    filter: brightness(0.85) contrast(1.2);
+  }
+
+  img#whitelogo {
+    background-color: unset;
+    padding: 10px;
+  }
+
+  #ynhlogo {
+    filter: invert(1);
+  }
+
+  .notices.yellow {
+    border-left-color: rgb(147, 91, 12);
+    background-color: rgb(49, 34, 11);
+    color: rgb(238, 160, 52);
+  }
+
+  .notices.red {
+    border-left-color: rgb(137, 33, 30);
+    background-color: rgb(46, 11, 11);
+    color: rgb(219, 90, 86);
+  }
+
+  .notices.blue,
+  .notices.note {
+    border-left-color: rgb(27, 110, 134);
+    background-color: rgb(19, 34, 42);
+    color: rgb(75, 185, 218);
+  }
+
+  .notices.green {
+    border-left-color: rgb(52, 120, 52);
+    background-color: rgb(25, 44, 19);
+    color: rgb(122, 197, 122);
+  }
+}
diff --git a/themes/yunohost-docs/scss/theme/light/_custom.scss b/themes/yunohost-docs/scss/theme/light/_custom.scss
new file mode 100644
index 00000000..ee0c8605
--- /dev/null
+++ b/themes/yunohost-docs/scss/theme/light/_custom.scss
@@ -0,0 +1,229 @@
+body.light-mode {
+  // Variables
+  $background-color: rgb(255, 255, 255);
+  $text-color: rgb(23, 27, 33);
+  $text-accent-color: rgb(36, 41, 49);
+  $text-darker-color: rgb(17, 20, 24);
+  $card-bg-color: rgb(240, 240, 240);
+  $border-color: rgb(221, 221, 221);
+  $link-color: rgb(114, 182, 236);
+
+  $danger: rgb(242, 222, 222);
+  $warning: rgb(252, 248, 227);
+  $success: rgb(223, 240, 216);
+
+  // Main body background
+  background-color: $background-color;
+  
+  ::selection {
+    background-color: $border-color;
+  }
+  // Page wrapper
+  #body-wrapper,
+  #page-wrapper {
+    background-color: $background-color;
+    color: $text-color;
+  }
+
+  // Darker blue for links
+  a {
+    color: $link-color;
+  }
+
+  // Card, header and dropdown have darker background
+  .card,
+  #footer,
+  .dropmenu ul ul {
+    background-color: $card-bg-color !important;
+  }
+
+  // Headers have whiter color
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  #header a {
+    color: $text-accent-color;
+  }
+
+  // Labels are grey
+  .label.label-primary {
+    color: $text-accent-color;
+    background-color: $link-color;
+  }
+  .label.label-secondary {
+    color: $text-color;
+    background-color: $border-color;
+  }
+
+  // Pagination border is slighly different than the text
+  .pagination li {
+    border-color: $border-color;
+    background: $card-bg-color;
+  }
+
+  #sidebar-id {
+    background: $background-color;
+  }
+  // Sidebar menu use darker text color for focus
+  .menu,
+  .learn-brand,
+  .learn-nav {
+    color: $text-darker-color;
+  }
+
+  .menu .menu-item > a:focus,
+  .menu .menu-item > a:hover,
+  #top-bar #navigation > a:hover {
+    background: $card-bg-color;
+  }
+
+  #sidebar ul.related-pages li {
+    border-bottom-color: $border-color;
+  }
+
+  // Form background
+  .form-input,
+  .search-input,
+  [data-grav-field="array"] input,
+  [data-grav-field="array"] textarea {
+    background: $card-bg-color;
+  }
+
+  /*=================================================
+  Side Bar
+  =================================================*/
+  // Change logo color
+  .off-canvas .learn-sidebar .learn-brand #logo path {
+    fill: $text-color !important;
+  }
+
+  // Sidebar separator
+  .simplebar-content h5 {
+    border-top-color: $border-color;
+  }
+
+  // Text in the sidebar during a search
+  .off-canvas .learn-sidebar .learn-nav ul.searched a,
+  .off-canvas .learn-sidebar .searchbox input {
+    color: $text-color;
+  }
+
+  // Selected text in the sidebar
+  .off-canvas .learn-sidebar .learn-nav ul li.active > a,
+  // Placeholder of the searching bar
+  .off-canvas .learn-sidebar .searchbox ::placeholder {
+    color: $text-darker-color;
+    background-color: transparent;
+  }
+
+  // Matching text in the sidebar
+  .off-canvas .learn-sidebar .learn-nav ul.searched .search-match a:hover,
+  .off-canvas .learn-sidebar .learn-nav ul.searched .search-match a {
+    color: $link-color;
+  }
+
+  // Icons
+  .off-canvas .learn-sidebar .learn-nav .read-icon,
+  .off-canvas .learn-sidebar .searchbox {
+    color: $text-color;
+  }
+
+  // Language selector
+  .off-canvas .learn-sidebar .search-options .version-chooser select {
+    color: $text-color;
+  }
+
+  // Default text color
+  .off-canvas .learn-sidebar a,
+  .off-canvas .learn-sidebar .learn-nav ul li a,
+  .off-canvas .learn-sidebar .learn-nav ul li a > i,
+  .off-canvas .learn-sidebar .learn-nav ul li a > span > b {
+    color: $text-color;
+  }
+
+  .off-canvas .learn-sidebar a:hover {
+    color: $text-darker-color;
+  }
+
+  /*=================================================
+   App catalog
+  =================================================*/
+
+  #filter-app-icon {
+    background-color: $card-bg-color;
+  }
+
+  #app-cards-list .app-title {
+    color: $text-accent-color;
+  }
+
+  #app-cards-list .app-buttons {
+    border-top: 0.05rem solid $card-bg-color;
+  }
+
+  #app-cards-list .app-buttons > .btn-default {
+    color: $text-accent-color;
+    background-color: $border-color;
+  }
+  
+  #app-cards-list .app-buttons > .btn:first-child {
+    border-right: 0.1rem solid $card-bg-color;
+  }
+
+  #app-cards-list .app-card {
+    border-color: $border-color;
+  }
+
+  #app-cards-list .label {
+    color: $text-darker-color;
+    background-color: $card-bg-color;
+  }
+
+  /*=================================================
+   Other
+  =================================================*/
+
+  // Html tables
+  table tbody tr:nth-of-type(2n + 1) {
+    background: $card-bg-color;
+  }
+
+  table td,
+  table th {
+    border-bottom-color: $border-color;
+  }
+
+  // Color utils
+  .danger {
+    background-color: $danger;
+  }
+  .warning {
+    background-color: $warning;
+  }
+  .success {
+    background-color: $success;
+  }
+
+  .page-toc {
+    background-color: $card-bg-color;
+  }
+
+  .page-toc li,
+  .page-toc li > a {
+    color: $text-accent-color;
+  }
+}
+
+/*=================================================
+ Light mode specific
+=================================================*/
+body.light-mode {
+  /* Give a gray background to the white logo*/
+  img#whitelogo {
+    background-color: gray;
+    padding: 10px;
+  }
+}
diff --git a/themes/yunohost-docs/templates/partials/base.html.twig b/themes/yunohost-docs/templates/partials/base.html.twig
index e8076b09..6e29f7d8 100644
--- a/themes/yunohost-docs/templates/partials/base.html.twig
+++ b/themes/yunohost-docs/templates/partials/base.html.twig
@@ -22,7 +22,6 @@
     {% do assets.addCss('theme://css-compiled/spectre'~compress) %}
     {% do assets.addCss('theme://css-compiled/theme'~compress) %}
     {% do assets.addCss('theme://css/custom.css') %}
-    {% do assets.addCss('theme://css/darkMode.css') %}
 {% endblock %}
 
 {% block javascripts %}