Feature/refactor dark theme css selector (#3662)

* Refactor dark theme CSS selector * Update changelog
8 months ago · 9246a73f41
parent d1276dc1a7
commit 9246a73f41
42 changed files with 44 additions and 43 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ### Changed

+- Refactored the dark theme CSS selector
 - Improved the language localization for German (`de`)

 ### Fixed
--- a/apps/client/src/app/app.component.scss
+++ b/apps/client/src/app/app.component.scss
@ -46,7 +46,7 @@
  }
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  footer {
    background-color: rgba(var(--palette-foreground-text-dark), 0.05);
  }
--- a/apps/client/src/app/app.component.ts
+++ b/apps/client/src/app/app.component.ts
@ -296,9 +296,9 @@ export class AppComponent implements OnDestroy, OnInit {
    );

    if (isDarkTheme) {
-      this.document.body.classList.add('is-dark-theme');
+      this.document.body.classList.add('theme-dark');
    } else {
-      this.document.body.classList.remove('is-dark-theme');
+      this.document.body.classList.remove('theme-dark');
    }

    this.document
--- a/apps/client/src/app/components/header/header.component.scss
+++ b/apps/client/src/app/components/header/header.component.scss
@ -50,7 +50,7 @@
  }
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  .mat-toolbar {
    background-color: var(--dark-background);

--- a/apps/client/src/app/components/rule/rule.component.scss
+++ b/apps/client/src/app/components/rule/rule.component.scss
@ -20,7 +20,7 @@
  }
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  .icon-container {
    background-color: rgba(var(--light-primary-text), 0.05);
  }
--- a/apps/client/src/app/components/toggle/toggle.component.scss
+++ b/apps/client/src/app/components/toggle/toggle.component.scss
@ -25,7 +25,7 @@
  }
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  .mat-mdc-radio-button {
    &.mat-mdc-radio-checked {
      background-color: rgba(var(--light-dividers));
--- a/apps/client/src/app/components/user-account-access/user-account-access.scss
+++ b/apps/client/src/app/components/user-account-access/user-account-access.scss
@ -3,6 +3,6 @@
  display: block;
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  color: rgb(var(--light-primary-text));
 }
--- a/apps/client/src/app/components/user-account-membership/user-account-membership.scss
+++ b/apps/client/src/app/components/user-account-membership/user-account-membership.scss
@ -4,6 +4,6 @@
  height: 100%;
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  color: rgb(var(--light-primary-text));
 }
--- a/apps/client/src/app/components/user-account-settings/user-account-settings.scss
+++ b/apps/client/src/app/components/user-account-settings/user-account-settings.scss
@ -17,6 +17,6 @@
  }
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  color: rgb(var(--light-primary-text));
 }
--- a/apps/client/src/app/components/world-map-chart/world-map-chart.component.scss
+++ b/apps/client/src/app/components/world-map-chart/world-map-chart.component.scss
@ -21,7 +21,7 @@
  }
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  ::ng-deep {
    .svgMap-map-wrapper {
      .svgMap-country {
--- a/apps/client/src/app/pages/about/about-page.scss
+++ b/apps/client/src/app/pages/about/about-page.scss
@ -2,6 +2,6 @@
  color: rgb(var(--dark-primary-text));
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  color: rgb(var(--light-primary-text));
 }
--- a/apps/client/src/app/pages/about/changelog/changelog-page.scss
+++ b/apps/client/src/app/pages/about/changelog/changelog-page.scss
@ -35,6 +35,6 @@
  }
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  color: rgb(var(--light-primary-text));
 }
--- a/apps/client/src/app/pages/about/license/license-page.scss
+++ b/apps/client/src/app/pages/about/license/license-page.scss
@ -3,6 +3,6 @@
  display: block;
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  color: rgb(var(--light-primary-text));
 }
--- a/apps/client/src/app/pages/about/overview/about-overview-page.scss
+++ b/apps/client/src/app/pages/about/overview/about-overview-page.scss
@ -24,7 +24,7 @@
  }
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  color: rgb(var(--light-primary-text));

  .about-container {
--- a/apps/client/src/app/pages/about/privacy-policy/privacy-policy-page.scss
+++ b/apps/client/src/app/pages/about/privacy-policy/privacy-policy-page.scss
@ -16,6 +16,6 @@
  }
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  color: rgb(var(--light-primary-text));
 }
--- a/apps/client/src/app/pages/admin/admin-page.scss
+++ b/apps/client/src/app/pages/admin/admin-page.scss
@ -2,6 +2,6 @@
  color: rgb(var(--dark-primary-text));
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  color: rgb(var(--light-primary-text));
 }
--- a/apps/client/src/app/pages/blog/blog-page.scss
+++ b/apps/client/src/app/pages/blog/blog-page.scss
@ -9,6 +9,6 @@
  }
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  color: rgb(var(--light-primary-text));
 }
--- a/apps/client/src/app/pages/faq/faq-page.scss
+++ b/apps/client/src/app/pages/faq/faq-page.scss
@ -2,6 +2,6 @@
  color: rgb(var(--dark-primary-text));
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  color: rgb(var(--light-primary-text));
 }
--- a/apps/client/src/app/pages/features/features-page.scss
+++ b/apps/client/src/app/pages/features/features-page.scss
@ -12,6 +12,6 @@
  }
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  color: rgb(var(--light-primary-text));
 }
--- a/apps/client/src/app/pages/home/home-page.scss
+++ b/apps/client/src/app/pages/home/home-page.scss
@ -2,6 +2,6 @@
  color: rgb(var(--dark-primary-text));
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  color: rgb(var(--light-primary-text));
 }
--- a/apps/client/src/app/pages/landing/landing-page.scss
+++ b/apps/client/src/app/pages/landing/landing-page.scss
@ -120,7 +120,7 @@
  }
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  .button-container {
    .mat-mdc-outlined-button {
      background-color: var(--dark-background);
--- a/apps/client/src/app/pages/open/open-page.scss
+++ b/apps/client/src/app/pages/open/open-page.scss
@ -14,6 +14,6 @@
  }
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  color: rgb(var(--light-primary-text));
 }
--- a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.scss
+++ b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.scss
@ -18,7 +18,7 @@
  }
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  .mat-mdc-dialog-content {
    .mat-datepicker-input {
      &.mat-mdc-input-element:disabled {
--- a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.scss
+++ b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.scss
@ -53,7 +53,7 @@
  }
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  .drop-area {
    border-color: rgba(
      var(--palette-foreground-divider-dark),
--- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.scss
+++ b/apps/client/src/app/pages/portfolio/allocations/allocations-page.scss
@ -43,7 +43,7 @@
  }
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  .mat-mdc-progress-bar {
    ::ng-deep {
      .mdc-linear-progress__buffer-bar {
--- a/apps/client/src/app/pages/portfolio/portfolio-page.scss
+++ b/apps/client/src/app/pages/portfolio/portfolio-page.scss
@ -2,6 +2,6 @@
  color: rgb(var(--dark-primary-text));
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  color: rgb(var(--light-primary-text));
 }
--- a/apps/client/src/app/pages/pricing/pricing-page.scss
+++ b/apps/client/src/app/pages/pricing/pricing-page.scss
@ -26,6 +26,6 @@
  }
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  color: rgb(var(--light-primary-text));
 }
--- a/apps/client/src/app/pages/public/public-page.scss
+++ b/apps/client/src/app/pages/public/public-page.scss
@ -17,6 +17,6 @@
  }
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  color: rgb(var(--light-primary-text));
 }
--- a/apps/client/src/app/pages/register/register-page.scss
+++ b/apps/client/src/app/pages/register/register-page.scss
@ -24,7 +24,7 @@
  }
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  .button-container {
    .mat-mdc-outlined-button {
      background-color: var(--dark-background);
--- a/apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.scss
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.scss
@ -20,6 +20,6 @@
  }
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  color: rgb(var(--light-primary-text));
 }
--- a/apps/client/src/app/pages/resources/personal-finance-tools/product-page.scss
+++ b/apps/client/src/app/pages/resources/personal-finance-tools/product-page.scss
@ -16,7 +16,7 @@
  }
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  color: rgb(var(--light-primary-text));

  .call-to-action {
--- a/apps/client/src/app/pages/resources/resources-page.scss
+++ b/apps/client/src/app/pages/resources/resources-page.scss
@ -12,6 +12,6 @@
  }
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  color: rgb(var(--light-primary-text));
 }
--- a/apps/client/src/app/pages/user-account/user-account-page.scss
+++ b/apps/client/src/app/pages/user-account/user-account-page.scss
@ -2,6 +2,6 @@
  color: rgb(var(--dark-primary-text));
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  color: rgb(var(--light-primary-text));
 }
--- a/apps/client/src/app/pages/zen/zen-page.scss
+++ b/apps/client/src/app/pages/zen/zen-page.scss
@ -2,6 +2,6 @@
  color: rgb(var(--dark-primary-text));
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  color: rgb(var(--light-primary-text));
 }
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@ -214,7 +214,7 @@ body {
    }
  }

-  &.is-dark-theme {
+  &.theme-dark {
    background: var(--dark-background);
    color: rgba(var(--light-primary-text));

--- a/apps/client/src/styles/theme.scss
+++ b/apps/client/src/styles/theme.scss
@ -3,7 +3,7 @@
 $dark-primary-text: rgba(black, 0.87);
 $light-primary-text: white;

-$mat-css-dark-theme-selector: '.is-dark-theme';
+$mat-css-dark-theme-selector: '.theme-dark';

 $gf-primary: (
  50: var(--gf-theme-primary-50),
@ -99,7 +99,7 @@ $gf-theme-dark: mat.m2-define-dark-theme(
  )
 );

-.is-dark-theme {
+.theme-dark {
  @include mat.all-component-colors($gf-theme-dark);
 }

--- a/libs/ui/src/lib/activities-filter/activities-filter.component.scss
+++ b/libs/ui/src/lib/activities-filter/activities-filter.component.scss
@ -15,7 +15,7 @@
  }
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  .mat-mdc-form-field {
    color: rgba(var(--light-primary-text));
  }
--- a/libs/ui/src/lib/activity-type/activity-type.component.scss
+++ b/libs/ui/src/lib/activity-type/activity-type.component.scss
@ -40,7 +40,7 @@
  }
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  .activity-type-badge {
    background-color: rgba(var(--palette-foreground-text-dark), 0.1) !important;
  }
--- a/libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.scss
+++ b/libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.scss
@ -10,7 +10,7 @@
  }
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  &.has-focus {
    a {
      color: rgba(var(--dark-primary-text));
--- a/libs/ui/src/lib/assistant/assistant.scss
+++ b/libs/ui/src/lib/assistant/assistant.scss
@ -26,7 +26,7 @@
  }
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  .date-range-selector-container {
    border-color: rgba(var(--light-dividers));
  }
--- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.scss
+++ b/libs/ui/src/lib/fire-calculator/fire-calculator.component.scss
@ -25,7 +25,7 @@
  }
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  ::ng-deep {
    .mdc-text-field--disabled {
      .mdc-notched-outline__leading,
--- a/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.scss
+++ b/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.scss
@ -11,6 +11,6 @@
  }
 }

-:host-context(.is-dark-theme) {
+:host-context(.theme-dark) {
  border-color: rgba(var(--light-dividers));
 }