Merge pull request #1893 from jplag/report-viewer/dark-mode-redesign

Dark mode redesign

report-viewer/src/components/ComparisonsTable.vue

@@ -173,7 +173,7 @@ import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faUserGroup } from '@fortawesome/free-solid-svg-icons'
-import { generateColors } from '@/utils/ColorUtils'
+import { generateHues } from '@/utils/ColorUtils'
 import ToolTipComponent from './ToolTipComponent.vue'
 import { MetricType, metricToolTips } from '@/model/MetricType'
 import NameElement from './NameElement.vue'
@@ -339,10 +339,25 @@ function getClusterFor(clusterIndex: number) {
 
 const displayClusters = props.clusters != undefined
 
-let clusterIconColors = [] as Array<string>
+let clusterIconHues = [] as Array<number>
+const lightmodeSaturation = 80
+const lightmodeLightness = 50
+const lightmodeAlpha = 0.3
+const darkmodeSaturation = 90
+const darkmodeLightness = 65
+const darkmodeAlpha = 0.6
 if (props.clusters != undefined) {
-  clusterIconColors = generateColors(props.clusters.length, 0.8, 0.5, 1)
+  clusterIconHues = generateHues(props.clusters.length)
 }
+const clusterIconColors = computed(() =>
+  clusterIconHues.map((h) => {
+    return `hsla(${h}, ${
+      store().uiState.useDarkMode ? darkmodeSaturation : lightmodeSaturation
+    }%, ${
+      store().uiState.useDarkMode ? darkmodeLightness : lightmodeLightness
+    }%, ${store().uiState.useDarkMode ? darkmodeAlpha : lightmodeAlpha})`
+  })
+)
 
 function isHighlightedRow(item: ComparisonListElement) {
   return (

report-viewer/src/components/ContainerComponent.vue

@@ -3,7 +3,7 @@
 -->
 <template>
   <div
-    class="box-border rounded-md border-1 border-container-border-light bg-container-light p-2 shadow dark:border-container-border-dark dark:bg-container-dark dark:shadow-black print:border-2 print:shadow-none"
+    class="box-border rounded-md border-1 border-container-border-light bg-container-light p-2 shadow dark:border-container-border-dark dark:bg-container-dark print:border-2 print:shadow-none"
   >
     <slot></slot>
   </div>

report-viewer/src/utils/ColorUtils.ts

@@ -4,30 +4,15 @@ import { computed } from 'vue'
 /**
  * Generates an array of HSL-Colors
  * @param numberOfColors Number of colors to generate
- * @param saturation Saturation of the colors [0,1]
- * @param lightness Lightness of the colors [0,1]
- * @param alpha Alpha value of the colors [0,1]
  */
-function generateColors(
-  numberOfColors: number,
-  saturation: number,
-  lightness: number,
-  alpha: number
-) {
+function generateHues(numberOfColors: number) {
   const numberOfColorsInFirstInterval = Math.round(
     ((80 - 20) / (80 - 20 + (340 - 160))) * numberOfColors
   ) // number of colors from the first interval
   const numberOfColorsInSecondInterval = numberOfColors - numberOfColorsInFirstInterval // number of colors from the second interval
 
-  const colors: Array<string> = generateColorsForInterval(
-    20,
-    80,
-    numberOfColorsInFirstInterval,
-    saturation,
-    lightness,
-    alpha
-  )
-  colors.push(...generateColorsForInterval(160, 340, numberOfColorsInSecondInterval, 0.8, 0.5, 0.3))
+  const colors: Array<number> = generateColorsForInterval(20, 80, numberOfColorsInFirstInterval)
+  colors.push(...generateColorsForInterval(160, 340, numberOfColorsInSecondInterval))
   return colors
 }
 
@@ -44,19 +29,16 @@ function generateColors(
 function generateColorsForInterval(
   intervalStart: number,
   intervalEnd: number,
-  numberOfColorsInInterval: number,
-  saturation: number,
-  lightness: number,
-  alpha: number
+  numberOfColorsInInterval: number
 ) {
-  const colors: Array<string> = []
+  const hues: Array<number> = []
   const interval = intervalEnd - intervalStart
   const hueDelta = Math.trunc(interval / numberOfColorsInInterval)
   for (let i = 0; i < numberOfColorsInInterval; i++) {
     const hue = intervalStart + i * hueDelta
-    colors.push(`hsla(${hue}, ${saturation * 100}%, ${lightness * 100}%, ${alpha})`)
+    hues.push(hue)
   }
-  return colors
+  return hues
 }
 
 /** This is the list of colors that are used as the background color of matches in the comparison view */
@@ -113,4 +95,4 @@ const graphColors = {
   }
 }
 
-export { generateColors, graphColors, getMatchColorCount, getMatchColor, type MatchColorIndex }
+export { generateHues, graphColors, getMatchColorCount, getMatchColor, type MatchColorIndex }

report-viewer/tailwind.config.js

@@ -13,26 +13,26 @@ export default {
         },
         background: {
           light: 'hsl(0, 0%, 97%)',
-          dark: 'hsl(180, 80%, 3%)'
+          dark: 'hsl(230, 10%, 8%)'
         },
         container: {
           light: 'hsl(0, 0%, 98%)',
-          dark: 'hsl(200, 20%, 13%)',
+          dark: 'hsl(250, 10%, 15%)',
           border: {
             light: 'hsl(0, 0%, 80%)',
             dark: 'hsl(0, 0%, 25%)'
           },
           secondary: {
             light: 'hsl(0, 0%, 95%)',
-            dark: 'hsl(200, 20%, 18%)'
+            dark: 'hsl(250, 10%, 20%)'
           }
         },
         interactable: {
           light: 'hsl(0, 0%, 100%)',
-          dark: 'hsl(180, 30%, 18%)',
+          dark: 'hsl(250, 10%, 20%)',
           border: {
             light: 'hsl(0, 0%, 75%)',
-            dark: 'hsl(0, 0%, 30%)'
+            dark: 'hsl(0, 0%, 25%)'
           }
         },
         scrollbar: {