console: Fix live data dark theme

Author: ryaplots

pkg/webui/console/containers/application-events/index.js

@@ -38,6 +38,7 @@ import {
   selectApplicationEventsFilter,
   selectApplicationById,
 } from '@console/store/selectors/applications'
+import { selectConsolePreferences } from '@console/store/selectors/user-preferences'
 
 const m = defineMessages({
   applicationEventsOf: 'Application events of <strong>{entityName}</strong>',
@@ -52,6 +53,11 @@ const ApplicationEvents = props => {
   const paused = useSelector(state => selectApplicationEventsPaused(state, appId))
   const truncated = useSelector(state => selectApplicationEventsTruncated(state, appId))
   const filter = useSelector(state => selectApplicationEventsFilter(state, appId))
+  const consolePreferences = useSelector(selectConsolePreferences)
+  const dark =
+    consolePreferences.console_theme === 'CONSOLE_THEME_DARK' ||
+    (consolePreferences.console_theme === 'CONSOLE_THEME_SYSTEM' &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches)
 
   const dispatch = useDispatch()
 
@@ -94,7 +100,7 @@ const ApplicationEvents = props => {
         filter={filter}
         onPauseToggle={onPauseToggle}
         onFilterChange={onFilterChange}
-        darkTheme={darkTheme}
+        darkTheme={dark ?? darkTheme}
         framed={framed}
         titleMessage={m.applicationEventsOf}
         entityName={applicationName}
@@ -104,6 +110,7 @@ const ApplicationEvents = props => {
     appId,
     applicationName,
     darkTheme,
+    dark,
     events,
     filter,
     framed,

pkg/webui/console/containers/device-events/index.js

@@ -35,6 +35,7 @@ import {
   selectDeviceEventsFilter,
   selectDeviceById,
 } from '@console/store/selectors/devices'
+import { selectConsolePreferences } from '@console/store/selectors/user-preferences'
 
 const m = defineMessages({
   deviceEventsOf: 'End device events of <strong>{entityName}</strong>',
@@ -52,6 +53,11 @@ const DeviceEvents = props => {
   const paused = useSelector(state => selectDeviceEventsPaused(state, combinedId))
   const truncated = useSelector(state => selectDeviceEventsTruncated(state, combinedId))
   const filter = useSelector(state => selectDeviceEventsFilter(state, combinedId))
+  const consolePreferences = useSelector(selectConsolePreferences)
+  const dark =
+    consolePreferences.console_theme === 'CONSOLE_THEME_DARK' ||
+    (consolePreferences.console_theme === 'CONSOLE_THEME_SYSTEM' &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches)
 
   const dispatch = useDispatch()
 
@@ -98,7 +104,7 @@ const DeviceEvents = props => {
       onPauseToggle={onPauseToggle}
       onFilterChange={onFilterChange}
       truncated={truncated}
-      darkTheme={darkTheme}
+      darkTheme={dark ?? darkTheme}
       framed={framed}
       titleMessage={m.deviceEventsOf}
       entityName={deviceName}

pkg/webui/console/containers/gateway-events/index.js

@@ -38,6 +38,7 @@ import {
   selectGatewayEventsFilter,
   selectGatewayById,
 } from '@console/store/selectors/gateways'
+import { selectConsolePreferences } from '@console/store/selectors/user-preferences'
 
 const m = defineMessages({
   gatewayEventsOf: 'Gateway events of <strong>{entityName}</strong>',
@@ -52,6 +53,11 @@ const GatewayEvents = props => {
   const paused = useSelector(state => selectGatewayEventsPaused(state, gtwId))
   const truncated = useSelector(state => selectGatewayEventsTruncated(state, gtwId))
   const filter = useSelector(state => selectGatewayEventsFilter(state, gtwId))
+  const consolePreferences = useSelector(selectConsolePreferences)
+  const dark =
+    consolePreferences.console_theme === 'CONSOLE_THEME_DARK' ||
+    (consolePreferences.console_theme === 'CONSOLE_THEME_SYSTEM' &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches)
 
   const dispatch = useDispatch()
 
@@ -101,7 +107,7 @@ const GatewayEvents = props => {
         onFilterChange={onFilterChange}
         truncated={truncated}
         filter={filter}
-        darkTheme={darkTheme}
+        darkTheme={dark ?? darkTheme}
         framed={framed}
         titleMessage={m.gatewayEventsOf}
         entityName={gatewayName}
@@ -110,6 +116,7 @@ const GatewayEvents = props => {
     )
   }, [
     darkTheme,
+    dark,
     filter,
     framed,
     gatewayName,