Feature/refactor dark theme css selector (#3662)

* Refactor dark theme CSS selector

* Update changelog

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

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);
   }

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

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);
 

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);
   }

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));

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));
 }

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));
 }

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));
 }

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 {

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));
 }

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));
 }

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));
 }

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 {

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));
 }

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));
 }

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));
 }

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));
 }

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));
 }

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));
 }

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);

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));
 }

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 {

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),

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 {

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));
 }

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));
 }

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));
 }

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);

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));
 }

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 {

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));
 }

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));
 }

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));
 }

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));
 

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);
 }
 

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));
   }

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;
   }

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));

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));
   }

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,

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));
 }