Merge pull request #249 from hivemq/feat/18348/dark-mode

feat(18348): Add support for dark mode

hivemq-edge/src/frontend/cypress/support/component.tsx

@@ -27,8 +27,10 @@ import { ChakraProvider, VisuallyHidden } from '@chakra-ui/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
 import { AuthProvider } from '@/modules/Auth/AuthProvider.tsx'
-import { themeHiveMQ } from '@/modules/Theme/themeHiveMQ.ts'
+import themeHiveMQ from '@/modules/Theme/themeHiveMQ.ts'
 import '@/config/i18n.config.ts'
+import '@fontsource/roboto/400.css'
+import '@fontsource/roboto/700.css'
 
 // Augment the Cypress namespace to include type definitions for
 // your custom command.
@@ -39,6 +41,7 @@ declare global {
   namespace Cypress {
     interface Chainable {
       mount: typeof mount
+
       mountWithProviders(
         component: React.ReactNode,
         options?: MountOptions & { routerProps?: MemoryRouterProps }

hivemq-edge/src/frontend/package.json

@@ -12,6 +12,7 @@
     "lint:stylelint": "stylelint './src/**/*.css'",
     "lint:all": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0 && prettier --check .",
     "dev:openAPI": "openapi --input '../../../../hivemq-edge/ext/hivemq-edge-openapi-2023.8.yaml' -o ./src/api/__generated__ -c axios --name HiveMqClient --exportSchemas true",
+    "dev:chakra:types": "chakra-cli tokens './src/modules/Theme/themeHiveMQ.ts' --out 'node_modules/.pnpm/@chakra-ui+styled-system@2.9.1/node_modules/@chakra-ui/styled-system/dist/theming.types.d.ts'",
     "cypress:open": "cypress open",
     "cypress:open:component": "cypress open --component --browser chrome",
     "cypress:open:e2e": "cypress open --e2e --browser chrome",
@@ -38,10 +39,10 @@
     "@nivo/bar": "^0.84.0",
     "@nivo/core": "^0.84.0",
     "@nivo/line": "^0.84.0",
-    "@rjsf/chakra-ui": "^5.10.0",
-    "@rjsf/core": "^5.10.0",
-    "@rjsf/utils": "^5.10.0",
-    "@rjsf/validator-ajv8": "^5.10.0",
+    "@rjsf/chakra-ui": "^5.15.1",
+    "@rjsf/core": "^5.15.1",
+    "@rjsf/utils": "^5.15.1",
+    "@rjsf/validator-ajv8": "^5.15.1",
     "@tanstack/react-query": "^4.29.7",
     "@tanstack/react-query-devtools": "^4.29.7",
     "@tanstack/react-table": "^8.9.3",
@@ -67,6 +68,7 @@
     "zustand": "^4.4.7"
   },
   "devDependencies": {
+    "@chakra-ui/cli": "^2.4.1",
     "@percy/cli": "^1.24.2",
     "@percy/cypress": "^3.1.2",
     "@testing-library/jest-dom": "^5.16.5",