feat(docs): add theme toggle (#5092)

Closes #5065

Author: adxdits

projects/www/src/_code_theme.scss

@@ -7,43 +7,43 @@ pre code.hljs {
 pre {
   margin: 14px 0 24px;
   overflow-x: auto;
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  border: 1px solid var(--ngrx-border-color);
 }
 
 code.hljs {
   padding: 3px 5px;
 }
 
 .hljs {
-  color: #abb2bf;
-  background: rgba(0, 0, 0, 0.24);
+  color: var(--ngrx-code-text);
+  background: var(--ngrx-code-bg);
 }
 .hljs-comment,
 .hljs-quote {
-  color: #5c6370;
+  color: var(--ngrx-code-comment);
   font-style: italic;
 }
 .hljs-doctag,
 .hljs-keyword,
 .hljs-formula {
-  color: #fface6;
+  color: var(--ngrx-code-keyword);
 }
 .hljs-section,
 .hljs-name,
 .hljs-selector-tag,
 .hljs-deletion,
 .hljs-subst {
-  color: #e06c75;
+  color: var(--ngrx-code-deletion);
 }
 .hljs-literal {
-  color: #56b6c2;
+  color: var(--ngrx-code-literal);
 }
 .hljs-string,
 .hljs-regexp,
 .hljs-addition,
 .hljs-attribute,
 .hljs-meta .hljs-string {
-  color: #98c379;
+  color: var(--ngrx-code-string);
 }
 .hljs-attr,
 .hljs-variable,
@@ -53,20 +53,20 @@ code.hljs {
 .hljs-selector-attr,
 .hljs-selector-pseudo,
 .hljs-number {
-  color: #ffb871;
+  color: var(--ngrx-code-number);
 }
 .hljs-symbol,
 .hljs-bullet,
 .hljs-link,
 .hljs-meta,
 .hljs-selector-id,
 .hljs-title {
-  color: #61aeee;
+  color: var(--ngrx-code-title);
 }
 .hljs-built_in,
 .hljs-title.class_,
 .hljs-class .hljs-title {
-  color: #ffdcbe;
+  color: var(--ngrx-code-class);
 }
 .hljs-emphasis {
   font-style: italic;

projects/www/src/app/components/contributor-card.component.ts

@@ -17,16 +17,17 @@ import { Contributor } from '../services/contributors.service';
 
         <div class="contributor-links">
           @if (contributor().twitter) {
-          <a
-            [href]="'https://twitter.com/' + contributor().twitter"
-            target="_blank"
-          >
-            <img src="/images/bios/card-icons/twitter.svg" alt="Twitter" />
-          </a>
-          } @if (contributor().website) {
-          <a [href]="contributor().website" target="_blank">
-            <img src="/images/bios/card-icons/link.svg" alt="Website" />
-          </a>
+            <a
+              [href]="'https://twitter.com/' + contributor().twitter"
+              target="_blank"
+            >
+              <img src="/images/bios/card-icons/twitter.svg" alt="Twitter" />
+            </a>
+          }
+          @if (contributor().website) {
+            <a [href]="contributor().website" target="_blank">
+              <img src="/images/bios/card-icons/link.svg" alt="Website" />
+            </a>
           }
         </div>
 
@@ -59,8 +60,8 @@ import { Contributor } from '../services/contributors.service';
         align-items: center;
         justify-content: center;
         overflow: hidden;
-        background: #fff;
-        border-bottom: solid 4px #cf8fc5;
+        background: var(--ngrx-text);
+        border-bottom: solid 4px var(--ngrx-accent);
       }
       .contributor-photo img {
         height: 100%;
@@ -72,7 +73,7 @@ import { Contributor } from '../services/contributors.service';
         width: 200px;
         padding: 15px 0 0;
         text-align: center;
-        background: #120c14;
+        background: var(--ngrx-bg-overlay);
       }
       .contributor-info h3 {
         margin-top: 0;
@@ -82,14 +83,14 @@ import { Contributor } from '../services/contributors.service';
       }
       .view-bio {
         margin: 10px 0 0;
-        color: #cf8fc5;
+        color: var(--ngrx-accent);
         font-size: 14px;
         cursor: pointer;
-        background: #221925;
+        background: var(--ngrx-bg-elevated);
         padding: 6px 0;
       }
       .view-bio:hover {
-        color: #ececec;
+        color: var(--ngrx-text);
       }
       .contributor-links {
         display: flex;
@@ -108,8 +109,8 @@ import { Contributor } from '../services/contributors.service';
         right: 0;
         width: 100%;
         height: 100%;
-        background: #120c14;
-        color: #fff;
+        background: var(--ngrx-bg-overlay);
+        color: var(--ngrx-text);
         padding: 15px;
         overflow: hidden;
         display: flex;
@@ -130,7 +131,7 @@ import { Contributor } from '../services/contributors.service';
       }
       .contributor-bio-preview p {
         margin: 0;
-        color: #fff;
+        color: var(--ngrx-text);
         font-size: 12px;
         line-height: 16px;
       }

projects/www/src/app/components/contributor-navigation.component.ts

@@ -6,20 +6,20 @@ import { GroupNav } from '../services/contributors.service';
   template: `
     <div class="groups-navigation">
       @for (group of groupNames(); track group.name) {
-      <p
-        (click)="selectGroup(group.name)"
-        [class.selected]="selectedGroup() === group.name"
-      >
-        {{ group.name }}
-      </p>
+        <p
+          (click)="selectGroup(group.name)"
+          [class.selected]="selectedGroup() === group.name"
+        >
+          {{ group.name }}
+        </p>
       }
     </div>
   `,
   styles: [
     `
       .groups-navigation {
         display: flex;
-        background: #221925;
+        background: var(--ngrx-bg-elevated);
         width: fit-content;
         padding: 5px;
         gap: 5px;
@@ -28,16 +28,16 @@ import { GroupNav } from '../services/contributors.service';
         border-radius: 5px;
       }
       .groups-navigation p {
-        color: #bfbcc0;
+        color: var(--ngrx-text-muted);
         padding: 2px 10px;
         cursor: pointer;
         margin: 0;
         border-radius: 2px;
         font-size: 18px;
       }
       .groups-navigation p.selected {
-        background: #120c14;
-        color: #fff;
+        background: var(--ngrx-bg-overlay);
+        color: var(--ngrx-text);
       }
     `,
   ],

projects/www/src/app/components/docs/alert.component.ts

@@ -22,7 +22,7 @@ export type AlertType = 'inform' | 'warn' | 'error' | 'help';
         border-top: 1px solid;
         border-bottom: 1px solid;
         border-right: 1px solid;
-        border-color: rgba(255, 255, 255, 0.12);
+        border-color: var(--ngrx-border-color);
       }
 
       :host p {
@@ -45,7 +45,7 @@ export type AlertType = 'inform' | 'warn' | 'error' | 'help';
       }
 
       :host(.help) {
-        border-color: rgba(255, 172, 230, 0.72);
+        border-color: var(--ngrx-link);
         background-color: rgba(255, 172, 230, 0.08);
       }
 

projects/www/src/app/components/docs/code-example.component.ts

@@ -53,7 +53,7 @@ import { ExamplesService } from '@ngrx-io/app/examples/examples.service';
       :host {
         display: flex;
         flex-direction: column;
-        border: 1px solid rgba(255, 255, 255, 0.12);
+        border: 1px solid var(--ngrx-border-color);
         margin: 14px 0 24px;
       }
 
@@ -64,8 +64,8 @@ import { ExamplesService } from '@ngrx-io/app/examples/examples.service';
 
       .header {
         padding: 8px 16px;
-        background-color: rgba(255, 255, 255, 0.05);
-        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+        background-color: var(--ngrx-bg-elevated);
+        border-bottom: 1px solid var(--ngrx-border-color);
         font-size: 12px;
         font-weight: 500;
       }
@@ -98,31 +98,31 @@ import { ExamplesService } from '@ngrx-io/app/examples/examples.service';
         0% {
           background: rgba(207, 143, 197, 0.6);
           border-color: rgba(207, 143, 197, 0.4);
-          color: rgba(255, 255, 255, 1);
+          color: var(--ngrx-text);
           transform: scale(1);
         }
         15% {
           background: rgba(207, 143, 197, 0.6);
           border-color: rgba(207, 143, 197, 0.4);
-          color: rgba(255, 255, 255, 1);
+          color: var(--ngrx-text);
           transform: scale(1.1);
         }
         30% {
           background: rgba(207, 143, 197, 0.6);
           border-color: rgba(207, 143, 197, 0.4);
-          color: rgba(255, 255, 255, 1);
+          color: var(--ngrx-text);
           transform: scale(1);
         }
         80% {
           background: rgba(207, 143, 197, 0.6);
           border-color: rgba(207, 143, 197, 0.4);
-          color: rgba(255, 255, 255, 1);
+          color: var(--ngrx-text);
           transform: scale(1);
         }
         100% {
-          background: rgba(0, 0, 0, 0.7);
-          border-color: rgba(255, 255, 255, 0.2);
-          color: rgba(255, 255, 255, 0.8);
+          background: var(--ngrx-bg-elevated);
+          border-color: var(--ngrx-border-color);
+          color: var(--ngrx-text-secondary);
           transform: scale(1);
         }
       }

projects/www/src/app/components/docs/markdown-article.component.ts

@@ -69,7 +69,7 @@ type Heading = { level: number; text: string; id: string; url: string };
         right: 24px;
         margin: 0;
         padding: 0;
-        border-left: 1px solid rgba(255, 255, 255, 0.12);
+        border-left: 1px solid var(--ngrx-border-color);
         @media only screen and (max-width: 1280px) {
           position: relative;
           width: 100%;
@@ -79,18 +79,18 @@ type Heading = { level: number; text: string; id: string; url: string };
       }
 
       menu a {
-        color: rgba(255, 255, 255, 0.56);
+        color: var(--ngrx-text-muted);
         font-size: 13px;
         border-left: 2px solid transparent;
       }
 
       menu a:hover {
-        color: rgba(255, 255, 255, 0.87);
+        color: var(--ngrx-text-primary);
       }
 
       menu a.active {
-        color: rgba(255, 255, 255, 0.87);
-        border-color: rgba(207, 143, 197, 0.96);
+        color: var(--ngrx-text-primary);
+        border-color: var(--ngrx-accent);
       }
 
       .content-menu-holder {
@@ -109,7 +109,7 @@ type Heading = { level: number; text: string; id: string; url: string };
         align-items: center;
         justify-content: space-between;
         padding: 5px 10px;
-        background: #201a23;
+        background: var(--ngrx-bg-content-menu);
         border-radius: 5px;
         display: flex;
         margin-bottom: 10px;
@@ -119,7 +119,7 @@ type Heading = { level: number; text: string; id: string; url: string };
           display: flex;
         }
         &:hover {
-          background: #262029;
+          background: var(--ngrx-bg-content-menu-hover);
         }
       }
 
@@ -153,9 +153,9 @@ type Heading = { level: number; text: string; id: string; url: string };
 
       article ::ng-deep table {
         border-collapse: collapse;
-        border-top: 1px solid rgba(255, 255, 255, 0.12);
-        border-left: 1px solid rgba(255, 255, 255, 0.12);
-        border-right: 1px solid rgba(255, 255, 255, 0.12);
+        border-top: 1px solid var(--ngrx-border-color);
+        border-left: 1px solid var(--ngrx-border-color);
+        border-right: 1px solid var(--ngrx-border-color);
         margin: 14px 0;
         @media only screen and (max-width: 1280px) {
           display: block;
@@ -164,12 +164,12 @@ type Heading = { level: number; text: string; id: string; url: string };
       }
 
       article ::ng-deep table thead {
-        background-color: rgba(0, 0, 0, 0.36);
+        background-color: var(--ngrx-table-header-bg);
         font-family: 'Oxanium', sans-serif;
       }
 
       article ::ng-deep table tr {
-        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+        border-bottom: 1px solid var(--ngrx-border-color);
       }
 
       article ::ng-deep table th,

projects/www/src/app/components/docs/markdown-symbol-link.component.ts

@@ -11,7 +11,7 @@ import { CanonicalReference } from '@ngrx-io/shared';
   styles: [
     `
       ngrx-docs-symbol-link {
-        color: #ffdcbe;
+        color: var(--ngrx-link);
       }
 
       ngrx-docs-symbol-link a {

projects/www/src/app/components/docs/symbol-api.component.ts

@@ -34,7 +34,7 @@ import { SymbolExcerptGroupComponent } from './symbol-excerpt-group.component';
         display: flex;
         padding: 8px;
         flex-direction: column;
-        border-top: 1px solid rgba(255, 255, 255, 0.12);
+        border-top: 1px solid var(--ngrx-border-color);
       }
 
       h4 {
@@ -43,7 +43,7 @@ import { SymbolExcerptGroupComponent } from './symbol-excerpt-group.component';
         font-weight: 700;
         margin: 0;
         padding: 8px;
-        color: #fface6;
+        color: var(--ngrx-link);
       }
 
       .memberExcerpt {