feat: agenda / floor-plan dark mode support (ietf-tools#5995)

Author: NGPixel

client/App.vue

@@ -26,6 +26,21 @@ const siteStore = useSiteStore()
 
 const appContainer = ref(null)
 
+// --------------------------------------------------------------------
+// Set user theme
+// --------------------------------------------------------------------
+
+const desiredTheme = window.localStorage?.getItem('theme')
+if (desiredTheme === 'dark') {
+  siteStore.theme = 'dark'
+} else if (desiredTheme === 'light') {
+  siteStore.theme = 'light'
+} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+  siteStore.theme = 'dark'
+} else {
+  siteStore.theme = 'light'
+}
+
 // --------------------------------------------------------------------
 // Handle browser resize
 // --------------------------------------------------------------------

client/agenda/Agenda.vue

@@ -533,6 +533,13 @@ onMounted(() => {
     color: $blue-700;
     position: relative;
 
+    @at-root .theme-dark & {
+      border: 1px solid $blue-800;
+      background: linear-gradient(to top, lighten($blue-900, 2%), lighten($blue-900, 5%));
+      color: $blue-100;
+      box-shadow: inset 0 0 0 1px #000;
+    }
+
     > button {
       position: absolute;
       top: 15px;

client/agenda/AgendaDetailsModal.vue

@@ -282,6 +282,10 @@ async function fetchSessionMaterials () {
   .bi {
     font-size: 20px;
     color: $indigo;
+
+    @at-root .theme-dark & {
+      color: $indigo-300;
+    }
   }
 
   .detail-header {
@@ -343,6 +347,11 @@ async function fetchSessionMaterials () {
     border-radius: 5px;
     font-weight: 500;
 
+    @at-root .theme-dark & {
+      background-color: $gray-900;
+      border-color: $gray-700;
+    }
+
     a {
       cursor: pointer;
 
@@ -365,6 +374,11 @@ async function fetchSessionMaterials () {
     margin-top: 12px;
     border-radius: 5px;
 
+    @at-root .theme-dark & {
+      background-color: $gray-900;
+      border-color: $gray-700;
+    }
+
     .bi {
       color: $blue;
     }
@@ -377,6 +391,10 @@ async function fetchSessionMaterials () {
       border: none;
       border-radius: 5px;
       display: block;
+
+      @at-root .theme-dark & {
+        background-color: $gray-900;
+      }
     }
   }
 

client/agenda/AgendaFilter.vue

@@ -217,30 +217,58 @@ function toggleFilterGroup (key) {
     padding: 5px;
     border-radius: 10px;
 
+    @at-root .theme-dark & {
+      background-color: $gray-800;
+    }
+
     &:nth-child(2) {
       background-color: $blue-100;
 
+      @at-root .theme-dark & {
+        background-color: $gray-800;
+      }
+
       .agenda-personalize-areamain {
         button {
           color: $blue-600;
+
+          @at-root .theme-dark & {
+            color: $blue-100;
+          }
         }
       }
 
       .agenda-personalize-groups {
         background-color: lighten($blue-100, 7%);
+
+        @at-root .theme-dark & {
+          background-color: $gray-700;
+        }
       }
     }
     &:nth-child(3) {
       background-color: $orange-100;
 
+      @at-root .theme-dark & {
+        background-color: $gray-800;
+      }
+
       .agenda-personalize-areamain {
         button {
           color: $orange-600;
+
+          @at-root .theme-dark & {
+            color: $orange-100;
+          }
         }
       }
 
       .agenda-personalize-groups {
         background-color: lighten($orange-100, 7%);
+
+        @at-root .theme-dark & {
+          background-color: $gray-700;
+        }
       }
     }
 
@@ -276,6 +304,12 @@ function toggleFilterGroup (key) {
       transition: background-color .5s ease;
       position: relative;
 
+      @at-root .theme-dark & {
+        background-color: $gray-600;
+        border-color: $gray-700;
+        color: #FFF;
+      }
+
       > .bi {
         margin-right: .5rem;
       }
@@ -310,6 +344,10 @@ function toggleFilterGroup (key) {
     flex: 1;
     display: flex;
     flex-wrap: wrap;
+
+    @at-root .theme-dark & {
+      background-color: $gray-700;
+    }
   }
 
   &-group {
@@ -324,6 +362,12 @@ function toggleFilterGroup (key) {
     color: $gray-600;
     margin-right: 0px;
 
+    @at-root .theme-dark & {
+      background-color: $gray-600;
+      border-color: $gray-700;
+      color: #FFF;
+    }
+
     @media screen and (max-width: $bs5-break-sm) {
       font-size: .9em;
     }

client/agenda/AgendaQuickAccess.vue

@@ -219,6 +219,9 @@ function scrollToNow (ev) {
 </script>
 
 <style lang="scss">
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+
 .agenda-quickaccess {
   width: 300px;
 
@@ -252,6 +255,10 @@ function scrollToNow (ev) {
     text-align: center;
     margin-top: 12px;
 
+    @at-root .theme-dark & {
+      border-color: $secondary;
+    }
+
     @media screen and (max-width: 1350px) {
       flex-direction: column;
     }
@@ -267,6 +274,11 @@ function scrollToNow (ev) {
       background-color: #FFF;
       transform: translate(-50%, 0);
       text-transform: uppercase;
+
+      @at-root .theme-dark & {
+        background-color: $gray-900;
+        color: #FFF;
+      }
     }
 
     button {