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

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

.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');
+}