docs: legg til mulighet for å velge fargetema i Storybook

.storybook/main.ts

@@ -5,11 +5,13 @@ const config: StorybookConfig = {
     stories: ["../packages/jokul/**/*.stories.@(ts|tsx)"],
     staticDirs: ["../storybook-public"],
     addons: [
-        "@storybook/addon-onboarding",
         "@storybook/addon-essentials",
         "@chromatic-com/storybook",
         "@storybook/addon-interactions",
     ],
+    features: {
+        backgroundsStoryGlobals: true,
+    },
     framework: {
         name: "@storybook/react-vite",
         options: {},

.storybook/preview.tsx

@@ -4,9 +4,42 @@ import React from "react";
 import "../packages/jokul/src/components/card/styles/_index.scss";
 import { PropDocs } from "./docs/props/PropDocs.js";
 import "./global.scss";
+import { themeDecorator, themeGlobal, themes } from "./theme.js";
 
 const preview: Preview = {
+    globalTypes: {
+        theme: themeGlobal,
+    },
+    initialGlobals: {
+        theme: themes[0],
+        backgrounds: { value: "page" },
+    },
+    decorators: [themeDecorator],
     parameters: {
+        backgrounds: {
+            options: {
+                page: {
+                    name: "Page",
+                    value: "var(--jkl-color-background-page)",
+                },
+                pageVariant: {
+                    name: "Page variant",
+                    value: "var(--jkl-color-background-page-variant)",
+                },
+                container: {
+                    name: "Container",
+                    value: "var(--jkl-color-background-container)",
+                },
+                containerLow: {
+                    name: "Container low",
+                    value: "var(--jkl-color-background-container-low)",
+                },
+                containerHigh: {
+                    name: "Container high",
+                    value: "var(--jkl-color-background-container-high)",
+                },
+            },
+        },
         options: {
             storySort: (a, b) => {
                 let compareBy = "name";

.storybook/theme.tsx

@@ -0,0 +1,43 @@
+import { ReactRenderer } from "@storybook/react";
+import React, { useEffect } from "react";
+import { DecoratorFunction } from "storybook/internal/types";
+
+export const themes = [undefined, "light", "dark"] as const;
+
+const applyTheme = (element: HTMLElement, theme: (typeof themes)[number]) => {
+    element.classList.add("jkl");
+    element.dataset["theme"] = theme;
+};
+
+const clearTheme = (element: HTMLElement) => {
+    delete element.dataset["theme"];
+};
+
+export const themeGlobal = {
+    description: "Fargetema for eksemplet",
+    toolbar: {
+        title: "Fargetema",
+        icon: "paintbrush",
+        items: [
+            { title: "Automatisk", value: themes[0], icon: "contrast" },
+            { title: "Lyst", value: themes[1], icon: "sun" },
+            { title: "Mørkt", value: themes[2], icon: "moon" },
+        ],
+        dynamicTitle: true,
+    },
+};
+
+export const themeDecorator: DecoratorFunction<ReactRenderer, {}> = (
+    Story,
+    context,
+) => {
+    useEffect(() => {
+        const body = window.document.body;
+        clearTheme(body);
+        applyTheme(body, context.globals.theme);
+
+        return () => clearTheme(body);
+    }, [context.globals.theme]);
+
+    return <Story />;
+};