From cb012193dffca5afece763213313cbfe7c1612da Mon Sep 17 00:00:00 2001
From: NGPixel <github@ngpixel.com>
Date: Wed, 19 Jul 2023 18:48:38 -0400
Subject: [PATCH] feat: agenda / floor-plan dark mode support

---
 client/App.vue                       |  15 +++
 client/agenda/Agenda.vue             |   7 ++
 client/agenda/AgendaDetailsModal.vue |  18 +++
 client/agenda/AgendaFilter.vue       |  44 +++++++
 client/agenda/AgendaQuickAccess.vue  |  12 ++
 client/agenda/AgendaScheduleList.vue | 167 +++++++++++++++++++++++++++
 client/agenda/AgendaSettings.vue     |   8 ++
 client/agenda/FloorPlan.vue          |   5 +
 client/agenda/agenda.scss            |   8 ++
 client/components/n-theme.vue        |  55 ++++++---
 client/shared/store.js               |   3 +-
 ietf/templates/meeting/agenda.html   |  12 ++
 12 files changed, 336 insertions(+), 18 deletions(-)

diff --git a/client/App.vue b/client/App.vue
index 0664525ca4..2a6c5e6e98 100644
--- a/client/App.vue
+++ b/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
 // --------------------------------------------------------------------
diff --git a/client/agenda/Agenda.vue b/client/agenda/Agenda.vue
index 1cd1042f4f..0212fc8cb6 100644
--- a/client/agenda/Agenda.vue
+++ b/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;
diff --git a/client/agenda/AgendaDetailsModal.vue b/client/agenda/AgendaDetailsModal.vue
index 0a140b8c4e..037e32f9cb 100644
--- a/client/agenda/AgendaDetailsModal.vue
+++ b/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;
+      }
     }
   }
 
diff --git a/client/agenda/AgendaFilter.vue b/client/agenda/AgendaFilter.vue
index 629096211d..b1f1065708 100644
--- a/client/agenda/AgendaFilter.vue
+++ b/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;
     }
diff --git a/client/agenda/AgendaQuickAccess.vue b/client/agenda/AgendaQuickAccess.vue
index ae23edcabb..5952e6de1c 100644
--- a/client/agenda/AgendaQuickAccess.vue
+++ b/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 {
diff --git a/client/agenda/AgendaScheduleList.vue b/client/agenda/AgendaScheduleList.vue
index e31fe9c825..74d07ac5bb 100644
--- a/client/agenda/AgendaScheduleList.vue
+++ b/client/agenda/AgendaScheduleList.vue
@@ -684,6 +684,10 @@ onBeforeUnmount(() => {
     border-radius: 5px;
     border-collapse: separate;
     border-spacing: 0;
+
+    @at-root .theme-dark & {
+      border-color: #000;
+    }
   }
 
   // -> Table HEADER
@@ -703,6 +707,11 @@ onBeforeUnmount(() => {
     font-weight: 600;
     border-right: 1px solid #FFF;
 
+    @at-root .theme-dark & {
+      border-bottom-color: #000;
+      border-right-color: #000;
+    }
+
     @media screen and (max-width: $bs5-break-md) {
       font-size: .8em;
       padding: 0 6px;
@@ -757,6 +766,10 @@ onBeforeUnmount(() => {
 
   tr:nth-child(odd) td {
     background-color: #F9F9F9;
+
+    @at-root .theme-dark & {
+      background-color: darken($gray-900, 5%);
+    }
   }
 
   &-display-noresult > td {
@@ -766,6 +779,12 @@ onBeforeUnmount(() => {
     color: $gray-800;
     text-shadow: 1px 1px 0 #FFF;
     font-weight: 600;
+
+    @at-root .theme-dark & {
+      background: linear-gradient(to bottom, $gray-900, $gray-800);
+      color: #FFF;
+      text-shadow: 1px 1px 0 $gray-900;
+    }
   }
 
   &-display-day > td {
@@ -777,6 +796,10 @@ onBeforeUnmount(() => {
     font-weight: 600;
     scroll-margin-top: 25px;
 
+    @at-root .theme-dark & {
+      border-bottom-color: #000;
+    }
+
     @media screen and (max-width: $bs5-break-md) {
       font-size: .9em;
     }
@@ -789,6 +812,11 @@ onBeforeUnmount(() => {
     padding: 0 12px;
     color: #333;
 
+    @at-root .theme-dark & {
+      background: linear-gradient(to top, lighten($blue-900, 8%), lighten($blue-900, 4%)) !important;
+      color: $blue-100;
+    }
+
     @media screen and (max-width: $bs5-break-md) {
       padding: 0 6px;
     }
@@ -796,12 +824,21 @@ onBeforeUnmount(() => {
     &.agenda-table-cell-ts {
       border-right: 1px solid $blue-200 !important;
       color: $blue-700;
+
+      @at-root .theme-dark & {
+        border-right-color: $blue-700 !important;
+        color: $blue-200;
+      }
     }
 
     &.agenda-table-cell-name {
       color: $blue-700;
       font-weight: 600;
 
+      @at-root .theme-dark & {
+        color: $blue-200;
+      }
+
       @media screen and (max-width: $bs5-break-md) {
         font-size: .9em;
       }
@@ -813,6 +850,10 @@ onBeforeUnmount(() => {
     padding: 0 12px;
     color: #333;
 
+    @at-root .theme-dark & {
+      color: #FFF;
+    }
+
     @media screen and (max-width: $bs5-break-md) {
       padding: 2px 6px;
     }
@@ -821,6 +862,11 @@ onBeforeUnmount(() => {
       background-color: desaturate($blue-700, 50%) !important;
       border-bottom: 1px solid #FFF;
       padding-bottom: 2px;
+
+      @at-root .theme-dark & {
+        background-color: $gray-800 !important;
+        border-bottom-color: #000;
+      }
     }
 
     &.agenda-table-cell-ts {
@@ -829,6 +875,13 @@ onBeforeUnmount(() => {
         border-right: 1px solid $blue-200 !important;
         color: $blue-200;
         border-bottom: 1px solid #FFF;
+
+        @at-root .theme-dark & {
+          background: linear-gradient(to right, rgba(lighten($blue-900, 8%), .1), lighten($blue-900, 5%));
+          border-right-color: $blue-700 !important;
+          border-bottom-color: $blue-700;
+          color: $blue-700;
+        }
       }
     }
 
@@ -837,6 +890,11 @@ onBeforeUnmount(() => {
       border-right: 1px solid $gray-300 !important;
       white-space: nowrap;
 
+      @at-root .theme-dark & {
+        color: $yellow-100;
+        border-right-color: $gray-700 !important;
+      }
+
       @media screen and (max-width: 1300px) {
         font-size: .85rem;
       }
@@ -880,6 +938,11 @@ onBeforeUnmount(() => {
       border-right: 1px solid $gray-300 !important;
       white-space: nowrap;
 
+      @at-root .theme-dark & {
+        color: $gray-400;
+        border-right-color: $gray-700 !important;
+      }
+
       @media screen and (max-width: $bs5-break-md) {
         font-size: .7rem;
         word-break: break-all;
@@ -906,6 +969,14 @@ onBeforeUnmount(() => {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
         margin-right: 6px;
+
+        @at-root .theme-dark & {
+          background-color: $gray-700;
+          border-bottom-color: $gray-600;
+          border-right-color: $gray-600;
+          color: $gray-200;
+          text-shadow: 1px 1px $gray-800;
+        }
       }
     }
 
@@ -937,6 +1008,10 @@ onBeforeUnmount(() => {
         }
         &.bi-green {
           color: $green-500;
+
+          @at-root .theme-dark & {
+            color: $green-300;
+          }
         }
         &.bi-pink {
           color: $pink-500;
@@ -986,6 +1061,11 @@ onBeforeUnmount(() => {
           padding: 2px 3px;
           transition: background-color .6s ease;
 
+          @at-root .theme-dark & {
+            background-color: rgba(0, 0, 0, .2);
+            color: $gray-200;
+          }
+
           &:hover, &:focus {
             color: $blue;
           }
@@ -994,6 +1074,10 @@ onBeforeUnmount(() => {
             color: $red-500;
             background-color: rgba($red-500, .1);
 
+            @at-root .theme-dark & {
+              color: $red-400;
+            }
+
             &:hover, &:focus {
               background-color: rgba($red-500, .3);
             }
@@ -1002,6 +1086,10 @@ onBeforeUnmount(() => {
             color: $orange-700;
             background-color: rgba($orange-500, .1);
 
+            @at-root .theme-dark & {
+              color: $orange-400;
+            }
+
             &:hover, &:focus {
               background-color: rgba($orange-500, .3);
             }
@@ -1010,6 +1098,10 @@ onBeforeUnmount(() => {
             color: $blue-600;
             background-color: rgba($blue-300, .1);
 
+            @at-root .theme-dark & {
+              color: $blue-300;
+            }
+
             &:hover, &:focus {
               background-color: rgba($blue-300, .3);
             }
@@ -1018,6 +1110,10 @@ onBeforeUnmount(() => {
             color: $green-500;
             background-color: rgba($green-300, .1);
 
+            @at-root .theme-dark & {
+              color: $green-300;
+            }
+
             &:hover, &:focus {
               background-color: rgba($green-300, .3);
             }
@@ -1026,6 +1122,10 @@ onBeforeUnmount(() => {
             color: $purple-500;
             background-color: rgba($purple-400, .1);
 
+            @at-root .theme-dark & {
+              color: $purple-300;
+            }
+
             &:hover, &:focus {
               background-color: rgba($purple-400, .3);
             }
@@ -1034,6 +1134,10 @@ onBeforeUnmount(() => {
             color: $pink-500;
             background-color: rgba($pink-400, .1);
 
+            @at-root .theme-dark & {
+              color: $pink-400;
+            }
+
             &:hover, &:focus {
               background-color: rgba($pink-400, .3);
             }
@@ -1042,6 +1146,10 @@ onBeforeUnmount(() => {
             color: $teal-600;
             background-color: rgba($teal-400, .1);
 
+            @at-root .theme-dark & {
+              color: $teal-300;
+            }
+
             &:hover, &:focus {
               background-color: rgba($teal-400, .3);
             }
@@ -1068,6 +1176,10 @@ onBeforeUnmount(() => {
     text-align: right;
     white-space: nowrap;
 
+    @at-root .theme-dark & {
+      border-right-color: $gray-700 !important;
+    }
+
     @media screen and (max-width: 1300px) {
       font-size: .9rem;
     }
@@ -1093,6 +1205,15 @@ onBeforeUnmount(() => {
       border-bottom: none;
     }
 
+    &.agenda-table-cell-ts.is-session-event {
+      @at-root .theme-dark & {
+        background: transparent;
+        color: $red-300;
+        border-top: 1px solid darken($red-100, 5%);
+        border-bottom-color: darken($red-100, 5%);
+      }
+    }
+
     &.agenda-table-cell-room {
       border-right: 1px solid darken($red-100, 5%) !important;
     }
@@ -1111,6 +1232,15 @@ onBeforeUnmount(() => {
       border-bottom: none;
     }
 
+    &.agenda-table-cell-ts.is-session-event {
+      @at-root .theme-dark & {
+        background: transparent;
+        color: $orange-300;
+        border-top: 1px solid darken($orange-100, 5%);
+        border-bottom-color: darken($orange-100, 5%);
+      }
+    }
+
     &.agenda-table-cell-room {
       border-right: 1px solid darken($orange-100, 5%) !important;
     }
@@ -1124,10 +1254,21 @@ onBeforeUnmount(() => {
     border-top: 1px solid darken($indigo-100, 5%);
     border-bottom: 1px solid darken($indigo-100, 5%);
 
+    @at-root .theme-dark & {
+      color: $indigo-100;
+      // border-bottom-color: #000;
+    }
+
     &.agenda-table-cell-ts {
       background: linear-gradient(to right, lighten($indigo-100, 8%), lighten($indigo-100, 5%));
       color: $indigo-700;
       border-right: 1px solid $indigo-100 !important;
+
+      @at-root .theme-dark & {
+        background: rgba($indigo, .1) !important;
+        color: $indigo-100;
+        border-right-color: $indigo-500 !important;
+      }
     }
 
     &.agenda-table-cell-room {
@@ -1137,10 +1278,18 @@ onBeforeUnmount(() => {
     &.agenda-table-cell-name {
       color: $indigo-700;
       font-style: italic;
+
+      @at-root .theme-dark & {
+        color: $indigo-200;
+      }
     }
 
     &.agenda-table-cell-links {
       background: linear-gradient(to right, lighten($indigo-100, 5%), lighten($indigo-100, 8%));
+
+      @at-root .theme-dark & {
+        background: rgba($indigo, .1) !important;
+      }
     }
   }
   &-type-plenary td {
@@ -1149,9 +1298,19 @@ onBeforeUnmount(() => {
     border-top: 1px solid darken($teal-100, 5%);
     border-bottom: 1px solid darken($teal-100, 5%);
 
+    @at-root .theme-dark & {
+      background: rgba($teal, .15) !important;
+      color: $teal-100;
+      border-bottom: 1px solid darken($teal-600, 5%);
+    }
+
     &.agenda-table-cell-ts {
       background: linear-gradient(to right, lighten($teal-100, 8%), lighten($teal-100, 2%));
       border-right: 1px solid $teal-200 !important;
+
+      @at-root .theme-dark & {
+        border-right-color: $teal-700 !important;
+      }
     }
 
     &.agenda-table-cell-room {
@@ -1161,10 +1320,18 @@ onBeforeUnmount(() => {
     &.agenda-table-cell-name {
       font-weight: 600;
       color: $teal-700;
+
+      @at-root .theme-dark & {
+        color: $teal-200;
+      }
     }
 
     &.agenda-table-cell-links {
       background: linear-gradient(to right, rgba(lighten($teal, 54%), 0), lighten($teal, 54%));
+
+      @at-root .theme-dark & {
+        background: rgba($teal, .15) !important;
+      }
     }
   }
 
diff --git a/client/agenda/AgendaSettings.vue b/client/agenda/AgendaSettings.vue
index 41cd226b6c..b074bc3247 100644
--- a/client/agenda/AgendaSettings.vue
+++ b/client/agenda/AgendaSettings.vue
@@ -457,6 +457,14 @@ onMounted(() => {
     font-size: .8rem;
     color: $gray-700;
     text-shadow: 1px 1px 0 #FFF;
+
+    @at-root .theme-dark & {
+      background-color: $gray-900;
+      text-shadow: none;
+      border-bottom-color: $gray-700;
+      border-right-color: $gray-700;
+      color: #FFF;
+    }
   }
 
   &-calcoffset {
diff --git a/client/agenda/FloorPlan.vue b/client/agenda/FloorPlan.vue
index 3b242eca36..eccd59aeaa 100644
--- a/client/agenda/FloorPlan.vue
+++ b/client/agenda/FloorPlan.vue
@@ -258,6 +258,11 @@ onMounted(() => {
     border-radius: 5px;
     font-weight: 500;
 
+    @at-root .theme-dark & {
+      background-color: darken($gray-900, 5%);
+      border-color: $gray-700;
+    }
+
     a {
       cursor: pointer;
 
diff --git a/client/agenda/agenda.scss b/client/agenda/agenda.scss
index 6d5cd634b5..e3e46d14f0 100644
--- a/client/agenda/agenda.scss
+++ b/client/agenda/agenda.scss
@@ -10,6 +10,10 @@
     justify-content: space-between;
     align-items: center;
 
+    @at-root .theme-dark & {
+      color: $gray-300;
+    }
+
     @media screen and (max-width: $bs5-break-sm) {
       justify-content: center;
 
@@ -25,6 +29,10 @@
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       box-decoration-break: clone;
+
+      @at-root .theme-dark & {
+        background-image: linear-gradient(220deg, $yellow-200 20%, $orange-400 70%);
+      }
     }
   }
 
diff --git a/client/components/n-theme.vue b/client/components/n-theme.vue
index 9fff81671e..b55c9772b9 100644
--- a/client/components/n-theme.vue
+++ b/client/components/n-theme.vue
@@ -1,24 +1,45 @@
 <template lang='pug'>
-n-config-provider(:theme-overrides='themeOverrides')
+n-config-provider(
+  :theme='currentTheme'
+  :theme-overrides='state.themeOverrides'
+  )
   slot
 </template>
 
-<script>
-import { NConfigProvider } from 'naive-ui'
-
-export default {
-  components: {
-    NConfigProvider
-  },
-  data () {
-    return {
-      themeOverrides: {
-        common: {
-          primaryColor: '#0d6efd',
-          primaryColorHover: '#0d6efd'
-        }
-      }
+<script setup>
+import { computed, reactive, watch } from 'vue'
+import { darkTheme, NConfigProvider } from 'naive-ui'
+
+import { useSiteStore } from '../shared/store'
+
+// STORES
+
+const siteStore = useSiteStore()
+
+// DATA
+
+const state = reactive({
+  themeOverrides: {
+    common: {
+      primaryColor: '#0d6efd',
+      primaryColorHover: '#0d6efd'
     }
   }
-}
+})
+
+// COMPUTED
+
+const currentTheme = computed(() => {
+  return siteStore.theme === 'dark' ? darkTheme : null
+})
+
+// APPLY BODY THEME CLASS
+
+watch(() => siteStore.theme, (newValue) => {
+  if (newValue === 'dark') {
+    document.body.classList.add('theme-dark')
+  } else {
+    document.body.classList.remove('theme-dark')
+  }
+}, { immediate: true })
 </script>
diff --git a/client/shared/store.js b/client/shared/store.js
index 389d5e5a82..5dd57f2c81 100644
--- a/client/shared/store.js
+++ b/client/shared/store.js
@@ -6,6 +6,7 @@ export const useSiteStore = defineStore('site', {
     criticalErrorLink: null,
     criticalErrorLinkText: null,
     isMobile: /Mobi/i.test(navigator.userAgent),
-    viewport: Math.round(window.innerWidth)
+    viewport: Math.round(window.innerWidth),
+    theme: null
   })
 })
diff --git a/ietf/templates/meeting/agenda.html b/ietf/templates/meeting/agenda.html
index 41cccd8e21..a4eab654bf 100644
--- a/ietf/templates/meeting/agenda.html
+++ b/ietf/templates/meeting/agenda.html
@@ -39,6 +39,10 @@
     backdrop-filter: blur(10px);
 }
 
+.theme-dark #app-loading {
+    background-color: rgba(0,0,0,.75);
+}
+
 #app-loading:before {
     content: '';
     box-sizing: border-box;
@@ -56,6 +60,10 @@
     z-index: 2000000000;
 }
 
+.theme-dark #app-loading:before {
+    border-top-color: #FFF;
+}
+
 #app-loading:after {
     content: 'Loading meeting {{ meetingData.meetingNumber }}...';
     position: absolute;
@@ -69,6 +77,10 @@
     z-index: 2000000000;
 }
 
+.theme-dark #app-loading:after {
+    color: #FFF;
+}
+
 #app-loading-footer {
     position: absolute;
     text-align: center;