Theme changer works, now I have to make it permanent

.gitignore

@@ -26,3 +26,6 @@ build/
 doc/api/
 /web/swadesh
 /web/tibetan-lexicon-layout
+/web/style/.sass-cache/
+/web/style/*.css
+/web/eittland-files/GIS/

web/dart/main.dart

@@ -1,5 +1,8 @@
 import './reorganize_html.dart' show reorganizeHtml;
+import './theme.dart' show makeThemeChanger;
 
-void main() {
+Future<void> main() async {
-  reorganizeHtml();
+  await reorganizeHtml().then((_) {
+    makeThemeChanger();
+  });
 }

web/dart/reorganize_html.dart

@@ -7,56 +7,6 @@ String getPageTitle() {
   return querySelector('title').text;
 }
 
-class Navbar {
-  Navbar() {
-    navbar = Element.ul()..classes.add('navbar-nav');
-  }
-
-  // Inserts the element in a <li class='nav-item'></li>
-  void addElement(final Element elem, [List<String> classes, String id]) {
-    var wrapper = Element.li()
-      ..classes.add('nav-item')
-      ..append(elem);
-    if (classes != null) {
-      for (var c in classes) {
-        wrapper.classes.add(c);
-      }
-    }
-    if (id != null) () => wrapper.attributes['id'] = id;
-    navbar.append(wrapper);
-  }
-
-  Future<Element> makeNavbar() async {
-    addElement(Element.a()
-      ..attributes['href']
-      ..innerText = 'Accueil');
-  }
-
-  Future<void> addLanguages() async {
-    var languages = Element.ul()..classes.add('dropdown');
-    await parseSitemap().then((final sitemap) => {
-          sitemap.forEach((url, name) {
-            final link = Element.a()
-              ..attributes['href'] = url
-              ..innerText = name;
-
-            final linkLi = Element.li()
-              ..classes.add('dropdown-item')
-              ..insertAdjacentElement('afterBegin', link);
-
-            languages.insertAdjacentElement('beforeEnd', linkLi);
-          })
-        });
-    final langLink = Element.a()
-      ..attributes['href'] = '#'
-      ..innerText = 'Langues';
-    addElement(langLink, ['has-dropdown'], 'langList');
-    querySelector('#langList').insertAdjacentElement('beforeEnd', languages);
-  }
-
-  Element navbar;
-}
-
 Future<Element> addLanguages(Element navbar) async {
   // Languages
   var languages = Element.ul()..classes.add('dropdown');
@@ -87,7 +37,7 @@ Future<Element> addLanguages(Element navbar) async {
 // - One back to home
 // - A dropdown to each language detected in the sitemap
 Future<Element> makeNavbar() async {
-  var _navbar = Navbar();
+  // var _navbar = Navbar();
 
   // Home
   var navbar_content = Element.ul()..classes.add('navbar-nav');
@@ -121,8 +71,8 @@ Future<Element> makeNavbar() async {
 <li class="nav-item has-dropdown">
   <a href="#"><i class="fas fa-sun" id="themeBtn"></i></a>
   <ul class="dropdown" id="theme-dropdown">
-    <li class="dropdown-item"><i class="fas fa-sun"></i> Clair</li>
+    <li class="dropdown-item"><span id="lightBtn"><i class="fas fa-sun"></i> Clair</span></li>
-    <li class="dropdown-item"><i class="fas fa-moon"></i> Sombre</li>
+    <li class="dropdown-item"><span id="darkBtn"> <i class="fas fa-moon"></i> Sombre</span></li>
   </ul>
 </li>'''));
 

web/dart/theme.dart

@@ -0,0 +1,20 @@
+import 'dart:html';
+
+void switchTheme(final Element body, String theme) {
+  body.classes.clear();
+  body.classes.add(theme);
+}
+
+void makeThemeChanger() {
+  final darkBtn = querySelector('#darkBtn');
+  final lightBtn = querySelector('#lightBtn');
+  final body = querySelector('body');
+
+  darkBtn.onClick.listen((_) {
+    switchTheme(body, 'dark');
+  });
+
+  lightBtn.onClick.listen((_) {
+    switchTheme(body, 'light');
+  });
+}

web/nyqy.org

@@ -1,5 +1,5 @@
 # -*- org-confirm-babel-evaluate: nil -*-
-#+TITLE: Une Grammaire du Ñyqy
+#+TITLE: Grammaire du Ñyqy
 #+SUBTITLE: Un détail de la langue construite prototype du Ñyqy, et une rapide description de son peuple et sa culture
 #+HTML_HEAD_EXTRA: <meta name="description" content="Grammaire détaillée de la langue construite Ñyqy" />
 #+HTML_HEAD_EXTRA: <meta property="og:title" content="Grammaire du Ñyqy" />

web/style/style.css

@@ -1,2 +0,0 @@
-@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic|Roboto+Slab:400,700|Inconsolata:400,700);@font-face{font-family:"DoulosSIL";font-display:swap;src:url("https://langue.phundrak.com/fonts/DoulosSIL-R.woff")}@font-face{font-family:"Noto Sans Runes";font-display:swap;src:url("../fonts/NotoSansRunic-Regular.ttf")}@font-face{font-family:"Helvetica Neue";font-display:swap;src:url("../fonts/HelveticaNeue.ttf")}body{margin:0;padding:0;font-family:"Noto Sans Runes", "DoulosSIL", "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif}ul{list-style-type:none;margin:0;padding:0}a{color:currentColor;text-decoration:none}.navbar{height:70px;width:100%;background:black;color:white}.navbar-nav{display:flex;align-items:center;justify-content:space-evenly;height:100%}header{padding:1em;background:red;margin-bottom:1em;padding-bottom:3.5em;text-align:center;clip-path:polygon(50% 0%, 100% 0, 100% 65%, 50% 100%, 0 65%, 0 0)}.dropdown{position:absolute;width:500px;opacity:0;z-index:2;background:blue;border-top:2px solid white;border-bottom-right-radius:8px;border-bottom-left-radius:8px;display:flex;align-items:center;justify-content:space-around;height:3rem;margin-top:2rem;padding:0.5rem;box-shadow:rgba(2,8,20,0.1) 0px 0.175em 0.5em;transform:translateX(-40%);transition:opacity .15s ease-out}#theme-dropdown{width:300px;transform:translateX(-60%)}.has-dropdown:focus-within .dropdown{opacity:1;pointer-events:auto}.dropdown-item a{width:100%;height:100%;size:0.7rem;padding-left:10px;font-weight:bold}
-/*# sourceMappingURL=style.css.map */

web/style/style.scss

@@ -15,12 +15,19 @@
     src: url("../fonts/HelveticaNeue.ttf");
 }
 
-/* Colors ********************************************************************/
+// Themes /////////////////////////////////////////////////////////////////////
+
 $dark:    rgba(52, 73, 94, 1);
 $accent1: rgba(66, 191, 221, 1);
 $accent2: rgba(92, 172, 126, 1);
 $accent3: rgba(197, 193, 155, 1);
-$light:   rgba(250, 250, 255, 1);
+$light: #ddd;
+$grey1: #f8f8f8;
+$grey2: #dbe1e8;
+$grey3: #b2becd;
+$grey4: #6c7983;
+$grey5: #454e56;
+$grey6: #12181b;
 $gradient-top:          linear-gradient(0deg,   $dark, $accent1, $accent2, $accent3, $light);
 $gradient-right:        linear-gradient(90deg,  $dark, $accent1, $accent2, $accent3, $light);
 $gradient-bottom:       linear-gradient(180deg, $dark, $accent1, $accent2, $accent3, $light);
@@ -31,10 +38,54 @@ $gradient-top-left:     linear-gradient(225deg, $dark, $accent1, $accent2, $acce
 $gradient-bottom-left:  linear-gradient(315deg, $dark, $accent1, $accent2, $accent3, $light);
 $gradient-radial:       radial-gradient(        $dark, $accent1, $accent2, $accent3, $light);
 
+.light {
+    $bg-nav: linear-gradient(to right, $grey1, $grey3);
+    $bg-dropdown: $grey1;
+    $text: $light;
+    $border-color: $accent1;
+    $bg-solar: $accent3;
+
+    transition: background 500ms ease-in-out, color 1s ease-in-out;
+
+    color: $dark;
+    background: $light;
+
+    .navbar {
+        background: $grey3;
+    }
+}
+
+.dark {
+    $background: $dark;
+    $foreground: $light;
+    $bg-nav: linear-gradient(to right, $grey5, $grey6);
+    $bg-dropdown: $grey6;
+    $text: $dark;
+    $border-color: $dark;
+    $bg-solar: $accent3;
+
+    transition: background 500ms ease-in-out, color 1s ease-in-out;
+
+    color: $light;
+    background: $dark;
+
+    .navbar {
+        color: $light;
+        background: $grey6;
+    }
+}
+
+/* Style *********************************************************************/
+
 body {
     margin: 0;
     padding: 0;
     font-family: "Noto Sans Runes", "DoulosSIL", "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
+    transition: background 500ms ease-in-out, color 1s ease-in-out;
+
+    header, .navbar {
+        transition: background 500ms ease-in-out, color 1s ease-in-out;
+    }
 }
 
 ul {
@@ -51,8 +102,6 @@ a {
 .navbar {
     height: 70px;
     width: 100%;
-    background: black;
-    color: white;
 }
 
 .navbar-nav {
@@ -60,15 +109,18 @@ a {
     align-items: center;
     justify-content: space-evenly;
     height: 100%;
+    background: $accent3;
+    color: $dark;
 }
 
 header {
     padding: 1em;
-    background: red;
     margin-bottom: 1em;
     padding-bottom: 3.5em;
     text-align: center;
     clip-path: polygon(50% 0%, 100% 0, 100% 65%, 50% 100%, 0 65%, 0 0);
+    color: $light;
+    background: $accent2;
 }
 
 .dropdown {
@@ -97,7 +149,7 @@ header {
 
 #theme-dropdown {
     width: 300px;
-    transform: translateX(-60%);
+    transform: translateX(-95%);
 }
 
 .has-dropdown {