fix(NcModal): Set color theme for modal header to dark

Signed-off-by: Ferdinand Thiessen <[email protected]>

.reuse/dep5

@@ -7,7 +7,7 @@ Files: package.json package-lock.json .github/pull_request_template.md
 Copyright: Nextcloud GmbH and Nextcloud contributors
 License: AGPL-3.0-or-later
 
-Files: styleguide/assets/icons.css styleguide/assets/server.css cypress/snapshots/* tests/unit/functions/usernameToColor/__snapshots__/usernameToColor.spec.js.snap
+Files: styleguide/assets/dark.css styleguide/assets/icons.css styleguide/assets/server.css cypress/snapshots/* tests/unit/functions/usernameToColor/__snapshots__/usernameToColor.spec.js.snap
 Copyright: Nextcloud GmbH and Nextcloud contributors
 License: AGPL-3.0-or-later
 

src/components/NcModal/NcModal.vue

@@ -200,7 +200,7 @@ export default {
 			tabindex="-1">
 			<!-- Header -->
 			<transition name="fade-visibility" appear>
-				<div class="modal-header">
+				<div class="modal-header" data-theme-dark>
 					<h2 v-if="name.trim() !== ''"
 						:id="'modal-name-' + randId"
 						class="modal-header__name">
@@ -834,7 +834,6 @@ export default {
 		transition: padding ease 100ms;
 		white-space: nowrap;
 		text-overflow: ellipsis;
-		color: #fff; // Always rendered on dark background
 		font-size: $icon-size;
 		margin-block: 0;
 	}
@@ -907,25 +906,9 @@ export default {
 
 		// The modal ignores the color theme and adds a black backdrop
 		// so we need to add custom color of the actions toggle
-		.header-actions {
-			--open-background-color: #3e3e3e;
-			color: #fff;
-
-			:deep(button) {
-				// force white instead of default main text
-				color: #fff;
-
-				&:hover, &:active {
-					// Also fix the hover color
-					background-color: var(--open-background-color) !important;
-				}
-
-				// Fix the focus visible color
-				&:focus-visible {
-					box-shadow: none !important;
-					outline: 2px solid #fff !important;
-				}
-			}
+		.header-actions :deep(button:focus-visible) {
+			box-shadow: none !important;
+			outline: 2px solid #fff !important;
 		}
 
 		// Force the Actions menu icon to be the same size as other icons

styleguide/assets/additional.css

@@ -4,6 +4,7 @@
  */
 @import 'default.css';
 @import 'server.css';
+@import 'dark.css';
 
 div[data-preview] * {
 	box-sizing: border-box;

styleguide/assets/dark.css

@@ -0,0 +1,89 @@
+[data-theme-dark] {
+	--color-main-background:#171717;
+	--color-main-background-rgb:23,23,23;
+	--color-main-background-translucent:rgba(var(--color-main-background-rgb), .97);
+	--color-main-background-blur:rgba(var(--color-main-background-rgb), .85);
+	--filter-background-blur:blur(25px);
+	--gradient-main-background:var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
+	--color-background-hover:#212121;
+	--color-background-dark:#292929;
+	--color-background-darker:#3b3b3b;
+	--color-placeholder-light:#313131;
+	--color-placeholder-dark:#4a4a4a;
+	--color-main-text:#EBEBEB;
+	--color-text-maxcontrast:#999999;
+	--color-text-maxcontrast-default:#999999;
+	--color-text-maxcontrast-background-blur:#a8a8a8;
+	--color-text-light:var(--color-main-text);
+	--color-text-lighter:var(--color-text-maxcontrast);
+	--color-scrollbar:#3d3d3d;
+	--color-error:#FF3333;
+	--color-error-rgb:255,51,51;
+	--color-error-hover:#ff6666;
+	--color-error-text:#ff8080;
+	--color-warning:#FFCC00;
+	--color-warning-rgb:255,204,0;
+	--color-warning-hover:#ffd633;
+	--color-warning-text:#FFCC00;
+	--color-success:#3B973B;
+	--color-success-rgb:59,151,59;
+	--color-success-hover:#4cb94c;
+	--color-success-text:#5ec05e;
+	--color-info:#00AEFF;
+	--color-info-rgb:0,174,255;
+	--color-info-hover:#33beff;
+	--color-info-text:#00AEFF;
+	--color-favorite:#ffde00;
+	--color-loading-light:#777;
+	--color-loading-dark:#CCC;
+	--color-box-shadow-rgb:0,0,0;
+	--color-box-shadow:#000000;
+	--color-border:#292929;
+	--color-border-dark:#3b3b3b;
+	--color-border-maxcontrast:#7d7d7d;
+	--font-face:system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Ubuntu, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+	--default-font-size:15px;
+	--animation-quick:100ms;
+	--animation-slow:300ms;
+	--border-width-input:1px;
+	--border-width-input-focused:2px;
+	--border-radius:3px;
+	--border-radius-large:10px;
+	--border-radius-rounded:28px;
+	--border-radius-element:10px;
+	--border-radius-pill:100px;
+	--default-clickable-area:44px;
+	--default-line-height:24px;
+	--default-grid-baseline:4px;
+	--header-height:50px;
+	--navigation-width:300px;
+	--sidebar-min-width:300px;
+	--sidebar-max-width:500px;
+	--list-min-width:200px;
+	--list-max-width:300px;
+	--header-menu-item-height:44px;
+	--header-menu-profile-item-height:66px;
+	--breakpoint-mobile:1024px;
+	--background-invert-if-dark:invert(100%);
+	--background-invert-if-bright:no;
+	--background-image-invert-if-bright:no;
+	--primary-invert-if-bright:invert(100%);
+	--primary-invert-if-dark:no;
+	--color-primary:#00679e;
+	--color-primary-text:#ffffff;
+	--color-primary-hover:#045783;
+	--color-primary-light:#14232c;
+	--color-primary-light-text:#99c2d8;
+	--color-primary-light-hover:#1e2d35;
+	--color-primary-element:#0091f2;
+	--color-primary-element-hover:#079cff;
+	--color-primary-element-text:#000000;
+	--color-primary-element-text-dark:#0a0a0a;
+	--color-primary-element-light:#14232c;
+	--color-primary-element-light-hover:#1e2d35;
+	--color-primary-element-light-text:#99d3f9;
+	--gradient-primary-background:linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
+	--color-background-plain:#00679e;
+	--color-background-plain-text:#ffffff;
+	--image-background: url('./img/background/kamil-porembinski-clouds.jpg');
+}