fix: data-theme not updating after browser history navigation

Author: marcel-bitfly

frontend/assets/css/colors.scss

@@ -154,7 +154,7 @@
   --toast-background-error-color: var(--pastel-red);
   --toast-border-error-color: var(--bold-red);
 
-  &.dark-mode {
+  &[data-theme=dark] {
     --primary-color: var(--primary-orange);
     --primary-contrast-color: var(--light-black);
     --primary-contrast-color-discreet: var(--dark-grey);

frontend/assets/css/prime_datatable.scss

@@ -4,7 +4,7 @@
   --expander-col-width: 53px;
   --table-header-background: var(--grey-4);
 
-  &.dark-mode {
+  &[data-theme=dark] {
     --table-header-background: var(--very-dark-grey);
   }
 }

frontend/components/bc/BcBlurOverlay.vue

@@ -10,7 +10,7 @@
   height: 75%;
 }
 
-.dark-mode {
+[data-theme=dark] {
   .gradient-blur {
     background: linear-gradient(rgba(35, 32, 36, 0), rgba(35, 32, 36, 1));
   }

frontend/components/bc/BcToggleIcon.vue

@@ -108,7 +108,7 @@ const toggle = () => {
   }
 }
 
-.dark-mode .bc-toggle .bg {
+[data-theme=dark] .bc-toggle .bg {
   background-color: var(--graphite);
   border-color: var(--graphite);
 }

frontend/components/bc/BcTooltip.vue

@@ -428,7 +428,7 @@ onUnmounted(() => {
   }
 }
 
-.dark-mode {
+[data-theme=dark] {
   .bc-tooltip {
     &.special {
       --tt-bg-color: var(--light-black);

frontend/components/dashboard/table/SummaryStatus.vue

@@ -78,7 +78,7 @@ const mapped = computed(() => {
 /* unfortunatly we can't use our css variables here as the rgba conversion is done during build process and there is no css native possibility */
 @include set-pulse-anmiation(#4e7451);
 
-.dark-mode {
+[data-theme=dark] {
   @include set-pulse-anmiation(#7dc382);
 }
 

frontend/layers/base/app/components/BaseColormode.vue

@@ -4,6 +4,10 @@ const cookie = useBcCookie<'dark' | 'light'>('theme')
 colorMode.preference = cookie.value || 'dark'
 const handleUpdate = () => {
   cookie.value = colorMode.preference as 'dark' | 'light'
+  // due to a bug in @nuxtjs/color-mode
+  // `data-theme` does not update when after user comes back to the app
+  // using browser back/forward buttons
+  document.documentElement.dataset.theme = colorMode.preference
 }
 </script>