diff --git a/.storybook/preview.js b/.storybook/preview.js
index be7d5ee23..815bee105 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,3 +1,8 @@
+import React from "react";
+
+import ApplicationContainer from "../src/components/Application/ApplicationContainer";
+import ApplicationContent from "../src/components/Application/ApplicationContent";
+
 import "./styles.scss";
 
 export const parameters = {
@@ -17,8 +22,17 @@ export const parameters = {
 const preview = {
     // Enables auto-generated documentation for all stories
     // @see https://storybook.js.org/docs/writing-docs/autodocs
-    tags: ['autodocs'],
+    tags: ["autodocs"],
     parameters,
+    decorators: [
+        (Story) => (
+            <ApplicationContainer style={{ position: "relative" }}>
+                <ApplicationContent>
+                    <Story />
+                </ApplicationContent>
+            </ApplicationContainer>
+        ),
+    ],
 };
 
 export default preview;
diff --git a/src/cmem/markdown/Markdown.stories.tsx b/src/cmem/markdown/Markdown.stories.tsx
index ee7adef3e..850b29f74 100644
--- a/src/cmem/markdown/Markdown.stories.tsx
+++ b/src/cmem/markdown/Markdown.stories.tsx
@@ -1,12 +1,23 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
+import { Card, CardContent } from "../../components/Card/index";
+
 import { Markdown } from "./../../../index";
 
 export default {
     title: "Cmem/Markdown",
     component: Markdown,
     argTypes: {},
+    decorators: [
+        (Story) => (
+            <Card>
+                <CardContent>
+                    <Story />
+                </CardContent>
+            </Card>
+        ),
+    ],
 } as Meta<typeof Markdown>;
 
 const Template: StoryFn<typeof Markdown> = (args) => <Markdown {...args} />;
diff --git a/src/common/scss/_color-functions.scss b/src/common/scss/_color-functions.scss
index 8fe9504a3..e25411420 100644
--- a/src/common/scss/_color-functions.scss
+++ b/src/common/scss/_color-functions.scss
@@ -19,7 +19,7 @@
         @error "Need at least 1 color to create color tints.";
     }
 
-    // we asume that it correct to give only start and end of tint weights
+    // we assume that it correct to give only start and end of tint weights
     // only echo debug message if we have a 1, 3 or 4 color values
     @if $count-colors != 2 {
         @debug "Got only #{$count-colors} tints: #{$colorset}";
@@ -103,6 +103,147 @@
     }
 }
 
+/**
+ * Reverse alpha compositing ("remove" a background color from a color).
+ *
+ * Given an opaque $color that visually results from compositing an unknown
+ * semi-transparent foreground color over $background, this returns that
+ * foreground color including the alpha channel, so that
+ *   compositing the result over $background reproduces $color again.
+ *
+ * For every channel the minimal alpha is determined that keeps the resulting
+ * foreground channel inside the valid [0, 255] range; the largest of these
+ * per-channel alphas is used for all channels. This yields the most
+ * transparent foreground color possible for the given $background.
+ */
+@function eccgui-color-subtract-background($color, $background) {
+    @if meta.type-of($color) != "color" or meta.type-of($background) != "color" {
+        @error "eccgui-color-subtract-background() expects SASS color values for $color and $background.";
+    }
+
+    $channels: "red" "green" "blue";
+    $alpha: 0;
+
+    // determine the minimal alpha that keeps every foreground channel in range
+    @each $channel in $channels {
+        $target: color.channel($color, $channel, $space: rgb);
+        $base: color.channel($background, $channel, $space: rgb);
+        $channel-alpha: 0;
+
+        @if $target > $base {
+            // foreground channel goes towards 255, limited by the headroom (255 - base)
+            $channel-alpha: math.div($target - $base, 255 - $base);
+        } @else if $target < $base {
+            // foreground channel goes towards 0, limited by the available range (base)
+            $channel-alpha: math.div($base - $target, $base);
+        }
+
+        @if $channel-alpha > $alpha {
+            $alpha: $channel-alpha;
+        }
+    }
+
+    @if $alpha <= 0 {
+        // $color equals $background, the foreground is fully transparent
+        @return transparent;
+    }
+
+    // recover the foreground channels: foreground = base + (target - base) / alpha
+    $foreground: ();
+
+    @each $channel in $channels {
+        $target: color.channel($color, $channel, $space: rgb);
+        $base: color.channel($background, $channel, $space: rgb);
+        $foreground: list.append($foreground, $base + math.div($target - $base, $alpha));
+    }
+
+    @return color.change(
+        rgb(list.nth($foreground, 1), list.nth($foreground, 2), list.nth($foreground, 3)),
+        $alpha: $alpha
+    );
+}
+
+/**
+ * Alpha compositing ("flatten" a semi-transparent color onto a background).
+ *
+ * Given a $color that may carry an alpha channel and an opaque $background,
+ * this composites $color over $background and returns the resulting opaque
+ * color. It is the inverse of eccgui-color-subtract-background().
+ *
+ * Per channel: result = foreground * alpha + background * (1 - alpha).
+ */
+@function eccgui-color-flatten-foreground($color, $background) {
+    @if meta.type-of($color) != "color" or meta.type-of($background) != "color" {
+        @error "eccgui-color-blend-onto-background() expects SASS color values for $color and $background.";
+    }
+
+    $alpha: color.alpha($color);
+
+    @if $alpha >= 1 {
+        // fully opaque foreground, background has no influence
+        @return color.change($color, $alpha: 1);
+    }
+
+    $channels: "red" "green" "blue";
+    $blended: ();
+
+    @each $channel in $channels {
+        $foreground: color.channel($color, $channel, $space: rgb);
+        $base: color.channel($background, $channel, $space: rgb);
+        $blended: list.append($blended, $foreground * $alpha + $base * (1 - $alpha));
+    }
+
+    @return rgb(list.nth($blended, 1), list.nth($blended, 2), list.nth($blended, 3));
+}
+
+/**
+ * Switch the background color for a color value.
+ */
+@function eccgui-color-switch-background($color, $bg_old, $bg_new) {
+    @return eccgui-color-flatten-foreground(eccgui-color-subtract-background($color, $bg_old), $bg_new);
+}
+
+/**
+ * Process a color from a light palette to get used in a dark palette.
+ */
+@function eccgui-color-darkify($color) {
+    // very simple process, only invert lightness
+    $color-dark-simple: color.change($color, $lightness: 100% - color.channel($color, "lightness", $space: hsl));
+
+    // read values for lightness and saturation
+    // use them to improve the final darkified color
+    $l: color.channel($color-dark-simple, "lightness", $space: hsl);
+    $s: color.channel($color-dark-simple, "saturation", $space: hsl);
+
+    // improve color perception
+    // for light and saturated colors bring back a bit of the original color
+    @if $l > 45% and $s > 70% {
+        $color-dark-simple: color.mix($color, $color-dark-simple, 25%);
+        $l: color.channel($color-dark-simple, "lightness", $space: hsl);
+        $s: color.channel($color-dark-simple, "saturation", $space: hsl);
+    }
+
+    // improve lightness
+    // make dark colors a bit lighter again
+    @if $l < 50% {
+        $l: $l + (10% * math.div(50% - $l, 50%));
+    }
+
+    // improve saturation
+    // decrease it gradually based on lightness and saturation to prevent straining "neon" effects
+    $s: $s * (1 - 0.1 * math.div($l, 100%) - 0.1 * math.div($s, 100%));
+
+    // return improved darkified color, round rgb values
+    $color-dark-improved: color.change($color-dark-simple, $lightness: $l, $saturation: $s);
+
+    @return color.change(
+        $color-dark-improved,
+        $red: math.round(color.channel($color-dark-improved, "red")),
+        $green: math.round(color.channel($color-dark-improved, "green")),
+        $blue: math.round(color.channel($color-dark-improved, "blue"))
+    );
+}
+
 $debug-rgba-values: "yes";
 
 /**
diff --git a/src/components/Application/ApplicationContainer.tsx b/src/components/Application/ApplicationContainer.tsx
index 9ec5c1156..ad6a818e5 100644
--- a/src/components/Application/ApplicationContainer.tsx
+++ b/src/components/Application/ApplicationContainer.tsx
@@ -11,20 +11,33 @@ export interface ApplicationContainerProps extends React.HTMLAttributes<HTMLDivE
      * This need to match with a `dropzone-for` data attribute on available dropzones for dragged elements.
      */
     monitorDropzonesFor?: string[];
+    /**
+     * Use a light or dark color palette for the GUI.
+     * On `auto` it depends on the system configuration.
+     */
+    themeMode?: "dark" | "light" | "auto";
 }
 
 export const ApplicationContainer = ({
     children,
     className = "",
     monitorDropzonesFor = [],
+    themeMode = "auto",
     ...otherDivProps
 }: ApplicationContainerProps) => {
-    const containerRef = React.useRef<any>(null);
+    const containerRef = React.useRef(null);
     useDropzoneMonitor(monitorDropzonesFor);
 
     return (
         <OverlaysProvider>
-            <div ref={containerRef} className={`${eccgui}-application__container ${className}`} {...otherDivProps}>
+            <div
+                ref={containerRef}
+                className={
+                    `${eccgui}-application__container ${eccgui}-palette--${themeMode}` +
+                    (className ? ` ${className}` : "")
+                }
+                {...otherDivProps}
+            >
                 {children}
             </div>
         </OverlaysProvider>
diff --git a/src/components/Application/_colors.scss b/src/components/Application/_colors.scss
index 6a16bd7d2..6cbb1c513 100644
--- a/src/components/Application/_colors.scss
+++ b/src/components/Application/_colors.scss
@@ -1,9 +1,11 @@
 @use "sass:map";
 @use "sass:list";
 
-:root {
-    // creating css custom properties from palette colors
-    @each $palette-group-name, $palette-group-tints in $eccgui-color-palette-light {
+/**
+ * creating css custom properties from palette colors
+ */
+@mixin eccgui-custom-property-palette($color-palette) {
+    @each $palette-group-name, $palette-group-tints in $color-palette {
         @each $palette-tint-name, $palette-tint-colors in $palette-group-tints {
             @for $i from 1 through list.length($palette-tint-colors) {
                 $css-property-name: #{eccgui-color-name($palette-group-name, $palette-tint-name, ($i * 2 - 1) * 100)};
@@ -13,6 +15,16 @@
             }
         }
     }
+}
+
+:root {
+    // css custom properties for light palette
+    @include eccgui-custom-property-palette($eccgui-color-palette-light);
+
+    @media (prefers-color-scheme: dark) {
+        // css custom properties for dark palette
+        @include eccgui-custom-property-palette($eccgui-color-palette-dark);
+    }
 
     // set aliases for base colors
     --#{$eccgui}-color-primary: #{$eccgui-color-primary};
@@ -28,3 +40,15 @@
     --#{$eccgui}-color-danger-foreground: #{$eccgui-color-danger-text};
     --#{$eccgui}-color-danger-background: #{$eccgui-color-danger-background};
 }
+
+.#{$eccgui}-palette--light,
+html:has(.#{$eccgui}-application__container.#{$eccgui}-palette--light) {
+    // css custom properties for a forced light palette
+    @include eccgui-custom-property-palette($eccgui-color-palette-light);
+}
+
+.#{$eccgui}-palette--dark,
+html:has(.#{$eccgui}-application__container.#{$eccgui}-palette--dark) {
+    // css custom properties for a forced dark palette
+    @include eccgui-custom-property-palette($eccgui-color-palette-dark);
+}
diff --git a/src/components/Application/_container.scss b/src/components/Application/_container.scss
new file mode 100644
index 000000000..5e0ec59d6
--- /dev/null
+++ b/src/components/Application/_container.scss
@@ -0,0 +1,5 @@
+html,
+.#{$eccgui}-application__container {
+    color: $eccgui-color-workspace-text;
+    background-color: $eccgui-color-workspace-background;
+}
diff --git a/src/components/Application/_sidebar.scss b/src/components/Application/_sidebar.scss
index 8aec07382..e4ff46fe4 100644
--- a/src/components/Application/_sidebar.scss
+++ b/src/components/Application/_sidebar.scss
@@ -26,6 +26,8 @@ $ui-02: $eccgui-color-workspace-background !default;
 
 .#{$prefix}--side-nav__navigation {
     padding: $eccgui-size-block-whitespace calc(0.5 * (#{mini-units(8)} - 30px));
+    color: eccgui-color-var("identity", "text", "900");
+    background-color: eccgui-color-var("identity", "background", "100");
     transition: none;
 }
 
diff --git a/src/components/Application/application.scss b/src/components/Application/application.scss
index 460d62ee2..abcee2e56 100644
--- a/src/components/Application/application.scss
+++ b/src/components/Application/application.scss
@@ -1,5 +1,6 @@
 // @import 'config';
 @import "colors";
+@import "container";
 @import "header";
 @import "toolbar";
 
diff --git a/src/components/Application/stories/Application.stories.tsx b/src/components/Application/stories/Application.stories.tsx
index 7e0aa6cf4..3c9a6bfbb 100644
--- a/src/components/Application/stories/Application.stories.tsx
+++ b/src/components/Application/stories/Application.stories.tsx
@@ -26,6 +26,7 @@ interface ApplicationBasicExampleProps {
     openUserMenu: boolean;
     countNotifications: number;
     colorBackgroundHeader?: string;
+    themeMode?: "light" | "dark" | "auto";
 }
 
 function ApplicationBasicExample(args: ApplicationBasicExampleProps) {
@@ -50,11 +51,15 @@ export default {
         colorBackgroundHeader: {
             control: { type: "color" },
         },
+        themeMode: {
+            control: "select",
+            options: ["auto", "light", "dark"],
+        },
     },
 } as Meta<typeof ApplicationBasicExample>;
 
 const TemplateBasicExample: StoryFn<typeof ApplicationBasicExample> = (args) => (
-    <ApplicationContainer>
+    <ApplicationContainer themeMode={args.themeMode}>
         <ApplicationHeader
             aria-label={"Application"}
             style={
@@ -147,3 +152,10 @@ BasicExample.args = {
     openUserMenu: false,
     countNotifications: 234,
 };
+BasicExample.decorators = [
+    (Story) => (
+        <div style={{ margin: "calc(-1 * var(--eccgui-size-block-whitespace) - 8px)" }}>
+            <Story />
+        </div>
+    ),
+];
diff --git a/src/components/Checkbox/checkbox.scss b/src/components/Checkbox/checkbox.scss
index d0625b55e..e686d8cc0 100644
--- a/src/components/Checkbox/checkbox.scss
+++ b/src/components/Checkbox/checkbox.scss
@@ -64,6 +64,15 @@ $switch-checked-background-color-disabled: eccgui-color-rgba(
             // TODO: set set icon line colors here we need a custom js inject like blueprint uses
             color: $eccgui-color-checkbox-checked;
             background-image: url("~@carbon/icons/svg/32/checkbox.svg");
+
+            @media (prefers-color-scheme: dark) {
+                filter: invert(1);
+            }
+
+            html:has(.#{$eccgui}-application__container.#{$eccgui}-palette--dark) :not(.#{$eccgui}-palette--light) &,
+            .#{$eccgui}-palette--dark :not(.#{$eccgui}-palette--light) & {
+                filter: invert(1);
+            }
         }
         input:checked ~ .#{$ns}-control-indicator::before {
             background-image: url("~@carbon/icons/svg/32/checkbox--checked.svg");
diff --git a/src/components/RadioButton/radiobutton.scss b/src/components/RadioButton/radiobutton.scss
index 2a06882db..48c53aa7f 100644
--- a/src/components/RadioButton/radiobutton.scss
+++ b/src/components/RadioButton/radiobutton.scss
@@ -27,6 +27,15 @@
 
         input ~ .#{$ns}-control-indicator::before {
             background-image: url("~@carbon/icons/svg/32/radio-button.svg");
+
+            @media (prefers-color-scheme: dark) {
+                filter: invert(1);
+            }
+
+            html:has(.#{$eccgui}-application__container.#{$eccgui}-palette--dark) :not(.#{$eccgui}-palette--light) &,
+            .#{$eccgui}-palette--dark :not(.#{$eccgui}-palette--light) & {
+                filter: invert(1);
+            }
         }
         input:checked ~ .#{$ns}-control-indicator::before {
             background-image: url("~@carbon/icons/svg/32/radio-button--checked.svg");
diff --git a/src/components/Typography/typography.scss b/src/components/Typography/typography.scss
index 958eb7642..3e806c27c 100644
--- a/src/components/Typography/typography.scss
+++ b/src/components/Typography/typography.scss
@@ -201,7 +201,7 @@ pre {
     &.#{$eccgui}-typography__text {
         padding: $eccgui-size-block-whitespace * 0.5;
         overflow-x: auto;
-        background-color: $eccgui-color-workspace-background;
+        background-color: #{eccgui-color-mix(eccgui-color-var("identity", "background", "300") 50%, transparent)};
 
         & > div[style]:has(.#{$eccgui}-markdown__syntaxhighlighter) {
             // remove styles like padding and font from prism div
@@ -210,7 +210,27 @@ pre {
             font-family: inherit !important;
             font-size: inherit !important;
             line-height: inherit !important;
+            text-shadow: none !important;
             background-color: transparent !important;
+
+            span {
+                background-color: transparent !important;
+            }
+
+            @media (prefers-color-scheme: dark) {
+                span[style~="color:"] {
+                    filter: invert(1);
+                }
+            }
+            .#{$eccgui}-palette--dark :not(.#{$eccgui}-palette--light) & {
+                span[style~="color:"] {
+                    filter: invert(1);
+                }
+            }
+        }
+
+        code {
+            background-color: transparent;
         }
     }
 }
diff --git a/src/components/Workspace/workspace.scss b/src/components/Workspace/workspace.scss
index bc84c741e..833f565dd 100644
--- a/src/components/Workspace/workspace.scss
+++ b/src/components/Workspace/workspace.scss
@@ -1,6 +1 @@
 @import "header";
-
-html {
-    color: $eccgui-color-workspace-text;
-    background-color: $eccgui-color-workspace-background;
-}
diff --git a/src/configuration/_palettes.scss b/src/configuration/_palettes.scss
index 6d2c1de5e..425345f96 100644
--- a/src/configuration/_palettes.scss
+++ b/src/configuration/_palettes.scss
@@ -1,9 +1,72 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:color";
+
+/**
+ * Switch the background color for a complete color palette.
+ */
+@function eccgui-palette-switch-background($palette, $bg_old, $bg_new) {
+    $switched-palette: ();
+
+    @each $group, $names in $palette {
+        $switched-names: ();
+
+        @each $name, $colorset in $names {
+            $switched-colorset: ();
+
+            @each $color in $colorset {
+                $switched-color: eccgui-color-switch-background($color, $bg_old, $bg_new);
+                $switched-colorset: list.append(
+                        $switched-colorset,
+                        $switched-color,
+                    $separator: space
+                );
+            }
+
+            $switched-names: map.set($switched-names, $name, $switched-colorset);
+        }
+
+        $switched-palette: map.set($switched-palette, $group, $switched-names);
+    }
+
+    @return $switched-palette;
+}
+
+/**
+ * Create dark theme based on a complete light color palette.
+ */
+@function eccgui-palette-darkify($palette) {
+    $switched-palette: ();
+
+    @each $group, $names in $palette {
+        $switched-names: ();
+
+        @each $name, $colorset in $names {
+            $switched-colorset: ();
+
+            @each $color in $colorset {
+                $switched-color: eccgui-color-darkify($color);
+                $switched-colorset: list.append(
+                        $switched-colorset,
+                        $switched-color,
+                    $separator: space
+                );
+            }
+
+            $switched-names: map.set($switched-names, $name, $switched-colorset);
+        }
+
+        $switched-palette: map.set($switched-palette, $group, $switched-names);
+    }
+
+    @return $switched-palette;
+}
+
 /**
  * Base definition for colors.
  * Can be overwritten if it is defined before this file is included.
  * You need to define all or nothing, we currently don't support overwriting only some parts of it.
  */
-
 $eccgui-color-palette-light: (
     "identity": (
         "brand": eccgui-create-color-tints(#fbead9 #f8cd99 #f6b966 #f4a533 #f29100),
@@ -30,7 +93,7 @@ $eccgui-color-palette-light: (
         "lime": eccgui-create-color-tints(#e4f3ea #d2edd6 #9dcd99 #688a55 #5a7b2c),
         "amber": eccgui-create-color-tints(#fff3d9 #ffe9c4 #f9cd8d #eeb757 #c77400),
         "vermilion": eccgui-create-color-tints(#ffe8e2 #f5b8a8 #d48772 #8c4b3a #651c09),
-        "grey": eccgui-create-color-tints(#f5f6f7 #b7b7b7 #808080 #484848 #1c2329),
+        "grey": eccgui-create-color-tints(#F6F6F6 #b7b7b7 #808080 #484848 #232323),
     ),
     "extra": (
         "gold": eccgui-create-color-tints(#fff7d5 #ebd893 #dfc670 #d3b44e #c7a22b),
@@ -38,3 +101,4 @@ $eccgui-color-palette-light: (
         "bronze": eccgui-create-color-tints(#fbe9db #f2d6bc #eac29d #e1af7e #d89b5f),
     ),
 ) !default;
+$eccgui-color-palette-dark: eccgui-palette-darkify($eccgui-color-palette-light) !default;
diff --git a/src/configuration/stories/customproperties.stories.tsx b/src/configuration/stories/customproperties.stories.tsx
index 5749bd996..295f44329 100644
--- a/src/configuration/stories/customproperties.stories.tsx
+++ b/src/configuration/stories/customproperties.stories.tsx
@@ -3,6 +3,9 @@ import { Meta, StoryFn } from "@storybook/react";
 
 import CssCustomProperties from "../../common/utils/CssCustomProperties";
 import {
+    Grid,
+    GridColumn,
+    GridRow,
     Section,
     SectionHeader,
     Spacing,
@@ -48,18 +51,42 @@ const groups: { title: string; filterName: (name: string) => boolean }[] = [
     },
 ];
 
-const CssCustomPropertiesOverview = () => {
+interface CssCustomPropertiesOverviewProps {
+    theme?: "auto" | "light" | "dark" | "compare";
+}
+
+const CssCustomPropertiesOverviewTemplate = ({ theme = "auto" }: CssCustomPropertiesOverviewProps) => {
+    switch (theme) {
+        case "compare":
+            return (
+                <Grid>
+                    <GridRow>
+                        <GridColumn>
+                            <CssCustomPropertiesOverview theme={"light"} />
+                        </GridColumn>
+                        <GridColumn>
+                            <CssCustomPropertiesOverview theme={"dark"} />
+                        </GridColumn>
+                    </GridRow>
+                </Grid>
+            );
+        default:
+            return <CssCustomPropertiesOverview theme={theme} />;
+    }
+};
+
+const CssCustomPropertiesOverview = ({ theme = "auto" }: CssCustomPropertiesOverviewProps) => {
     return (
-        <>
+        <div className={`${eccgui}-palette--${theme}`}>
             {groups.map(({ title, filterName }) => {
                 const properties = new CssCustomProperties({
-                    selectorText: ":root",
+                    selectorText: theme === "auto" ? ":root" : `.${eccgui}-palette--${theme}`,
                     filterName,
                     removeDashPrefix: false,
                     returnObject: false,
                 }).customProperties() as string[][];
 
-                return (
+                return properties.length > 0 ? (
                     <React.Fragment key={title}>
                         <Section>
                             <SectionHeader>
@@ -104,9 +131,9 @@ const CssCustomPropertiesOverview = () => {
                         </Section>
                         <Spacing size="large" />
                     </React.Fragment>
-                );
+                ) : null;
             })}
-        </>
+        </div>
     );
 };
 
@@ -117,6 +144,17 @@ const CssCustomPropertiesOverview = () => {
 export default {
     title: "Configuration/CSS Custom Properties",
     component: CssCustomPropertiesOverview,
+    argTypes: {
+        theme: {
+            control: "select",
+            options: ["auto", "light", "dark", "compare"],
+        },
+    },
 } as Meta<typeof CssCustomPropertiesOverview>;
 
-export const Default: StoryFn = () => <CssCustomPropertiesOverview />;
+export const Default: StoryFn<typeof CssCustomPropertiesOverview> = (args) => (
+    <CssCustomPropertiesOverviewTemplate {...args} />
+);
+Default.args = {
+    theme: "auto",
+};
diff --git a/src/extensions/codemirror/_codemirror.scss b/src/extensions/codemirror/_codemirror.scss
index f16496453..a1feafebc 100644
--- a/src/extensions/codemirror/_codemirror.scss
+++ b/src/extensions/codemirror/_codemirror.scss
@@ -114,6 +114,20 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
             text-decoration: line-through $eccgui-color-danger-text 2px;
         }
 
+        .cm-gutters {
+            color: #{eccgui-color-var("identity", "text", "700")};
+            background-color: #{eccgui-color-var("identity", "background", "300")};
+            border-color: #{eccgui-color-var("identity", "text", "300")};
+        }
+
+        .cm-cursor {
+            border-left-color: currentcolor;
+        }
+
+        .ͼ5 {
+            color: #{eccgui-color-var("identity", "text", "700")};
+        }
+
         .cm-scroller {
             width: calc(100% - 2px);
             height: calc(100% - 2px);
@@ -123,6 +137,38 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
             margin: 1px;
         }
 
+        .cm-tooltip {
+            font-size: $eccgui-size-typo-caption;
+            line-height: $eccgui-size-typo-caption-lineheight;
+            color: #{eccgui-color-var("identity", "text", "900")};
+            background-color: #{eccgui-color-var("identity", "background", "300")};
+            border-color: #{eccgui-color-var("identity", "text", "300")};
+
+            li {
+                padding: $eccgui-size-block-whitespace * 0.25 $eccgui-size-block-whitespace * 0.5;
+            }
+
+            .cm-diagnostic-error {
+                background-color: eccgui-color-var("semantic", "danger", "100");
+                border-color: eccgui-color-var("semantic", "danger", "900");
+            }
+
+            .cm-diagnostic-warning {
+                background-color: eccgui-color-var("semantic", "warning", "100");
+                border-color: eccgui-color-var("semantic", "warning", "900");
+            }
+
+            .cm-diagnostic-info {
+                background-color: eccgui-color-var("semantic", "info", "100");
+                border-color: eccgui-color-var("semantic", "info", "900");
+            }
+
+            .cm-diagnostic-hint {
+                background-color: eccgui-color-var("identity", "accent", "100");
+                border-color: eccgui-color-var("identity", "accent", "900");
+            }
+        }
+
         &.cm-focused {
             --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
             --#{$eccgui}-a11y-outline-offset: 0;
@@ -176,6 +222,19 @@ $eccgui-size-codeeditor-toolbar-height: $button-height !default;
             border-right-width: $eccgui-size-inline-whitespace !important;
         }
 
+        .cm-activeLine {
+            background-color: rgba($blue3, 0.1);
+        }
+
+        .cm-line span[class^="ͼ"] {
+            @media (prefers-color-scheme: dark) {
+                filter: invert(1);
+            }
+            .#{$eccgui}-palette--dark :not(.#{$eccgui}-palette--light) & {
+                filter: invert(1);
+            }
+        }
+
         .cm-tab {
             position: relative;
 
diff --git a/src/extensions/react-flow/_react-flow_v12.scss b/src/extensions/react-flow/_react-flow_v12.scss
index 1f7e646a2..1316d331f 100644
--- a/src/extensions/react-flow/_react-flow_v12.scss
+++ b/src/extensions/react-flow/_react-flow_v12.scss
@@ -43,26 +43,45 @@
 .react-flow__controls {
     display: flex;
     flex-direction: column;
+    border: 1px solid rgba($pt-text-color, 0.2);
+    box-shadow: none !important;
+
+    .react-flow__controls-button {
+        display: flex;
+        justify-content: center;
+        color: $pt-text-color;
+        cursor: pointer;
+        user-select: none;
+        background-color: $button-background-color;
+        border: none;
+
+        &:not(:last-child) {
+            border-bottom: 1px solid rgba($pt-text-color, 0.2);
+        }
+
+        &:hover,
+        &:focus {
+            background-color: $button-background-color-hover;
+        }
+
+        &:disabled {
+            color: $button-background-color-disabled;
+            pointer-events: none;
+        }
+    }
+
+    .react-flow__controls-button svg {
+        width: 100%;
+        max-width: 12px;
+        max-height: 12px;
+        fill: currentcolor;
+    }
 }
 
 .react-flow__controls.horizontal {
     flex-direction: row;
 }
 
-.react-flow__controls-button {
-    display: flex;
-    justify-content: center;
-    cursor: pointer;
-    user-select: none;
-}
-
-.react-flow__controls-button svg {
-    width: 100%;
-    max-width: 12px;
-    max-height: 12px;
-    fill: currentcolor;
-}
-
 .react-flow .react-flow__edges {
     position: absolute;
 }
@@ -152,6 +171,10 @@ svg.react-flow__connectionline {
     cursor: move;
 }
 
+.react-flow__minimap {
+    background-color: #{eccgui-color-var("identity", "background", "100")} !important;
+}
+
 .react-flow__minimap-svg {
     display: block;
 }
@@ -168,10 +191,6 @@ svg.react-flow__connectionline {
     outline: none;
 }
 
-.react-flow__controls-button:disabled {
-    pointer-events: none;
-}
-
 // -- adjustments
 
 .react-flow__background {
diff --git a/src/extensions/react-flow/edges/_edges.scss b/src/extensions/react-flow/edges/_edges.scss
index 603254e29..5ce0d06fd 100644
--- a/src/extensions/react-flow/edges/_edges.scss
+++ b/src/extensions/react-flow/edges/_edges.scss
@@ -18,6 +18,7 @@
     }
 
     .react-flow__edge-textbg {
+        fill: #{eccgui-color-var("identity", "background", "100")};
         stroke: currentcolor;
     }
 
diff --git a/src/includes/carbon-components/_requisits.scss b/src/includes/carbon-components/_requisits.scss
index 8bd2804fa..e587ca3d9 100644
--- a/src/includes/carbon-components/_requisits.scss
+++ b/src/includes/carbon-components/_requisits.scss
@@ -23,5 +23,15 @@
     @include theme;
 }
 
+:root, .#{$eccgui}-palette--light, .#{$eccgui}-palette--dark {
+    // overwrite some custom properties
+    --#{$prefix}-focus: #{$eccgui-color-accent};
+    --#{$prefix}-icon-primary: #{$eccgui-color-workspace-text};
+    --#{$prefix}-border-subtle-00: #{eccgui-color-var("identity", "background", "700")};
+    --#{$prefix}-border-subtle: var(--#{$prefix}-border-subtle-00);
+    --#{$prefix}-icon-secondary: #{eccgui-color-var("identity", "text", "700")};
+    --#{$prefix}-icon-primary: #{eccgui-color-var("identity", "text", "900")};
+}
+
 @import "~@carbon/react/scss/spacing";
 @import "~@carbon/react/scss/utilities/z-index";
diff --git a/src/includes/carbon-components/_variables.scss b/src/includes/carbon-components/_variables.scss
index c11ba2986..2711af44c 100644
--- a/src/includes/carbon-components/_variables.scss
+++ b/src/includes/carbon-components/_variables.scss
@@ -103,6 +103,7 @@ $text-primary: $eccgui-color-applicationheader-text !default;
 $text-secondary: $eccgui-color-workspace-text !default;
 $link-primary: $eccgui-color-accent !default;
 $link-primary-hover: $eccgui-color-info-text !default;
+$link-secondary: $eccgui-color-accent !default;
 $link-visited: purple !default;
 $hover-ui: $button-background-color-hover !default;
 $background-hover: $hover-ui !default;