From ff1aa8b87199d1122c9f1e54a6ecb5346efd741a Mon Sep 17 00:00:00 2001
From: Benjamin Kott <benjamin.kott@outlook.com>
Date: Tue, 23 Apr 2024 09:17:19 +0200
Subject: [PATCH] [TASK] Migrate theme to light dark notation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
With new web standards arising and getting shipped to the web platform,
we are migrating the currently limited light and dark mode components to
the web native color-scheme.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
Instead of relying on preferred color scheme queries, we're adopting the
light-dark color function, streamlining our CSS and ensuring compatibility
with all major browsers, except Safari (for now).
While Safari is slightly behind, we anticipate full support for
light-dark mode by May 2024, with the feature already available in
Safari 17.5 Beta.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark
See: https://developer.apple.com/documentation/safari-release-notes/safari-17_5-release-notes
Note:
Safari users will experience missing backgrounds and colors due to our
decision not address this behavior. We're forward-facing and planning
for the LTS release. If you intend to use Safari during development,
please ensure you're using at least Safari 17.5 Beta.
We're monitoring the situation closely and will implement a fallback if
Safari hasn't released a compatible version before 13.2.
Resolves: #103705
Releases: main
Change-Id: I9f53e992f4d55efd86420a72a84da9d90b16e490
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/83995
Tested-by: Andreas Kienast <a.fernandez@scripting-base.de>
Reviewed-by: Benjamin Franzke <ben@bnf.dev>
Tested-by: Benjamin Franzke <ben@bnf.dev>
Reviewed-by: Andreas Kienast <a.fernandez@scripting-base.de>
Tested-by: core-ci <typo3@b13.com>
Reviewed-by: Frank Nägler <frank.naegler@typo3.com>
Tested-by: Frank Nägler <frank.naegler@typo3.com>
Tested-by: Benjamin Kott <benjamin.kott@outlook.com>
Reviewed-by: Benjamin Kott <benjamin.kott@outlook.com>
---
.../Sources/Sass/component/_contextmenu.scss | 2 +-
Build/Sources/Sass/component/_dropdown.scss | 1 +
Build/Sources/Sass/component/_example.scss | 2 +-
Build/Sources/Sass/component/_root.scss | 148 ++++--------------
Build/Sources/Sass/component/_table.scss | 1 +
Build/Sources/Sass/component/_tree.scss | 1 -
.../typo3-backend-new-record-wizard.scss | 2 +-
Build/Sources/Sass/libs/_selectpure.scss | 2 +-
.../backend/Resources/Public/Css/backend.css | 22 +--
9 files changed, 46 insertions(+), 135 deletions(-)
diff --git a/Build/Sources/Sass/component/_contextmenu.scss b/Build/Sources/Sass/component/_contextmenu.scss
index 364336b90a2c..824ea7fc19d7 100644
--- a/Build/Sources/Sass/component/_contextmenu.scss
+++ b/Build/Sources/Sass/component/_contextmenu.scss
@@ -2,7 +2,7 @@
// Context Menu
//
.context-menu {
- color-scheme: var(--typo3-component-color-scheme);
+ color-scheme: light dark;
font-size: var(--typo3-component-font-size);
line-height: var(--typo3-component-line-height);
padding: 2px;
diff --git a/Build/Sources/Sass/component/_dropdown.scss b/Build/Sources/Sass/component/_dropdown.scss
index b769f10dfe4c..731690814a77 100644
--- a/Build/Sources/Sass/component/_dropdown.scss
+++ b/Build/Sources/Sass/component/_dropdown.scss
@@ -2,6 +2,7 @@
// Dropdown Adjustments
//
.dropdown-menu {
+ color-scheme: light dark;
text-align: start;
font-size: var(--typo3-component-font-size);
line-height: var(--typo3-component-line-height);
diff --git a/Build/Sources/Sass/component/_example.scss b/Build/Sources/Sass/component/_example.scss
index 5bce7085652f..888a8f8fd9bd 100644
--- a/Build/Sources/Sass/component/_example.scss
+++ b/Build/Sources/Sass/component/_example.scss
@@ -3,7 +3,7 @@
// Code and example rendering
//
.example {
- color-scheme: var(--typo3-component-color-scheme);
+ color-scheme: light dark;
color: var(--typo3-component-color);
background-color: var(--typo3-component-bg);
border: var(--typo3-component-border-width) solid var(--typo3-component-border-color);
diff --git a/Build/Sources/Sass/component/_root.scss b/Build/Sources/Sass/component/_root.scss
index 38aa49809a13..c6effc2fb0a8 100644
--- a/Build/Sources/Sass/component/_root.scss
+++ b/Build/Sources/Sass/component/_root.scss
@@ -2,6 +2,8 @@
// Global CSS Variables
//
:root {
+ color-scheme: light dark;
+
// General
--typo3-font-family-sans-serif: #{$font-family-sans-serif};
--typo3-font-family-monospace: #{$font-family-monospace};
@@ -13,85 +15,36 @@
// Header
--typo3-header-font-family: "Source Sans 3", sans-serif;
- // Light
- --typo3-light-color-scheme: light;
- --typo3-light-color: #{$body-color};
- --typo3-light-primary-color: #{$primary};
- --typo3-light-secondary-color: #{tint-color($body-color, 40%)};
- --typo3-light-match-highlight-color: inherit;
- --typo3-light-match-highlight-bg: rgba(234, 92, 0, .33);
- --typo3-light-bg: #{$white};
- --typo3-light-border-color: #{$gray-300};
- --typo3-light-link-color: #{$primary};
- --typo3-light-link-hover-color: #{tint-color($primary, 10%)};
- --typo3-light-hover-color: var(--typo3-light-color);
- --typo3-light-hover-bg: #{tint-color($primary, 95%)};
- --typo3-light-hover-border-color: #{tint-color($primary, 85%)};
- --typo3-light-focus-color: var(--typo3-light-color);
- --typo3-light-focus-bg: #{tint-color($primary, 95%)};
- --typo3-light-focus-border-color: #{tint-color($primary, 20%)};
- --typo3-light-active-color: #{$white};
- --typo3-light-active-bg: #{tint-color($primary, 20%)};
- --typo3-light-active-border-color: #{tint-color($primary, 20%)};
- --typo3-light-disabled-color: #{$gray-600};
- --typo3-light-disabled-bg: transparent;
- --typo3-light-disabled-border-color: transparent;
-
- // Dark
- --typo3-dark-color-scheme: dark;
- --typo3-dark-color: #{$white};
- --typo3-dark-primary-color: #{tint-color($primary, 40%)};
- --typo3-dark-secondary-color: #{shade-color($white, 40%)};
- --typo3-dark-match-highlight-color: inherit;
- --typo3-dark-match-highlight-bg: rgba(234, 92, 0, .33);
- --typo3-dark-bg: #{$gray-900};
- --typo3-dark-border-color: #{$gray-800};
- --typo3-dark-link-color: #{tint-color($primary, 40%)};
- --typo3-dark-link-hover-color: #{tint-color($primary, 50%)};
- --typo3-dark-hover-color: var(--typo3-dark-color);
- --typo3-dark-hover-bg: #{$gray-800};
- --typo3-dark-hover-border-color: #{$gray-700};
- --typo3-dark-focus-color: var(--typo3-dark-color);
- --typo3-dark-focus-bg: #{shade-color($primary, 50%)};
- --typo3-dark-focus-border-color: #{shade-color($primary, 40%)};
- --typo3-dark-active-color: #{$white};
- --typo3-dark-active-bg: #{shade-color($primary, 15%)};
- --typo3-dark-active-border-color: #{shade-color($primary, 20%)};
- --typo3-dark-disabled-color: #{$gray-600};
- --typo3-dark-disabled-bg: transparent;
- --typo3-dark-disabled-border-color: transparent;
-
// Component
- --typo3-component-color-scheme: var(--typo3-light-color-scheme);
- --typo3-component-color: var(--typo3-light-color);
- --typo3-component-primary-color: var(--typo3-light-primary-color);
- --typo3-component-secondary-color: var(--typo3-light-secondary-color);
- --typo3-component-match-highlight-color: var(--typo3-light-match-highlight-color);
- --typo3-component-match-highlight-bg: var(--typo3-light-match-highlight-bg);
- --typo3-component-bg: var(--typo3-light-bg);
- --typo3-component-link-color: var(--typo3-light-link-color);
- --typo3-component-link-hover-color: var(--typo3-light-link-hover-color);
+ --typo3-component-color: light-dark(#{$body-color}, #{$white});
+ --typo3-component-primary-color: light-dark(#{$primary}, #{tint-color($primary, 40%)});
+ --typo3-component-secondary-color: light-dark(#{tint-color($body-color, 40%)}, #{shade-color($white, 40%)});
+ --typo3-component-match-highlight-color: inherit;
+ --typo3-component-match-highlight-bg: rgba(234, 92, 0, .33);
+ --typo3-component-bg: light-dark(#{$white}, #{$gray-900});
+ --typo3-component-link-color: light-dark(#{$primary}, #{tint-color($primary, 40%)});
+ --typo3-component-link-hover-color: light-dark(#{tint-color($primary, 10%)}, #{tint-color($primary, 50%)});
--typo3-component-font-size: #{$font-size-base};
--typo3-component-line-height: #{$line-height-base};
--typo3-component-border-radius: 4px;
--typo3-component-border-width: 1px;
- --typo3-component-border-color: var(--typo3-light-border-color);
+ --typo3-component-border-color: light-dark(#{$gray-300}, #{$gray-800});
--typo3-component-padding-y: .75rem;
--typo3-component-padding-x: 1rem;
--typo3-component-box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
--typo3-component-box-shadow-strong: 0 2px 4px rgba(0, 0, 0, .5);
- --typo3-component-hover-color: var(--typo3-light-hover-color);
- --typo3-component-hover-bg: var(--typo3-light-hover-bg);
- --typo3-component-hover-border-color: var(--typo3-light-hover-border-color);
- --typo3-component-focus-color: var(--typo3-light-focus-color);
- --typo3-component-focus-bg: var(--typo3-light-focus-bg);
- --typo3-component-focus-border-color: var(--typo3-light-focus-border-color);
- --typo3-component-active-color: var(--typo3-light-active-color);
- --typo3-component-active-bg: var(--typo3-light-active-bg);
- --typo3-component-active-border-color: var(--typo3-light-active-border-color);
- --typo3-component-disabled-color: var(--typo3-light-disabled-color);
- --typo3-component-disabled-bg: var(--typo3-light-disabled-bg);
- --typo3-component-disabled-border-color: var(--typo3-light-disabled-border-color);
+ --typo3-component-hover-color: var(--typo3-component-color);
+ --typo3-component-hover-bg: light-dark(#{tint-color($primary, 95%)}, #{$gray-800});
+ --typo3-component-hover-border-color: light-dark(#{tint-color($primary, 85%)}, #{$gray-700});
+ --typo3-component-focus-color: var(--typo3-component-color);
+ --typo3-component-focus-bg: light-dark(#{tint-color($primary, 95%)}, #{shade-color($primary, 50%)});
+ --typo3-component-focus-border-color: light-dark(#{tint-color($primary, 20%)}, #{shade-color($primary, 40%)});
+ --typo3-component-active-color: #{$white};
+ --typo3-component-active-bg: light-dark(#{tint-color($primary, 20%)}, #{shade-color($primary, 15%)});
+ --typo3-component-active-border-color: light-dark(#{tint-color($primary, 20%)}, #{shade-color($primary, 20%)});
+ --typo3-component-disabled-color: #{$gray-600};
+ --typo3-component-disabled-bg: transparent;
+ --typo3-component-disabled-border-color: transparent;
--typo3-component-spacing: 2rem;
// List
@@ -130,59 +83,16 @@
--typo3-input-disabled-border-color: #{$input-disabled-border-color};
}
-@mixin lightmode {
- --typo3-component-color-scheme: var(--typo3-light-color-scheme);
- --typo3-component-color: var(--typo3-light-color);
- --typo3-component-primary-color: var(--typo3-light-primary-color);
- --typo3-component-match-highlight-color: var(--typo3-light-match-highlight-color);
- --typo3-component-match-highlight-bg: var(--typo3-light-match-highlight-bg);
- --typo3-component-bg: var(--typo3-light-bg);
- --typo3-component-border-color: var(--typo3-light-border-color);
- --typo3-component-link-color: var(--typo3-light-link-color);
- --typo3-component-link-hover-color: var(--typo3-light-link-hover-color);
- --typo3-component-hover-color: var(--typo3-light-hover-color);
- --typo3-component-hover-bg: var(--typo3-light-hover-bg);
- --typo3-component-hover-border-color: var(--typo3-light-hover-border-color);
- --typo3-component-focus-color: var(--typo3-light-focus-color);
- --typo3-component-focus-bg: var(--typo3-light-focus-bg);
- --typo3-component-focus-border-color: var(--typo3-light-focus-border-color);
- --typo3-component-active-color: var(--typo3-light-active-color);
- --typo3-component-active-bg: var(--typo3-light-active-bg);
- --typo3-component-active-border-color: var(--typo3-light-active-border-color);
- --typo3-component-disabled-color: var(--typo3-light-disabled-color);
- --typo3-component-disabled-bg: var(--typo3-light-disabled-bg);
- --typo3-component-disabled-border-color: var(--typo3-light-disabled-border-color);
+[data-color-scheme="auto"] {
+ color-scheme: light dark;
}
-@mixin darkmode {
- --typo3-component-color-scheme: var(--typo3-dark-color-scheme);
- --typo3-component-color: var(--typo3-dark-color);
- --typo3-component-primary-color: var(--typo3-dark-primary-color);
- --typo3-component-secondary-color: var(--typo3-dark-secondary-color);
- --typo3-component-match-highlight-color: var(--typo3-dark-match-highlight-color);
- --typo3-component-match-highlight-bg: var(--typo3-dark-match-highlight-bg);
- --typo3-component-bg: var(--typo3-dark-bg);
- --typo3-component-border-color: var(--typo3-dark-border-color);
- --typo3-component-link-color: var(--typo3-dark-link-color);
- --typo3-component-link-hover-color: var(--typo3-dark-link-hover-color);
- --typo3-component-hover-color: var(--typo3-dark-hover-color);
- --typo3-component-hover-bg: var(--typo3-dark-hover-bg);
- --typo3-component-hover-border-color: var(--typo3-dark-hover-border-color);
- --typo3-component-focus-color: var(--typo3-dark-focus-color);
- --typo3-component-focus-bg: var(--typo3-dark-focus-bg);
- --typo3-component-focus-border-color: var(--typo3-dark-focus-border-color);
- --typo3-component-active-color: var(--typo3-dark-active-color);
- --typo3-component-active-bg: var(--typo3-dark-active-bg);
- --typo3-component-active-border-color: var(--typo3-dark-active-border-color);
- --typo3-component-disabled-color: var(--typo3-dark-disabled-color);
- --typo3-component-disabled-bg: var(--typo3-dark-disabled-bg);
- --typo3-component-disabled-border-color: var(--typo3-dark-disabled-border-color);
+[data-color-scheme="dark"] {
+ color-scheme: only dark;
}
-@media (prefers-color-scheme: dark) {
- :root {
- @include darkmode;
- }
+[data-color-scheme="light"] {
+ color-scheme: only light;
}
//
diff --git a/Build/Sources/Sass/component/_table.scss b/Build/Sources/Sass/component/_table.scss
index 7049e21b3baf..18eab5ce2cb7 100644
--- a/Build/Sources/Sass/component/_table.scss
+++ b/Build/Sources/Sass/component/_table.scss
@@ -210,6 +210,7 @@ td.selected {
// Fits the table in the viewport and makes overflow possible
//
.table-fit {
+ color-scheme: only light;
width: 100%;
border-radius: var(--typo3-component-border-radius);
box-shadow: var(--typo3-component-box-shadow);
diff --git a/Build/Sources/Sass/component/_tree.scss b/Build/Sources/Sass/component/_tree.scss
index e88c5bfd21d3..d3b51a407c8e 100644
--- a/Build/Sources/Sass/component/_tree.scss
+++ b/Build/Sources/Sass/component/_tree.scss
@@ -35,7 +35,6 @@
.nodes-container {
color: var(--tree-color);
background: var(--tree-bg);
- color-scheme: var(--typo3-component-color-scheme);
position: relative;
height: 100%;
width: 100%;
diff --git a/Build/Sources/Sass/element/typo3-backend-new-record-wizard.scss b/Build/Sources/Sass/element/typo3-backend-new-record-wizard.scss
index 251fc255f0e1..9fc52ffc4609 100644
--- a/Build/Sources/Sass/element/typo3-backend-new-record-wizard.scss
+++ b/Build/Sources/Sass/element/typo3-backend-new-record-wizard.scss
@@ -3,5 +3,5 @@
// typo3-backend-new-record-wizard
//
typo3-backend-new-record-wizard {
- @include lightmode;
+ color-scheme: only light;
}
diff --git a/Build/Sources/Sass/libs/_selectpure.scss b/Build/Sources/Sass/libs/_selectpure.scss
index 239f2ebe71c1..6b05c22a6fc0 100644
--- a/Build/Sources/Sass/libs/_selectpure.scss
+++ b/Build/Sources/Sass/libs/_selectpure.scss
@@ -25,6 +25,6 @@ select-pure {
position: relative;
flex: 1 1 auto;
// @todo: Remove once bootstrap's input-group is dark-mode capable
- @include lightmode;
+ color-scheme: only light;
}
}
diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
index 4bbfa16d4af5..1557de04691f 100644
--- a/typo3/sysext/backend/Resources/Public/Css/backend.css
+++ b/typo3/sysext/backend/Resources/Public/Css/backend.css
@@ -2790,10 +2790,10 @@ button[aria-expanded=true]:not(:disabled) .modulemenu-indicator:after{transform:
.scaffold-modulemenu-expanded .modulemenu-action{margin-inline-start:0;width:100%}
.scaffold-modulemenu-expanded .modulemenu-indicator{display:block!important}
.scaffold-modulemenu-expanded .modulemenu-name{position:static;margin:0;margin-inline-start:1em;width:auto;height:auto}
-:root{--typo3-font-family-sans-serif:Verdana,Arial,Helvetica,sans-serif;--typo3-font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;--typo3-font-family:var(--typo3-font-family-sans-serif);--typo3-font-family-code:var(--typo3-font-family-monospace);--typo3-spacing:1rem;--typo3-color-scheme:auto;--typo3-header-font-family:"Source Sans 3",sans-serif;--typo3-light-color-scheme:light;--typo3-light-color:#000;--typo3-light-primary-color:#0078e6;--typo3-light-secondary-color:#666666;--typo3-light-match-highlight-color:inherit;--typo3-light-match-highlight-bg:rgba(234, 92, 0, .33);--typo3-light-bg:#fff;--typo3-light-border-color:rgb(215, 215, 215);--typo3-light-link-color:#0078e6;--typo3-light-link-hover-color:#1a86e9;--typo3-light-hover-color:var(--typo3-light-color);--typo3-light-hover-bg:#f2f8fe;--typo3-light-hover-border-color:#d9ebfb;--typo3-light-focus-color:var(--typo3-light-color);--typo3-light-focus-bg:#f2f8fe;--typo3-light-focus-border-color:#3393eb;--typo3-light-active-color:#fff;--typo3-light-active-bg:#3393eb;--typo3-light-active-border-color:#3393eb;--typo3-light-disabled-color:rgb(115, 115, 115);--typo3-light-disabled-bg:transparent;--typo3-light-disabled-border-color:transparent;--typo3-dark-color-scheme:dark;--typo3-dark-color:#fff;--typo3-dark-primary-color:#66aef0;--typo3-dark-secondary-color:#999999;--typo3-dark-match-highlight-color:inherit;--typo3-dark-match-highlight-bg:rgba(234, 92, 0, .33);--typo3-dark-bg:rgb(30, 30, 30);--typo3-dark-border-color:rgb(51, 51, 51);--typo3-dark-link-color:#66aef0;--typo3-dark-link-hover-color:#80bcf3;--typo3-dark-hover-color:var(--typo3-dark-color);--typo3-dark-hover-bg:rgb(51, 51, 51);--typo3-dark-hover-border-color:rgb(90, 90, 90);--typo3-dark-focus-color:var(--typo3-dark-color);--typo3-dark-focus-bg:#003c73;--typo3-dark-focus-border-color:#00488a;--typo3-dark-active-color:#fff;--typo3-dark-active-bg:#0066c4;--typo3-dark-active-border-color:#0060b8;--typo3-dark-disabled-color:rgb(115, 115, 115);--typo3-dark-disabled-bg:transparent;--typo3-dark-disabled-border-color:transparent;--typo3-component-color-scheme:var(--typo3-light-color-scheme);--typo3-component-color:var(--typo3-light-color);--typo3-component-primary-color:var(--typo3-light-primary-color);--typo3-component-secondary-color:var(--typo3-light-secondary-color);--typo3-component-match-highlight-color:var(--typo3-light-match-highlight-color);--typo3-component-match-highlight-bg:var(--typo3-light-match-highlight-bg);--typo3-component-bg:var(--typo3-light-bg);--typo3-component-link-color:var(--typo3-light-link-color);--typo3-component-link-hover-color:var(--typo3-light-link-hover-color);--typo3-component-font-size:12px;--typo3-component-line-height:1.5;--typo3-component-border-radius:4px;--typo3-component-border-width:1px;--typo3-component-border-color:var(--typo3-light-border-color);--typo3-component-padding-y:.75rem;--typo3-component-padding-x:1rem;--typo3-component-box-shadow:0 1px 2px rgba(0, 0, 0, .25);--typo3-component-box-shadow-strong:0 2px 4px rgba(0, 0, 0, .5);--typo3-component-hover-color:var(--typo3-light-hover-color);--typo3-component-hover-bg:var(--typo3-light-hover-bg);--typo3-component-hover-border-color:var(--typo3-light-hover-border-color);--typo3-component-focus-color:var(--typo3-light-focus-color);--typo3-component-focus-bg:var(--typo3-light-focus-bg);--typo3-component-focus-border-color:var(--typo3-light-focus-border-color);--typo3-component-active-color:var(--typo3-light-active-color);--typo3-component-active-bg:var(--typo3-light-active-bg);--typo3-component-active-border-color:var(--typo3-light-active-border-color);--typo3-component-disabled-color:var(--typo3-light-disabled-color);--typo3-component-disabled-bg:var(--typo3-light-disabled-bg);--typo3-component-disabled-border-color:var(--typo3-light-disabled-border-color);--typo3-component-spacing:2rem;--typo3-list-item-padding-y:.5rem;--typo3-list-item-padding-x:.75rem;--typo3-list-item-hover-color:var(--typo3-component-hover-color);--typo3-list-item-hover-bg:var(--typo3-component-hover-bg);--typo3-list-item-hover-border-color:var(--typo3-component-hover-border-color);--typo3-list-item-focus-color:var(--typo3-component-focus-color);--typo3-list-item-focus-bg:var(--typo3-component-focus-bg);--typo3-list-item-focus-border-color:var(--typo3-component-focus-border-color);--typo3-list-item-active-color:var(--typo3-list-item-focus-color);--typo3-list-item-active-bg:var(--typo3-list-item-focus-bg);--typo3-list-item-active-border-color:var(--typo3-list-item-focus-border-color);--typo3-list-item-disabled-color:var(--typo3-component-disabled-color);--typo3-list-item-disabled-bg:var(--typo3-component-disabled-bg);--typo3-list-item-disabled-border-color:var(--typo3-component-disabled-border-color);--typo3-legend-font-weight:600;--typo3-input-color:#333;--typo3-input-color-placeholder:rgb(187, 187, 187);--typo3-input-bg:#fefefe;--typo3-input-border-width:var(--bs-border-width);--typo3-input-border-color:rgb(187, 187, 187);--typo3-input-border-radius:0.125rem;--typo3-input-box-shadow:var(--bs-box-shadow-inset);--typo3-input-focus-color:#333;--typo3-input-focus-bg:#fefefe;--typo3-input-focus-border-color:#80bcf3;--typo3-input-focus-box-shadow:0 0 0 0.25rem rgba(0, 120, 230, 0.25);--typo3-input-disabled-bg:var(--bs-secondary-bg)}
-@media (prefers-color-scheme:dark){
-:root{--typo3-component-color-scheme:var(--typo3-dark-color-scheme);--typo3-component-color:var(--typo3-dark-color);--typo3-component-primary-color:var(--typo3-dark-primary-color);--typo3-component-secondary-color:var(--typo3-dark-secondary-color);--typo3-component-match-highlight-color:var(--typo3-dark-match-highlight-color);--typo3-component-match-highlight-bg:var(--typo3-dark-match-highlight-bg);--typo3-component-bg:var(--typo3-dark-bg);--typo3-component-border-color:var(--typo3-dark-border-color);--typo3-component-link-color:var(--typo3-dark-link-color);--typo3-component-link-hover-color:var(--typo3-dark-link-hover-color);--typo3-component-hover-color:var(--typo3-dark-hover-color);--typo3-component-hover-bg:var(--typo3-dark-hover-bg);--typo3-component-hover-border-color:var(--typo3-dark-hover-border-color);--typo3-component-focus-color:var(--typo3-dark-focus-color);--typo3-component-focus-bg:var(--typo3-dark-focus-bg);--typo3-component-focus-border-color:var(--typo3-dark-focus-border-color);--typo3-component-active-color:var(--typo3-dark-active-color);--typo3-component-active-bg:var(--typo3-dark-active-bg);--typo3-component-active-border-color:var(--typo3-dark-active-border-color);--typo3-component-disabled-color:var(--typo3-dark-disabled-color);--typo3-component-disabled-bg:var(--typo3-dark-disabled-bg);--typo3-component-disabled-border-color:var(--typo3-dark-disabled-border-color)}
-}
+:root{color-scheme:light dark;--typo3-font-family-sans-serif:Verdana,Arial,Helvetica,sans-serif;--typo3-font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;--typo3-font-family:var(--typo3-font-family-sans-serif);--typo3-font-family-code:var(--typo3-font-family-monospace);--typo3-spacing:1rem;--typo3-color-scheme:auto;--typo3-header-font-family:"Source Sans 3",sans-serif;--typo3-component-color:light-dark(#000, #fff);--typo3-component-primary-color:light-dark(#0078e6, #66aef0);--typo3-component-secondary-color:light-dark(#666666, #999999);--typo3-component-match-highlight-color:inherit;--typo3-component-match-highlight-bg:rgba(234, 92, 0, .33);--typo3-component-bg:light-dark(#fff, rgb(30, 30, 30));--typo3-component-link-color:light-dark(#0078e6, #66aef0);--typo3-component-link-hover-color:light-dark(#1a86e9, #80bcf3);--typo3-component-font-size:12px;--typo3-component-line-height:1.5;--typo3-component-border-radius:4px;--typo3-component-border-width:1px;--typo3-component-border-color:light-dark(rgb(215, 215, 215), rgb(51, 51, 51));--typo3-component-padding-y:.75rem;--typo3-component-padding-x:1rem;--typo3-component-box-shadow:0 1px 2px rgba(0, 0, 0, .25);--typo3-component-box-shadow-strong:0 2px 4px rgba(0, 0, 0, .5);--typo3-component-hover-color:var(--typo3-component-color);--typo3-component-hover-bg:light-dark(#f2f8fe, rgb(51, 51, 51));--typo3-component-hover-border-color:light-dark(#d9ebfb, rgb(90, 90, 90));--typo3-component-focus-color:var(--typo3-component-color);--typo3-component-focus-bg:light-dark(#f2f8fe, #003c73);--typo3-component-focus-border-color:light-dark(#3393eb, #00488a);--typo3-component-active-color:#fff;--typo3-component-active-bg:light-dark(#3393eb, #0066c4);--typo3-component-active-border-color:light-dark(#3393eb, #0060b8);--typo3-component-disabled-color:rgb(115, 115, 115);--typo3-component-disabled-bg:transparent;--typo3-component-disabled-border-color:transparent;--typo3-component-spacing:2rem;--typo3-list-item-padding-y:.5rem;--typo3-list-item-padding-x:.75rem;--typo3-list-item-hover-color:var(--typo3-component-hover-color);--typo3-list-item-hover-bg:var(--typo3-component-hover-bg);--typo3-list-item-hover-border-color:var(--typo3-component-hover-border-color);--typo3-list-item-focus-color:var(--typo3-component-focus-color);--typo3-list-item-focus-bg:var(--typo3-component-focus-bg);--typo3-list-item-focus-border-color:var(--typo3-component-focus-border-color);--typo3-list-item-active-color:var(--typo3-list-item-focus-color);--typo3-list-item-active-bg:var(--typo3-list-item-focus-bg);--typo3-list-item-active-border-color:var(--typo3-list-item-focus-border-color);--typo3-list-item-disabled-color:var(--typo3-component-disabled-color);--typo3-list-item-disabled-bg:var(--typo3-component-disabled-bg);--typo3-list-item-disabled-border-color:var(--typo3-component-disabled-border-color);--typo3-legend-font-weight:600;--typo3-input-color:#333;--typo3-input-color-placeholder:rgb(187, 187, 187);--typo3-input-bg:#fefefe;--typo3-input-border-width:var(--bs-border-width);--typo3-input-border-color:rgb(187, 187, 187);--typo3-input-border-radius:0.125rem;--typo3-input-box-shadow:var(--bs-box-shadow-inset);--typo3-input-focus-color:#333;--typo3-input-focus-bg:#fefefe;--typo3-input-focus-border-color:#80bcf3;--typo3-input-focus-box-shadow:0 0 0 0.25rem rgba(0, 120, 230, 0.25);--typo3-input-disabled-bg:var(--bs-secondary-bg)}
+[data-color-scheme=auto]{color-scheme:light dark}
+[data-color-scheme=dark]{color-scheme:only dark}
+[data-color-scheme=light]{color-scheme:only light}
:root{--typo3-position-modifier:1;--typo3-position-start:left;--typo3-position-end:right}
[dir=rtl]{--typo3-position-modifier:-1;--typo3-position-start:right;--typo3-position-end:left}
.dropdown-menu{--bs-secondary-color:var(--typo3-component-secondary-color)}
@@ -2875,7 +2875,7 @@ code,pre{-webkit-hyphens:none;hyphens:none}
code[class*=language-],pre[class*=language-]{color:inherit;background:0 0;font-size:1em;text-align:start;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}
pre[class*=language-]{border-radius:4px;padding:1em;overflow:auto;margin-bottom:var(--typo3-spacing)}
:not(pre)>code[class*=language-],pre[class*=language-]{background-color:rgba(0,0,0,.05)}
-.dropdown-menu{text-align:start;font-size:var(--typo3-component-font-size);line-height:var(--typo3-component-line-height);max-width:calc(100vw - 20px)}
+.dropdown-menu{color-scheme:light dark;text-align:start;font-size:var(--typo3-component-font-size);line-height:var(--typo3-component-line-height);max-width:calc(100vw - 20px)}
.dropdown-menu a:not([class]){color:var(--typo3-component-link-color)}
.dropdown-menu a:not([class]):hover{color:var(--typo3-component-link-hover-color)}
ul.dropdown-list li+li,ul.dropdown-menu li+li{margin-top:1px}
@@ -3129,7 +3129,7 @@ a.dropdown-toggle{text-decoration:none}
.simpletable td:last-child,.simpletable th:last-child{padding-inline-end:0}
.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-left:unset;margin-inline-start:calc(var(--bs-border-width) * -1)}
select-pure{--select-height:43.2px;--select-width:100%;--border-radius:calc(var(--typo3-component-border-radius) - var(--typo3-component-border-width));--border-width:var(--typo3-component-border-width);--border-color:var(--typo3-component-border-color);--padding:var(--typo3-list-item-padding-y) var(--typo3-list-item-padding-x);--dropdown-z-index:2;--disabled-background-color:var(--typo3-component-disabled-bg);--disabled-color:var(--typo3-component-disabled-color);--background-color:var(--typo3-component-bg);--color:var(--typo3-component-color);--hover-background-color:var(--typo3-component-hover-bg);--hover-color:var(--typo3-component-hover-color);--selected-background-color:var(--typo3-component-active-bg);--selected-color:var(--typo3-component-active-color);--dropdown-gap:2px;--font-size:var(--typo3-component-font-size);--font-family:inherit;--font-weight:400;--select-outline:1px solid var(--typo3-input-focus-border-color);--dropdown-items:4}
-.input-group>select-pure{position:relative;flex:1 1 auto;--typo3-component-color-scheme:var(--typo3-light-color-scheme);--typo3-component-color:var(--typo3-light-color);--typo3-component-primary-color:var(--typo3-light-primary-color);--typo3-component-match-highlight-color:var(--typo3-light-match-highlight-color);--typo3-component-match-highlight-bg:var(--typo3-light-match-highlight-bg);--typo3-component-bg:var(--typo3-light-bg);--typo3-component-border-color:var(--typo3-light-border-color);--typo3-component-link-color:var(--typo3-light-link-color);--typo3-component-link-hover-color:var(--typo3-light-link-hover-color);--typo3-component-hover-color:var(--typo3-light-hover-color);--typo3-component-hover-bg:var(--typo3-light-hover-bg);--typo3-component-hover-border-color:var(--typo3-light-hover-border-color);--typo3-component-focus-color:var(--typo3-light-focus-color);--typo3-component-focus-bg:var(--typo3-light-focus-bg);--typo3-component-focus-border-color:var(--typo3-light-focus-border-color);--typo3-component-active-color:var(--typo3-light-active-color);--typo3-component-active-bg:var(--typo3-light-active-bg);--typo3-component-active-border-color:var(--typo3-light-active-border-color);--typo3-component-disabled-color:var(--typo3-light-disabled-color);--typo3-component-disabled-bg:var(--typo3-light-disabled-bg);--typo3-component-disabled-border-color:var(--typo3-light-disabled-border-color)}
+.input-group>select-pure{position:relative;flex:1 1 auto;color-scheme:only light}
.cropper-container{position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
.cropper-container img{display:block;image-orientation:0deg!important;height:100%;width:100%;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important}
.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal{position:absolute;top:0;right:0;bottom:0;left:0}
@@ -3342,7 +3342,7 @@ to{opacity:1;transform:translate3d(0,0,0)}
.shortcut-buttons-flatpickr-button:focus{color:var(--typo3-component-focus-color);background:var(--typo3-component-focus-bg);outline:1px solid var(--typo3-component-focus-border-color);outline-offset:-1px}
:root{--tree-color:var(--typo3-component-color);--tree-bg:var(--typo3-component-bg);--tree-node-color:var(--tree-color);--tree-node-bg:var(--tree-bg);--tree-node-border-color:transparent;--tree-node-focus-color:var(--typo3-component-focus-color);--tree-node-focus-bg:var(--typo3-component-focus-bg);--tree-node-focus-border-color:var(--typo3-component-focus-border-color);--tree-node-hover-color:var(--typo3-component-hover-color);--tree-node-hover-bg:var(--typo3-component-hover-bg);--tree-node-hover-border-color:var(--typo3-component-hover-border-color);--tree-node-selected-color:var(--typo3-component-active-color);--tree-node-selected-bg:var(--typo3-component-active-bg);--tree-node-selected-border-color:var(--typo3-component-active-border-color);--tree-node-version-bg:rgba(247, 200, 152, 0.5);--tree-info-bg:#c5ddf3;--tree-info-color:#000;--tree-drop-position-bg:var(--typo3-component-primary-color);--tree-drag-dropzone-delete-color:#fff;--tree-drag-dropzone-delete-bg:#c83c3c;--tree-drag-dropindicator-color:#3393eb}
.tree{position:relative}
-.nodes-container{color:var(--tree-color);background:var(--tree-bg);color-scheme:var(--typo3-component-color-scheme);position:relative;height:100%;width:100%}
+.nodes-container{color:var(--tree-color);background:var(--tree-bg);position:relative;height:100%;width:100%}
.nodes-loader{position:absolute;width:100%;height:100%;top:0;inset-inline-start:0;color:var(--tree-color);background:var(--tree-bg);z-index:3000}
.nodes-loader-inner{height:100%;width:100%;display:flex;align-items:center;justify-content:center}
.nodes-root{background-color:inherit;display:block;position:absolute;top:0;inset-inline-start:0;height:100%;width:100%;overflow-y:auto}
@@ -3487,7 +3487,7 @@ typo3-backend-form-selecttree-toolbar{display:block;border-bottom:1px solid rgba
.table-transparent{--bs-table-bg:transparent}
.table-vertical-top td,.table-vertical-top th{vertical-align:top!important}
.table-center td,.table-center th{text-align:center!important}
-.table-fit{width:100%;border-radius:var(--typo3-component-border-radius);box-shadow:var(--typo3-component-box-shadow);margin-bottom:var(--typo3-spacing);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;border:1px solid #ccc}
+.table-fit{color-scheme:only light;width:100%;border-radius:var(--typo3-component-border-radius);box-shadow:var(--typo3-component-box-shadow);margin-bottom:var(--typo3-spacing);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;border:1px solid #ccc}
.table-fit .table-bordered>:not(caption)>*{border-width:0}
.table-fit .table-bordered>:not(caption)>*>*{border-top:0;border-width:var(--bs-border-width)}
.table-fit caption{border-top:var(--bs-border-width) solid #ccc;padding-left:var(--typo3-component-padding-x);padding-right:var(--typo3-component-padding-x)}
@@ -3687,7 +3687,7 @@ a.card:hover{--typo3-card-border-color:var(--typo3-card-hover-border-color);text
.form-wizard-icon-list-item a.active,.form-wizard-icon-list-item a:active{color:var(--typo3-list-item-active-color);background-color:var(--typo3-list-item-active-bg);outline:1px solid var(--typo3-list-item-active-border-color)}
.form-wizard-icon-list-item a,.form-wizard-icon-list-item a>span[title]{display:block;line-height:1}
.form-wizard-icon-list-item img{display:block;min-width:16px;max-width:128px;max-height:128px}
-.context-menu{color-scheme:var(--typo3-component-color-scheme);font-size:var(--typo3-component-font-size);line-height:var(--typo3-component-line-height);padding:2px;position:absolute;z-index:1000;color:var(--typo3-component-color);border:var(--typo3-component-border-width) solid var(--typo3-component-border-color);background-color:var(--typo3-component-bg);box-shadow:var(--typo3-component-box-shadow-strong);border-radius:var(--typo3-component-border-radius);max-height:calc(100% - 20px);max-width:calc(100% - 20px);margin:0;overflow-y:auto;top:0;inset-inline-start:0}
+.context-menu{color-scheme:light dark;font-size:var(--typo3-component-font-size);line-height:var(--typo3-component-line-height);padding:2px;position:absolute;z-index:1000;color:var(--typo3-component-color);border:var(--typo3-component-border-width) solid var(--typo3-component-border-color);background-color:var(--typo3-component-bg);box-shadow:var(--typo3-component-box-shadow-strong);border-radius:var(--typo3-component-border-radius);max-height:calc(100% - 20px);max-width:calc(100% - 20px);margin:0;overflow-y:auto;top:0;inset-inline-start:0}
.context-menu-group{position:relative;display:flex;flex-direction:column;gap:1px;list-style:none;padding:0;margin:0;min-width:150px}
.context-menu-divider{padding:0;height:0;margin-top:var(--typo3-list-item-padding-y);margin-bottom:var(--typo3-list-item-padding-y);border-top:var(--typo3-component-border-width) solid var(--typo3-component-border-color)!important;outline:0}
.context-menu-item{position:relative;display:flex;border-radius:calc(var(--typo3-component-border-radius) - var(--typo3-component-border-width));gap:.5em;padding:var(--typo3-list-item-padding-y) var(--typo3-list-item-padding-x);cursor:pointer;text-decoration:none}
@@ -3816,7 +3816,7 @@ typo3-backend-live-search-result-item-action>* .livesearch-result-item-title .sm
.indent{--indent-base:16px;--indent-level:0;margin-inline-start:calc(var(--indent-base) * var(--indent-level))}
.indent-inline-block{display:inline-block}
.pagination{flex-wrap:wrap;row-gap:4px}
-.example{color-scheme:var(--typo3-component-color-scheme);color:var(--typo3-component-color);background-color:var(--typo3-component-bg);border:var(--typo3-component-border-width) solid var(--typo3-component-border-color);border-radius:var(--typo3-component-border-radius);padding:var(--typo3-spacing);margin-bottom:var(--typo3-spacing)}
+.example{color-scheme:light dark;color:var(--typo3-component-color);background-color:var(--typo3-component-bg);border:var(--typo3-component-border-width) solid var(--typo3-component-border-color);border-radius:var(--typo3-component-border-radius);padding:var(--typo3-spacing);margin-bottom:var(--typo3-spacing)}
.example+:not(.example){margin-top:var(--typo3-component-spacing)}
.example>:last-child{margin-bottom:0}
.example:before{content:"EXAMPLE";display:block;font-weight:700;font-size:.9em;margin-bottom:var(--typo3-spacing)}
@@ -3839,7 +3839,7 @@ typo3-backend-draggable-resizable #t3js-cropper-focus-area{width:100%;height:100
typo3-backend-draggable-resizable .ui-resizable-handle{z-index:90}
typo3-backend-editable-page-title{display:block;white-space:nowrap;text-overflow:ellipsis}
typo3-backend-formengine-char-counter{inset-inline-start:0;position:absolute;top:100%;display:flex}
-typo3-backend-new-record-wizard{--typo3-component-color-scheme:var(--typo3-light-color-scheme);--typo3-component-color:var(--typo3-light-color);--typo3-component-primary-color:var(--typo3-light-primary-color);--typo3-component-match-highlight-color:var(--typo3-light-match-highlight-color);--typo3-component-match-highlight-bg:var(--typo3-light-match-highlight-bg);--typo3-component-bg:var(--typo3-light-bg);--typo3-component-border-color:var(--typo3-light-border-color);--typo3-component-link-color:var(--typo3-light-link-color);--typo3-component-link-hover-color:var(--typo3-light-link-hover-color);--typo3-component-hover-color:var(--typo3-light-hover-color);--typo3-component-hover-bg:var(--typo3-light-hover-bg);--typo3-component-hover-border-color:var(--typo3-light-hover-border-color);--typo3-component-focus-color:var(--typo3-light-focus-color);--typo3-component-focus-bg:var(--typo3-light-focus-bg);--typo3-component-focus-border-color:var(--typo3-light-focus-border-color);--typo3-component-active-color:var(--typo3-light-active-color);--typo3-component-active-bg:var(--typo3-light-active-bg);--typo3-component-active-border-color:var(--typo3-light-active-border-color);--typo3-component-disabled-color:var(--typo3-light-disabled-color);--typo3-component-disabled-bg:var(--typo3-light-disabled-bg);--typo3-component-disabled-border-color:var(--typo3-light-disabled-border-color)}
+typo3-backend-new-record-wizard{color-scheme:only light}
typo3-backend-security-csp-reports .infolist-container{container-type:inline-size}
typo3-backend-security-csp-reports .infolist{display:flex;gap:var(--typo3-spacing);flex-direction:column}
typo3-backend-security-csp-reports .infolist-info{display:none}
--
GitLab