UI: Add Light- and Dark-Mode (#3720)

.storybook/main.js

@@ -1,23 +1,16 @@
-const { loadConfigFromFile } = require("vite");
-const path = require("path");
-
 module.exports = {
-  stories: ["../assets/js/**/*.stories.mdx", "../assets/js/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-postcss"],
+  stories: ["../assets/js/**/*.stories.js"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
   framework: "@storybook/vue3",
   core: {
-    builder: "storybook-builder-vite",
+    builder: "@storybook/builder-vite",
   },
   staticDirs: ["../assets"],
-  async viteFinal(config, b) {
-    const { config: userConfig } = await loadConfigFromFile(
-      path.resolve(__dirname, "../vite.config.ts")
-    );
-    const vuePlugin = userConfig.plugins.find((p) => p.name === "vite:vue");
-
-    const vuePluginIndex = config.plugins.findIndex((p) => p.name === "vite:vue");
-    config.plugins[vuePluginIndex] = vuePlugin;
-
-    return config;
+  features: {
+    storyStoreV7: true,
   },
 };

.storybook/middleware.js

@@ -1,9 +0,0 @@
-const express = require("express");
-
-const expressMiddleWare = (router) => {
-  router.post("/update", function (req, res) {
-    res.status(200).send("ok");
-  });
-};
-
-module.exports = expressMiddleWare;

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

.storybook/preview.js

@@ -10,16 +10,22 @@ app.use(i18n);
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
   backgrounds: {
-    default: "dark",
+    default: "background",
     values: [
       {
-        name: "light",
-        value: "#ffffff",
+        name: "background",
+        value: "var(--evcc-background)",
       },
       {
-        name: "dark",
-        value: "#28293e",
+        name: "box",
+        value: "var(--evcc-box)",
       },
     ],
   },