New custom styles example

Author: marcveens

src/types.ts

@@ -36,6 +36,10 @@ export type UrlParameters = {
    * Theme of the editor
    */
   ui?: 'min' | 'atlas' | 'kennedy' | 'dark' | 'sketch' | 'simple';
+  /**
+   * Turn dark mode on/off
+   */
+  dark?: boolean;
   /**
    * Shows a Loading… spinner while waiting for the diagram data to load in embed mode.
    *

stories/DiagramsEmbed.stories.tsx

@@ -359,3 +359,17 @@ export const NoSaveAndExit: Story = {
     }
   }
 };
+
+export const CustomStyles: Story = {
+  args: {
+    xml: WithData.args?.xml,
+    configuration: {
+      css: `
+:root { --panel-color: #DCEBE5 !important; --border-color: #b9d6cb !important; }
+html .gePrimaryBtn { background: #528a79 !important; }
+.geMenubarContainer { background: #3b665a !important; }
+.geMenubarContainer a { color: #fff !important; }
+      `
+    }
+  }
+};