Merge pull request #4916 from mempool/natsoni/high-contrast-theme

High contrast theme (duplicate)

frontend/angular.json

@@ -170,6 +170,11 @@
             ],
             "styles": [
               "src/styles.scss",
+              {
+                "input": "src/theme-contrast.scss",
+                "bundleName": "contrast",
+                "inject": false
+              },
               "node_modules/@fortawesome/fontawesome-svg-core/styles.css"
             ],
             "vendorChunk": true,

frontend/src/app/app.constants.ts

@@ -1,4 +1,4 @@
-export const mempoolFeeColors = [
+export const defaultMempoolFeeColors = [
   '557d00',
   '5d7d01',
   '637d02',
@@ -39,6 +39,47 @@ export const mempoolFeeColors = [
   'ae005b',
 ];
 
+export const contrastMempoolFeeColors = [
+  '0082e6',
+  '0984df',
+  '1285d9',
+  '1a87d2',
+  '2388cb',
+  '2c8ac5',
+  '358bbe',
+  '3e8db7',
+  '468eb0',
+  '4f90aa',
+  '5892a3',
+  '61939c',
+  '6a9596',
+  '72968f',
+  '7b9888',
+  '849982',
+  '8d9b7b',
+  '959c74',
+  '9e9e6e',
+  'a79f67',
+  'b0a160',
+  'b9a35a',
+  'c1a453',
+  'caa64c',
+  'd3a745',
+  'dca93f',
+  'e5aa38',
+  'edac31',
+  'f6ad2b',
+  'ffaf24',
+  'ffb01e',
+  'ffb118',
+  'ffb212',
+  'ffb30c',
+  'ffb406',
+  'ffb500',
+  'ffb600',
+  'ffb700',
+ ];
+
 export const chartColors = [
   "#D81B60",
   "#8E24AA",

frontend/src/app/app.module.ts

@@ -19,6 +19,7 @@ import { SharedModule } from './shared/shared.module';
 import { StorageService } from './services/storage.service';
 import { HttpCacheInterceptor } from './services/http-cache.interceptor';
 import { LanguageService } from './services/language.service';
+import { ThemeService } from './services/theme.service';
 import { FiatShortenerPipe } from './shared/pipes/fiat-shortener.pipe';
 import { FiatCurrencyPipe } from './shared/pipes/fiat-currency.pipe';
 import { ShortenStringPipe } from './shared/pipes/shorten-string-pipe/shorten-string.pipe';
@@ -38,6 +39,7 @@ const providers = [
   StorageService,
   EnterpriseService,
   LanguageService,
+  ThemeService,
   ShortenStringPipe,
   FiatShortenerPipe,
   FiatCurrencyPipe,

frontend/src/app/components/about/about-sponsors.component.scss

@@ -14,7 +14,7 @@
 }
 
 .become-sponsor {
-  background-color: #1d1f31;
+  background-color: var(--bg);
   border-radius: 16px;
   padding: 12px 20px;
   width: 400px;

frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss

@@ -92,7 +92,7 @@
 
       &.target {
         .fill {
-          background: #653b9c;
+          background: var(--tertiary);
         }
         .fee {
           position: absolute;
@@ -114,7 +114,7 @@
         }
         &.active, &:hover {
           .fill {
-            background: #105fb0;
+            background: var(--primary);
           }
           .line {
             .fee-rate .label {

frontend/src/app/components/accelerate-preview/accelerate-preview.component.html

@@ -216,10 +216,10 @@
                 <ng-container>
                   <tr class="group-first">
                     <td class="item">
-                      <b style="background-color: #105fb0;" class="p-1 pl-0" i18n="accelerator.maximum-cost">Maximum acceleration cost</b>
+                      <b style="background-color: var(--primary);" class="p-1 pl-0" i18n="accelerator.maximum-cost">Maximum acceleration cost</b>
                     </td>
                     <td class="amt">
-                      <span style="background-color: #105fb0" class="p-1 pl-0">
+                      <span style="background-color: var(--primary)" class="p-1 pl-0">
                         {{ maxCost | number }}
                       </span>
                     </td>

frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss

@@ -1,6 +1,6 @@
 .fee-card {
   padding: 15px;
-  background-color: #1d1f31;
+  background-color: var(--bg);
 
   .feerate {
     display: flex;
@@ -23,7 +23,7 @@
 }
 
 .feerate.active {
-  background-color: #105fb0 !important;
+  background-color: var(--primary) !important;
   opacity: 1;
   border: 1px solid #007fff !important;
 }

frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss

@@ -62,7 +62,7 @@ h5 {
 
 .card-title {
   font-size: 1rem;
-  color: #4a68b9;
+  color: var(--title-fg);
 }
 
 .disabled {

frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.scss

@@ -1,5 +1,5 @@
 .card-title {
-  color: #4a68b9;
+  color: var(--title-fg);
   font-size: 10px;
   margin-bottom: 4px;  
   font-size: 1rem;

frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss

@@ -59,7 +59,7 @@ tr, td, th {
 }
 
 .progress {
-  background-color: #2d3348;
+  background-color: var(--secondary);
 }
 
 .txid {
@@ -148,7 +148,7 @@ tr, td, th {
 
 .tooltip-custom .tooltiptext {
   visibility: hidden;
-  color: #fff;
+  color: var(--fg);
   text-align: center;
   padding: 5px 0;
   border-radius: 6px;

frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html

@@ -40,7 +40,7 @@
           <a class="title-link" href="" [routerLink]="['/mempool-block/0' | relativeUrl]">
             <h5 class="card-title d-inline">Mempool Goggles&trade; : <ng-container i18n="accelerator.accelerations">Accelerations</ng-container></h5>
             <span>&nbsp;</span>
-            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: #4a68b9"></fa-icon>
+            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: var(--title-fg)"></fa-icon>
           </a>
           <div class="mempool-block-wrapper" *ngIf="webGlEnabled">
             <app-mempool-block-overview [index]="0" [overrideColors]="getAcceleratorColor"></app-mempool-block-overview>
@@ -85,7 +85,7 @@
           <a class="title-link" href="" [routerLink]="['/acceleration/list' | relativeUrl]">
             <h5 class="card-title d-inline" i18n="dashboard.recent-accelerations">Recent Accelerations</h5>
             <span>&nbsp;</span>
-            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: #4a68b9"></fa-icon>
+            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: var(--title-fg)"></fa-icon>
           </a>
           <app-accelerations-list [attr.data-cy]="'recent-accelerations'" [widget]=true [accelerations$]="minedAccelerations$"></app-accelerations-list>
         </div>

frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss

@@ -7,7 +7,7 @@
 }
 
 .card {
-  background-color: #1d1f31;
+  background-color: var(--bg);
 }
 
 .graph-card {
@@ -29,10 +29,10 @@
 
 .card-title {
   font-size: 1rem;
-  color: #4a68b9;
+  color: var(--title-fg);
 }
 .card-title > a {
-  color: #4a68b9;
+  color: var(--title-fg);
 }
 
 .card-body.pool-ranking {

frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts

@@ -8,13 +8,15 @@ import { Observable, catchError, combineLatest, distinctUntilChanged, interval,
 import { Color } from '../../block-overview-graph/sprite-types';
 import { hexToColor } from '../../block-overview-graph/utils';
 import TxView from '../../block-overview-graph/tx-view';
-import { feeLevels, mempoolFeeColors } from '../../../app.constants';
+import { feeLevels, defaultMempoolFeeColors, contrastMempoolFeeColors } from '../../../app.constants';
 import { ServicesApiServices } from '../../../services/services-api.service';
 import { detectWebGL } from '../../../shared/graphs.utils';
 import { AudioService } from '../../../services/audio.service';
+import { ThemeService } from '../../../services/theme.service';
 
 const acceleratedColor: Color = hexToColor('8F5FF6');
-const normalColors = mempoolFeeColors.map(hex => hexToColor(hex.slice(0,6) + '5F'));
+const normalColors = defaultMempoolFeeColors.map(hex => hexToColor(hex + '5F'));
+const contrastColors = contrastMempoolFeeColors.map(hex => hexToColor(hex.slice(0,6) + '5F'));
 
 interface AccelerationBlock extends BlockExtended {
   accelerationCount: number,
@@ -37,6 +39,7 @@ export class AcceleratorDashboardComponent implements OnInit {
   firstLoad = true;
 
   graphHeight: number = 300;
+  theme: ThemeService;
 
   constructor(
     private seoService: SeoService,
@@ -141,7 +144,7 @@ export class AcceleratorDashboardComponent implements OnInit {
     } else {
       const rate = tx.fee / tx.vsize; // color by simple single-tx fee rate
       const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1;
-      return normalColors[feeLevelIndex] || normalColors[mempoolFeeColors.length - 1];
+      return this.theme.theme === 'contrast' ? contrastColors[feeLevelIndex] || contrastColors[contrastColors.length - 1] : normalColors[feeLevelIndex] || normalColors[normalColors.length - 1];
     }
   }
 

frontend/src/app/components/acceleration/pending-stats/pending-stats.component.scss

@@ -1,5 +1,5 @@
 .card-title {
-  color: #4a68b9;
+  color: var(--title-fg);
   font-size: 10px;
   margin-bottom: 4px;  
   font-size: 1rem;

frontend/src/app/components/address/address-preview.component.scss

@@ -3,7 +3,7 @@
 }
 
 .qr-wrapper {
-  background-color: #FFF;
+  background-color: var(--fg);
   padding: 10px;
   padding-bottom: 5px;
   display: inline-block;

frontend/src/app/components/address/address.component.scss

@@ -1,5 +1,5 @@
 .qr-wrapper {
-  background-color: #FFF;
+  background-color: var(--fg);
   padding: 10px;
   padding-bottom: 5px;
   display: inline-block;

frontend/src/app/components/amount/amount.component.scss

@@ -1,3 +1,3 @@
 .green-color {
-  color: #3bcc49;
+  color: var(--green);
 }

frontend/src/app/components/asset/asset.component.scss

@@ -1,5 +1,5 @@
 .qr-wrapper {
-  background-color: #FFF;
+  background-color: var(--fg);
   padding: 10px;
   padding-bottom: 5px;
   display: inline-block;

frontend/src/app/components/assets/asset-group/asset-group.component.scss

@@ -19,7 +19,7 @@
 }
 
 .card {
-  background-color: #1d1f31;
+  background-color: var(--bg);
   width: 200px;
   height: 200px;
   align-items: center;

frontend/src/app/components/assets/assets-featured/assets-featured.component.scss

@@ -7,7 +7,7 @@
 }
 
 .card {
-  background-color: #1d1f31;
+  background-color: var(--bg);
   width: 200px;
   height: 200px;
   align-items: center;

frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss

@@ -95,7 +95,7 @@
     }
     .card-title {
       font-size: 1rem;
-      color: #4a68b9;
+      color: var(--title-fg);
     }
     .card-text {
       font-size: 18px;

frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts

@@ -233,7 +233,7 @@ export class BlockFeeRatesGraphComponent implements OnInit {
         borderRadius: 4,
         shadowColor: 'rgba(0, 0, 0, 0.5)',
         textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
           align: 'left',
         },
         borderColor: '#000',
@@ -309,7 +309,7 @@ export class BlockFeeRatesGraphComponent implements OnInit {
         splitLine: {
           lineStyle: {
             type: 'dotted',
-            color: '#ffffff66',
+            color: 'var(--transparent-fg)',
             opacity: 0.25,
           }
         },
@@ -376,7 +376,7 @@ export class BlockFeeRatesGraphComponent implements OnInit {
     const now = new Date();
     // @ts-ignore
     this.chartOptions.grid.bottom = 40;
-    this.chartOptions.backgroundColor = '#11131f';
+    this.chartOptions.backgroundColor = 'var(--active-bg)';
     this.chartInstance.setOption(this.chartOptions);
     download(this.chartInstance.getDataURL({
       pixelRatio: 2,

frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts

@@ -151,7 +151,7 @@ export class BlockFeesGraphComponent implements OnInit {
         borderRadius: 4,
         shadowColor: 'rgba(0, 0, 0, 0.5)',
         textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
           align: 'left',
         },
         borderColor: '#000',
@@ -214,7 +214,7 @@ export class BlockFeesGraphComponent implements OnInit {
           splitLine: {
             lineStyle: {
               type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 0.25,
             }
           },
@@ -305,7 +305,7 @@ export class BlockFeesGraphComponent implements OnInit {
     const now = new Date();
     // @ts-ignore
     this.chartOptions.grid.bottom = 40;
-    this.chartOptions.backgroundColor = '#11131f';
+    this.chartOptions.backgroundColor = 'var(--active-bg)';
     this.chartInstance.setOption(this.chartOptions);
     download(this.chartInstance.getDataURL({
       pixelRatio: 2,

frontend/src/app/components/block-filters/block-filters.component.scss

@@ -71,7 +71,7 @@
   .filter-tag {
     font-size: 0.9em;
     background: #181b2daf;
-    border: solid 1px #105fb0;
+    border: solid 1px var(--primary);
     color: white;
     border-radius: 0.2rem;
     padding: 0.2em 0.5em;
@@ -80,15 +80,15 @@
     pointer-events: all;
 
     &.selected {
-      background-color: #105fb0;
+      background-color: var(--primary);
     }
   }
 
   &.any-mode {
     .filter-tag {
-      border: solid 1px #1a9436;
+      border: solid 1px var(--success);
       &.selected {
-        background-color: #1a9436;
+        background-color: var(--success);
       }
     }
   }
@@ -114,15 +114,15 @@
     }
 
     &.blue {
-      border: solid 1px #105fb0;
+      border: solid 1px var(--primary);
       &.active {
-        background: #105fb0;
+        background: var(--primary);
       }
     }
     &.green {
-      border: solid 1px #1a9436;
+      border: solid 1px var(--success);
       &.active {
-        background: #1a9436;
+        background: var(--success);
       }
     }
     &.yellow {

frontend/src/app/components/block-health-graph/block-health-graph.component.ts

@@ -131,7 +131,7 @@ export class BlockHealthGraphComponent implements OnInit {
         borderRadius: 4,
         shadowColor: 'rgba(0, 0, 0, 0.5)',
         textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
           align: 'left',
         },
         borderColor: '#000',
@@ -178,7 +178,7 @@ export class BlockHealthGraphComponent implements OnInit {
           splitLine: {
             lineStyle: {
               type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 0.25,
             }
           },
@@ -290,7 +290,7 @@ export class BlockHealthGraphComponent implements OnInit {
     const now = new Date();
     // @ts-ignore
     this.chartOptions.grid.bottom = 40;
-    this.chartOptions.backgroundColor = '#11131f';
+    this.chartOptions.backgroundColor = 'var(--active-bg)';
     this.chartInstance.setOption(this.chartOptions);
     download(this.chartInstance.getDataURL({
       pixelRatio: 2,

frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss

@@ -2,7 +2,7 @@
   position: relative;
   width: 100%;
   padding-bottom: 100%;
-  background: #181b2d;
+  background: var(--stat-box-bg);
   display: flex;
   justify-content: center;
   align-items: center;

frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts

@@ -7,8 +7,9 @@ import TxView from './tx-view';
 import { Color, Position } from './sprite-types';
 import { Price } from '../../services/price.service';
 import { StateService } from '../../services/state.service';
+import { ThemeService } from '../../services/theme.service';
 import { Subscription } from 'rxjs';
-import { defaultColorFunction, setOpacity, defaultAuditColors, defaultColors, ageColorFunction } from './utils';
+import { defaultColorFunction, setOpacity, defaultAuditColors, defaultColors, ageColorFunction, contrastColorFunction, contrastAuditColors, contrastColors } from './utils';
 import { ActiveFilter, FilterMode, toFlags } from '../../shared/filters.utils';
 import { detectWebGL } from '../../shared/graphs.utils';
 
@@ -20,6 +21,13 @@ const unmatchedAuditColors = {
   prioritized: setOpacity(defaultAuditColors.prioritized, unmatchedOpacity),
   accelerated: setOpacity(defaultAuditColors.accelerated, unmatchedOpacity),
 };
+const unmatchedContrastAuditColors = {
+  censored: setOpacity(contrastAuditColors.censored, unmatchedOpacity),
+  missing: setOpacity(contrastAuditColors.missing, unmatchedOpacity),
+  added: setOpacity(contrastAuditColors.added, unmatchedOpacity),
+  prioritized: setOpacity(contrastAuditColors.prioritized, unmatchedOpacity),
+  accelerated: setOpacity(contrastAuditColors.accelerated, unmatchedOpacity),
+};
 
 @Component({
   selector: 'app-block-overview-graph',
@@ -53,6 +61,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
 
   @ViewChild('blockCanvas')
   canvas: ElementRef<HTMLCanvasElement>;
+  themeChangedSubscription: Subscription;
 
   gl: WebGLRenderingContext;
   animationFrameRequest: number;
@@ -84,6 +93,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     readonly ngZone: NgZone,
     readonly elRef: ElementRef,
     public stateService: StateService,
+    private themeService: ThemeService,
   ) {
     this.webGlEnabled = this.stateService.isBrowser && detectWebGL();
     this.vertexArray = new FastVertexArray(512, TxSprite.dataSize);
@@ -102,6 +112,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
       if (this.gl) {
         this.initCanvas();
         this.resizeCanvas();
+        this.themeChangedSubscription = this.themeService.themeChanged$.subscribe(() => {
+          this.scene.setColorFunction(this.getColorFunction());
+        });
       }
     }
   }
@@ -148,6 +161,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
     if (this.canvas) {
       this.canvas.nativeElement.removeEventListener('webglcontextlost', this.handleContextLost);
       this.canvas.nativeElement.removeEventListener('webglcontextrestored', this.handleContextRestored);
+      this.themeChangedSubscription?.unsubscribe();
     }
   }
 
@@ -293,7 +307,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
         this.start();
       } else {
         this.scene = new BlockScene({ width: this.displayWidth, height: this.displayHeight, resolution: this.resolution,
-          blockLimit: this.blockLimit, orientation: this.orientation, flip: this.flip, vertexArray: this.vertexArray,
+          blockLimit: this.blockLimit, orientation: this.orientation, flip: this.flip, vertexArray: this.vertexArray, theme: this.themeService,
           highlighting: this.auditHighlighting, animationDuration: this.animationDuration, animationOffset: this.animationOffset,
         colorFunction: this.getColorFunction() });
         this.start();
@@ -563,14 +577,27 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
   getFilterColorFunction(flags: bigint, gradient: 'fee' | 'age'): ((tx: TxView) => Color) {
     return (tx: TxView) => {
       if ((this.filterMode === 'and' && (tx.bigintFlags & flags) === flags) || (this.filterMode === 'or' && (flags === 0n || (tx.bigintFlags & flags) > 0n))) {
+        if (this.themeService.theme !== 'contrast') {
           return (gradient === 'age') ? ageColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000)) : defaultColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000));
         } else {
+          return (gradient === 'age') ? ageColorFunction(tx, contrastColors.fee, contrastAuditColors, this.relativeTime || (Date.now() / 1000)) : contrastColorFunction(tx, contrastColors.fee, contrastAuditColors, this.relativeTime || (Date.now() / 1000));
+        }
+      } else {
+        if (this.themeService.theme !== 'contrast') {
           return (gradient === 'age') ? { r: 1, g: 1, b: 1, a: 0.05 } : defaultColorFunction(
             tx,
             defaultColors.unmatchedfee,
             unmatchedAuditColors,
             this.relativeTime || (Date.now() / 1000)
           );
+        } else {
+          return (gradient === 'age') ? { r: 1, g: 1, b: 1, a: 0.05 } : contrastColorFunction(
+            tx,
+            contrastColors.unmatchedfee,
+            unmatchedContrastAuditColors,
+            this.relativeTime || (Date.now() / 1000)
+          );
+        }
       }
     };
   }

frontend/src/app/components/block-overview-graph/block-scene.ts

@@ -2,13 +2,15 @@ import { FastVertexArray } from './fast-vertex-array';
 import TxView from './tx-view';
 import { TransactionStripped } from '../../interfaces/node-api.interface';
 import { Color, Position, Square, ViewUpdateParams } from './sprite-types';
-import { defaultColorFunction } from './utils';
+import { defaultColorFunction, contrastColorFunction } from './utils';
+import { ThemeService } from '../../services/theme.service';
 
 export default class BlockScene {
   scene: { count: number, offset: { x: number, y: number}};
   vertexArray: FastVertexArray;
   txs: { [key: string]: TxView };
   getColor: ((tx: TxView) => Color) = defaultColorFunction;
+  theme: ThemeService;
   orientation: string;
   flip: boolean;
   animationDuration: number = 900;
@@ -29,11 +31,11 @@ export default class BlockScene {
   animateUntil = 0;
   dirty: boolean;
 
-  constructor({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, highlighting, colorFunction }:
+  constructor({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction }:
       { width: number, height: number, resolution: number, blockLimit: number, animationDuration: number, animationOffset: number,
-        orientation: string, flip: boolean, vertexArray: FastVertexArray, highlighting: boolean, colorFunction: ((tx: TxView) => Color) | null }
+        orientation: string, flip: boolean, vertexArray: FastVertexArray, theme: ThemeService, highlighting: boolean, colorFunction: ((tx: TxView) => Color) | null }
   ) {
-    this.init({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, highlighting, colorFunction });
+    this.init({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction });
   }
 
   resize({ width = this.width, height = this.height, animate = true }: { width?: number, height?: number, animate: boolean }): void {
@@ -67,7 +69,7 @@ export default class BlockScene {
   }
 
   setColorFunction(colorFunction: ((tx: TxView) => Color) | null): void {
-    this.getColor = colorFunction || defaultColorFunction;
+    this.theme.theme !== 'default' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction;
     this.updateAllColors();
   }
 
@@ -233,9 +235,9 @@ export default class BlockScene {
     this.animateUntil = Math.max(this.animateUntil, tx.setHighlight(value));
   }
 
-  private init({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, highlighting, colorFunction }:
+  private init({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction }:
       { width: number, height: number, resolution: number, blockLimit: number, animationDuration: number, animationOffset: number,
-        orientation: string, flip: boolean, vertexArray: FastVertexArray, highlighting: boolean, colorFunction: ((tx: TxView) => Color) | null }
+        orientation: string, flip: boolean, vertexArray: FastVertexArray, theme: ThemeService, highlighting: boolean, colorFunction: ((tx: TxView) => Color) | null }
   ): void {
     this.animationDuration = animationDuration || 1000;
     this.configAnimationOffset = animationOffset;
@@ -244,7 +246,8 @@ export default class BlockScene {
     this.flip = flip;
     this.vertexArray = vertexArray;
     this.highlightingEnabled = highlighting;
-    this.getColor = colorFunction || defaultColorFunction;
+    theme.theme !== 'default' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction;
+    this.theme = theme;
 
     this.scene = {
       count: 0,

frontend/src/app/components/block-overview-graph/utils.ts

@@ -1,4 +1,4 @@
-import { feeLevels, mempoolFeeColors } from '../../app.constants';
+import { feeLevels, defaultMempoolFeeColors, contrastMempoolFeeColors } from '../../app.constants';
 import { Color } from './sprite-types';
 import TxView from './tx-view';
 
@@ -47,7 +47,7 @@ interface ColorPalette {
 // precomputed colors
 const defaultColors: { [key: string]: ColorPalette } = {
   fee: {
-    base: mempoolFeeColors.map(hexToColor),
+    base: defaultMempoolFeeColors.map(hexToColor),
     audit: [],
     marginal: [],
     baseLevel: (tx: TxView, rate: number) => feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1
@@ -72,7 +72,37 @@ export const defaultAuditColors = {
   missing: darken(desaturate(hexToColor('f344df'), 0.3), 0.7),
   added: hexToColor('0099ff'),
   prioritized: darken(desaturate(hexToColor('0099ff'), 0.3), 0.7),
-  accelerated: hexToColor('8F5FF6'),
+  accelerated: hexToColor('8f5ff6'),
+};
+
+const contrastColors: { [key: string]: ColorPalette } = {
+  fee: {
+    base: contrastMempoolFeeColors.map(hexToColor),
+    audit: [],
+    marginal: [],
+    baseLevel: (tx: TxView, rate: number) => feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1
+  },
+}
+for (const key in contrastColors) {
+  const base = contrastColors[key].base;
+  contrastColors[key].audit = base.map((color) => darken(desaturate(color, 0.3), 0.9));
+  contrastColors[key].marginal = base.map((color) => darken(desaturate(color, 0.8), 1.1));
+  contrastColors['unmatched' + key] = {
+    base: contrastColors[key].base.map(c => setOpacity(c, 0.2)),
+    audit: contrastColors[key].audit.map(c => setOpacity(c, 0.2)),
+    marginal: contrastColors[key].marginal.map(c => setOpacity(c, 0.2)),
+    baseLevel: contrastColors[key].baseLevel,
+  };
+}
+
+export { contrastColors as contrastColors };
+
+export const contrastAuditColors = {
+  censored: hexToColor('ffa8ff'),
+  missing: darken(desaturate(hexToColor('ffa8ff'), 0.3), 0.7),
+  added: hexToColor('00bb98'),
+  prioritized: darken(desaturate(hexToColor('00bb98'), 0.3), 0.7),
+  accelerated: hexToColor('8f5ff6'),
 };
 
 export function defaultColorFunction(
@@ -83,7 +113,7 @@ export function defaultColorFunction(
 ): Color {
   const rate = tx.fee / tx.vsize; // color by simple single-tx fee rate
   const levelIndex = colors.baseLevel(tx, rate, relativeTime || (Date.now() / 1000));
-  const levelColor = colors.base[levelIndex] || colors.base[mempoolFeeColors.length - 1];
+  const levelColor = colors.base[levelIndex] || colors.base[defaultMempoolFeeColors.length - 1];
   // Normal mode
   if (!tx.scene?.highlightingEnabled) {
     if (tx.acc) {
@@ -100,7 +130,7 @@ export function defaultColorFunction(
     case 'missing':
     case 'sigop':
     case 'rbf':
-      return colors.marginal[levelIndex] || colors.marginal[mempoolFeeColors.length - 1];
+      return colors.marginal[levelIndex] || colors.marginal[defaultMempoolFeeColors.length - 1];
     case 'fresh':
     case 'freshcpfp':
       return auditColors.missing;
@@ -109,12 +139,12 @@ export function defaultColorFunction(
     case 'prioritized':
       return auditColors.prioritized;
     case 'selected':
-      return colors.marginal[levelIndex] || colors.marginal[mempoolFeeColors.length - 1];
+      return colors.marginal[levelIndex] || colors.marginal[defaultMempoolFeeColors.length - 1];
     case 'accelerated':
       return auditColors.accelerated;
     case 'found':
       if (tx.context === 'projected') {
-        return colors.audit[levelIndex] || colors.audit[mempoolFeeColors.length - 1];
+        return colors.audit[levelIndex] || colors.audit[defaultMempoolFeeColors.length - 1];
       } else {
         return levelColor;
       }
@@ -127,17 +157,27 @@ export function defaultColorFunction(
   }
 }
 
+export function contrastColorFunction(
+  tx: TxView,
+  colors: { base: Color[], audit: Color[], marginal: Color[], baseLevel: (tx: TxView, rate: number, time: number) => number } = contrastColors.fee,
+  auditColors: { [status: string]: Color } = contrastAuditColors,
+  relativeTime?: number,
+): Color {
+  return defaultColorFunction(tx, colors, auditColors, relativeTime);
+}
+
 export function ageColorFunction(
   tx: TxView,
   colors: { base: Color[], audit: Color[], marginal: Color[], baseLevel: (tx: TxView, rate: number, time: number) => number } = defaultColors.fee,
   auditColors: { [status: string]: Color } = defaultAuditColors,
   relativeTime?: number,
+  theme?: string,
 ): Color {
   if (tx.acc || tx.status === 'accelerated') {
     return auditColors.accelerated;
   }
 
-  const color = defaultColorFunction(tx, colors, auditColors, relativeTime); 
+  const color = theme !== 'contrast' ? defaultColorFunction(tx, colors, auditColors, relativeTime) : contrastColorFunction(tx, colors, auditColors, relativeTime);
 
   const ageLevel = (!tx.time ? 0 : (0.8 * Math.tanh((1 / 15) * Math.log2((Math.max(1, 0.6 * ((relativeTime - tx.time) - 60)))))));
   return {

frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss

@@ -3,7 +3,7 @@
   background: rgba(#11131f, 0.95);
   border-radius: 4px;
   box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
-  color: #b1b1b1;
+  color: var(--tooltip-grey);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -30,7 +30,7 @@ th, td {
 }
 
 .badge.badge-accelerated {
-  background-color: #653b9c;
+  background-color: var(--tertiary);
   box-shadow: #ad7de57f 0px 0px 12px -2px;
   color: white;
   animation: acceleratePulse 1s infinite;
@@ -51,27 +51,27 @@ th, td {
 
   .filter-tag {
     background: #181b2daf;
-    border: solid 1px #105fb0;
+    border: solid 1px var(--primary);
     color: white;
     transition: background-color 300ms;
 
     &.matching {
-      background-color: #105fb0;
+      background-color: var(--primary);
     }
   }
 
   &.any-mode {
     .filter-tag {
-      border: solid 1px #1a9436;
+      border: solid 1px var(--success);
       &.matching {
-        background-color: #1a9436;
+        background-color: var(--success);
       }
     }
   }
 }
 
 @keyframes acceleratePulse {
-  0% { background-color: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; }
+  0% { background-color: var(--tertiary); box-shadow: #ad7de57f 0px 0px 12px -2px; }
   50% { background-color: #8457bb; box-shadow: #ad7de5 0px 0px 18px -2px;}
-  100% { background-color: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; }
+  100% { background-color: var(--tertiary); box-shadow: #ad7de57f 0px 0px 12px -2px; }
 }

frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts

@@ -150,7 +150,7 @@ export class BlockRewardsGraphComponent implements OnInit {
         borderRadius: 4,
         shadowColor: 'rgba(0, 0, 0, 0.5)',
         textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
           align: 'left',
         },
         borderColor: '#000',
@@ -219,7 +219,7 @@ export class BlockRewardsGraphComponent implements OnInit {
           splitLine: {
             lineStyle: {
               type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 0.25,
             }
           },
@@ -315,7 +315,7 @@ export class BlockRewardsGraphComponent implements OnInit {
     const now = new Date();
     // @ts-ignore
     this.chartOptions.grid.bottom = 40;
-    this.chartOptions.backgroundColor = '#11131f';
+    this.chartOptions.backgroundColor = 'var(--active-bg)';
     this.chartInstance.setOption(this.chartOptions);
     download(this.chartInstance.getDataURL({
       pixelRatio: 2,

frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts

@@ -146,7 +146,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit {
         borderRadius: 4,
         shadowColor: 'rgba(0, 0, 0, 0.5)',
         textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
           align: 'left',
         },
         borderColor: '#000',
@@ -230,7 +230,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit {
           splitLine: {
             lineStyle: {
               type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 0.25,
             }
           },
@@ -252,7 +252,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit {
             symbol: 'none',
             lineStyle: {
               type: 'solid',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 1,
               width: 1,
             },
@@ -342,7 +342,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit {
     const now = new Date();
     // @ts-ignore
     this.chartOptions.grid.bottom = 40;
-    this.chartOptions.backgroundColor = '#11131f';
+    this.chartOptions.backgroundColor = 'var(--active-bg)';
     this.chartInstance.setOption(this.chartOptions);
     download(this.chartInstance.getDataURL({
       pixelRatio: 2,

frontend/src/app/components/block/block.component.scss

@@ -22,7 +22,7 @@
 }
 
 .qr-wrapper {
-  background-color: #FFF;
+  background-color: var(--fg);
   padding: 10px;
   padding-bottom: 5px;
   display: inline-block;
@@ -175,9 +175,7 @@ h1 {
   }
 
   a {
-    color: #1ad8f4;
     &:hover, &:focus {
-      color: #09a3ba;
       display: inline-block;
     }
   }
@@ -254,7 +252,7 @@ h1 {
   cursor: pointer;
 
   &.active {
-    background: #24273e;
+    background: var(--box-bg);
   }
 
   &.active, &:hover {

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss

@@ -117,7 +117,7 @@
 }
 
 .black-background {
-  background-color: #11131f;
+  background-color: var(--active-bg);
   z-index: 100;
   position: relative;
 }
@@ -144,7 +144,7 @@
 }
 
 .loading .bitcoin-block.mined-block {
-  background: #2d3348;
+  background: var(--secondary);
 }
 
 @keyframes opacityPulse {

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts

@@ -63,11 +63,11 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
   blockPadding: number = 30;
 
   gradientColors = {
-    '': ['#9339f4', '#105fb0'],
+    '': ['var(--mainnet-alt)', 'var(--primary)'],
-    liquid: ['#116761', '#183550'],
+    liquid: ['var(--liquid)', 'var(--testnet-alt)'],
-    'liquidtestnet': ['#494a4a', '#272e46'],
+    'liquidtestnet': ['var(--liquidtestnet)', 'var(--liquidtestnet-alt)'],
-    testnet: ['#1d486f', '#183550'],
+    testnet: ['var(--testnet)', 'var(--testnet-alt)'],
-    signet: ['#6f1d5d', '#471850'],
+    signet: ['var(--signet)', 'var(--signet-alt)'],
   };
 
   constructor(
@@ -330,7 +330,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
       left: addLeft + this.blockOffset * index + 'px',
       background: `repeating-linear-gradient(
         #2d3348,
-        #2d3348 ${greenBackgroundHeight}%,
+        var(--secondary) ${greenBackgroundHeight}%,
         ${this.gradientColors[this.network][0]} ${Math.max(greenBackgroundHeight, 0)}%,
         ${this.gradientColors[this.network][1]} 100%
       )`,
@@ -366,7 +366,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
 
     return {
       left: addLeft + this.blockOffset * this.emptyBlocks.indexOf(block) + 'px',
-      background: "#2d3348",
+      background: "var(--secondary)",
     };
   }
 

frontend/src/app/components/blockchain/blockchain.component.scss

@@ -30,7 +30,7 @@
 }
 
 .black-background {
-  background-color: #11131f;
+  background-color: var(--active-bg);
   z-index: 100;
   position: relative;
 }

frontend/src/app/components/blocks-list/blocks-list.component.scss

@@ -46,7 +46,7 @@ tr, td, th {
 }
 
 .progress {
-  background-color: #2d3348;
+  background-color: var(--secondary);
 }
 
 .pool {
@@ -266,7 +266,7 @@ tr, td, th {
 
 .tooltip-custom .tooltiptext {
   visibility: hidden;
-  color: #fff;
+  color: var(--fg);
   text-align: center;
   padding: 5px 0;
   border-radius: 6px;

frontend/src/app/components/clock-face/clock-face.component.scss

@@ -14,7 +14,7 @@
     height: 100%;
 
     .face {
-      fill: #11131f;
+      fill: var(--active-bg);
     }
   }
 
@@ -29,8 +29,8 @@
     }
 
     &.hour {
-      fill: #105fb0;
+      fill: var(--primary);
-      stroke: #105fb0;
+      stroke: var(--primary);
       stroke-width: 6px;
     }
   }

frontend/src/app/components/clock/clock.component.scss

@@ -161,7 +161,7 @@
     }
 
     .side.bottom {
-      background: #105fb0;
+      background: var(--primary);
       transform: rotateX(-90deg); 
       margin-top: var(--half-side);
     }

frontend/src/app/components/difficulty-mining/difficulty-mining.component.html

@@ -40,7 +40,7 @@
           <h5 class="card-title" i18n="difficulty-box.current-period">Current Period</h5>
           <div class="card-text">{{ epochData.progress | number: '1.2-2' }} <span class="symbol">%</span></div>
           <div class="progress small-bar">
-            <div class="progress-bar" role="progressbar" style="width: 15%; background-color: #105fb0" [ngStyle]="{'width': epochData.base}">&nbsp;</div>
+            <div class="progress-bar" role="progressbar" style="width: 15%; background-color: var(--primary)" [ngStyle]="{'width': epochData.base}">&nbsp;</div>
           </div>
         </div>
         <div class="item" *ngIf="showHalving">

frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss

@@ -79,12 +79,12 @@
 }
 
 .card {
-  background-color: #1d1f31;
+  background-color: var(--bg);
   height: 100%;
 }
 
 .card-title {
-  color: #4a68b9;
+  color: var(--title-fg);
   font-size: 1rem;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -94,7 +94,7 @@
 .progress {
   display: inline-flex;
   width: 100%;
-  background-color: #2d3348;
+  background-color: var(--secondary);
   height: 1.1rem;
   max-width: 180px;
 }

frontend/src/app/components/difficulty/difficulty.component.scss

@@ -10,7 +10,7 @@
   justify-content: space-around;
   height: 50.5px;
   .shared-block {
-    color: #ffffff66;
+    color: var(--transparent-fg);
     font-size: 12px;
   }
   .item {
@@ -91,19 +91,19 @@
 }
 
 .card {
-  background-color: #1d1f31;
+  background-color: var(--bg);
   height: 100%;
 }
 
 .card-title {
-  color: #4a68b9;
+  color: var(--title-fg);
   font-size: 1rem;
 }
 
 .progress {
   display: inline-flex;
   width: 100%;
-  background-color: #2d3348;
+  background-color: var(--secondary);
   height: 1.1rem;
   max-width: 180px;
 }
@@ -177,10 +177,10 @@
 .epoch-blocks {
   display: block;
   width: 100%;
-  background: #2d3348;
+  background: var(--secondary);
 
   .rect {
-    fill: #2d3348;
+    fill: var(--secondary);
 
     &.behind {
       fill: #D81B60;
@@ -189,7 +189,7 @@
       fill: url(#diff-gradient);
     }
     &.ahead {
-      fill: #1a9436;
+      fill: var(--success);
     }
 
     &.hover {
@@ -223,12 +223,12 @@
     height: 100%;
   }
   .background {
-    background: linear-gradient(to right, #105fb0, #9339f4);
+    background: linear-gradient(to right, var(--primary), #9339f4);
     left: 0;
     right: 0;
   }
   .remaining {
-    background: #2d3348;
+    background: var(--secondary);
     right: 0;
   }
   .label {

frontend/src/app/components/difficulty/difficulty.component.ts

@@ -82,24 +82,24 @@ export class DifficultyComponent implements OnInit {
     .pipe(
       map(([blocks, da]) => {
         const maxHeight = blocks.reduce((max, block) => Math.max(max, block.height), 0);
-        let colorAdjustments = '#ffffff66';
+        let colorAdjustments = 'var(--transparent-fg)';
         if (da.difficultyChange > 0) {
-          colorAdjustments = '#3bcc49';
+          colorAdjustments = 'var(--green)';
         }
         if (da.difficultyChange < 0) {
-          colorAdjustments = '#dc3545';
+          colorAdjustments = 'var(--red)';
         }
 
-        let colorPreviousAdjustments = '#dc3545';
+        let colorPreviousAdjustments = 'var(--red)';
         if (da.previousRetarget) {
           if (da.previousRetarget >= 0) {
-            colorPreviousAdjustments = '#3bcc49';
+            colorPreviousAdjustments = 'var(--green)';
           }
           if (da.previousRetarget === 0) {
-            colorPreviousAdjustments = '#ffffff66';
+            colorPreviousAdjustments = 'var(--transparent-fg)';
           }
         } else {
-          colorPreviousAdjustments = '#ffffff66';
+          colorPreviousAdjustments = 'var(--transparent-fg)';
         }
 
         const blocksUntilHalving = 210000 - (maxHeight % 210000);

frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts

@@ -128,7 +128,7 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges, OnDestr
         splitLine: {
           lineStyle: {
             type: 'dotted',
-            color: '#ffffff66',
+            color: 'var(--transparent-fg)',
             opacity: 0.25,
           }
         },

frontend/src/app/components/fees-box/fees-box.component.scss

@@ -1,5 +1,5 @@
 .card-title {
-  color: #4a68b9;
+  color: var(--title-fg);
   font-size: 10px;
   margin-bottom: 4px;
   font-size: 1rem;
@@ -36,7 +36,7 @@
       margin-bottom: 0;
     }
     .card-text span {
-      color: #ffffff66;
+      color: var(--transparent-fg);
       font-size: 12px;
       top: 0px;
     }
@@ -79,6 +79,7 @@
   display: flex;
   flex-direction: row;
   transition: background-color 1s;
+  color: var(--color-fg);
   &.priority {
     @media (767px < width < 992px), (width < 576px) {
       width: 100%;

frontend/src/app/components/fees-box/fees-box.component.ts

@@ -1,9 +1,10 @@
-import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy, OnDestroy, ChangeDetectorRef } from '@angular/core';
 import { StateService } from '../../services/state.service';
-import { Observable, combineLatest } from 'rxjs';
+import { Observable, combineLatest, Subscription } from 'rxjs';
 import { Recommendedfees } from '../../interfaces/websocket.interface';
-import { feeLevels, mempoolFeeColors } from '../../app.constants';
+import { feeLevels } from '../../app.constants';
 import { map, startWith, tap } from 'rxjs/operators';
+import { ThemeService } from '../../services/theme.service';
 
 @Component({
   selector: 'app-fees-box',
@@ -11,14 +12,18 @@ import { map, startWith, tap } from 'rxjs/operators';
   styleUrls: ['./fees-box.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FeesBoxComponent implements OnInit {
+export class FeesBoxComponent implements OnInit, OnDestroy {
   isLoading$: Observable<boolean>;
   recommendedFees$: Observable<Recommendedfees>;
+  themeSubscription: Subscription;
   gradient = 'linear-gradient(to right, #2e324e, #2e324e)';
   noPriority = '#2e324e';
+  fees: Recommendedfees;
 
   constructor(
-    private stateService: StateService
+    private stateService: StateService,
+    private themeService: ThemeService,
+    private cd: ChangeDetectorRef,
   ) { }
 
   ngOnInit(): void {
@@ -31,18 +36,32 @@ export class FeesBoxComponent implements OnInit {
     this.recommendedFees$ = this.stateService.recommendedFees$
       .pipe(
         tap((fees) => {
-          let feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => fees.minimumFee >= feeLvl);
+          this.fees = fees;
-          feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex;
+          this.setFeeGradient();
-          const startColor = '#' + (mempoolFeeColors[feeLevelIndex - 1] || mempoolFeeColors[mempoolFeeColors.length - 1]);
-
-          feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => fees.fastestFee >= feeLvl);
-          feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex;
-          const endColor = '#' + (mempoolFeeColors[feeLevelIndex - 1] || mempoolFeeColors[mempoolFeeColors.length - 1]);
-
-          this.gradient = `linear-gradient(to right, ${startColor}, ${endColor})`;
-          this.noPriority = startColor;
         }
       )
     );
+    this.themeSubscription = this.themeService.themeChanged$.subscribe(() => {
+      this.setFeeGradient();
+    })
+  }
+
+  setFeeGradient() {
+    let feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => this.fees.minimumFee >= feeLvl);
+    feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex;
+    const startColor = '#' + (this.themeService.mempoolFeeColors[feeLevelIndex - 1] || this.themeService.mempoolFeeColors[this.themeService.mempoolFeeColors.length - 1]);
+
+    feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => this.fees.fastestFee >= feeLvl);
+    feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex;
+    const endColor = '#' + (this.themeService.mempoolFeeColors[feeLevelIndex - 1] || this.themeService.mempoolFeeColors[this.themeService.mempoolFeeColors.length - 1]);
+
+    this.gradient = `linear-gradient(to right, ${startColor}, ${endColor})`;
+    this.noPriority = startColor;
+
+    this.cd.markForCheck();
+  }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
   }
 }

frontend/src/app/components/footer/footer.component.scss

@@ -3,7 +3,7 @@
   bottom: 0;
   width: 100%;
   height: 60px;
-  background-color: #1d1f31;
+  background-color: var(--bg);
   box-shadow: 15px 15px 15px 15px #000;
   z-index: 10;
 
@@ -40,16 +40,8 @@
   }
 }
 
-.txPerSecond {
-  color: #4a9ff4;
-}
-
 .mempoolSize {
-  color: #4a68b9;
+  color: var(--title-fg);
-}
-
-.unconfirmedTx {
-  color: #f14d80;
 }
 
 .info-block {
@@ -61,7 +53,7 @@
 .progress {
   display: inline-flex;
   width: 160px;
-  background-color: #2d3348;
+  background-color: var(--secondary);
   height: 1.1rem;
 }
 

frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss

@@ -94,12 +94,12 @@
     }
     .card-title {
       font-size: 1rem;
-      color: #4a68b9;
+      color: var(--title-fg);
     }
     .card-text {
       font-size: 18px;
       span {
-        color: #ffffff66;
+        color: var(--transparent-fg);
         font-size: 12px;
       }
     }

frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts

@@ -242,7 +242,7 @@ export class HashrateChartComponent implements OnInit {
         borderRadius: 4,
         shadowColor: 'rgba(0, 0, 0, 0.5)',
         textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
           align: 'left',
         },
         borderColor: '#000',
@@ -354,7 +354,7 @@ export class HashrateChartComponent implements OnInit {
           splitLine: {
             lineStyle: {
               type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 0.25,
             }
           },
@@ -472,7 +472,7 @@ export class HashrateChartComponent implements OnInit {
     const now = new Date();
     // @ts-ignore
     this.chartOptions.grid.bottom = 30;
-    this.chartOptions.backgroundColor = '#11131f';
+    this.chartOptions.backgroundColor = 'var(--active-bg)';
     this.chartInstance.setOption(this.chartOptions);
     download(this.chartInstance.getDataURL({
       pixelRatio: 2,

frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts

@@ -225,7 +225,7 @@ export class HashrateChartPoolsComponent implements OnInit {
         borderRadius: 4,
         shadowColor: 'rgba(0, 0, 0, 0.5)',
         textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
           align: 'left',
         },
         borderColor: '#000',
@@ -308,7 +308,7 @@ export class HashrateChartPoolsComponent implements OnInit {
     const now = new Date();
     // @ts-ignore
     this.chartOptions.grid.bottom = 30;
-    this.chartOptions.backgroundColor = '#11131f';
+    this.chartOptions.backgroundColor = 'var(--active-bg)';
     this.chartInstance.setOption(this.chartOptions);
     download(this.chartInstance.getDataURL({
       pixelRatio: 2,

frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts

@@ -272,7 +272,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
         splitLine: {
           lineStyle: {
             type: 'dotted',
-            color: '#ffffff66',
+            color: 'var(--transparent-fg)',
             opacity: 0.25,
           }
         }
@@ -332,7 +332,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
     const now = new Date();
     // @ts-ignore
     this.mempoolStatsChartOption.grid.height = prevHeight + 20;
-    this.mempoolStatsChartOption.backgroundColor = '#11131f';
+    this.mempoolStatsChartOption.backgroundColor = 'var(--active-bg)';
     this.chartInstance.setOption(this.mempoolStatsChartOption);
     download(this.chartInstance.getDataURL({
       pixelRatio: 2,

frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss

@@ -7,7 +7,7 @@
 }
 
 li.nav-item.active {
-  background-color: #653b9c;
+  background-color: var(--tertiary);
 }
 
 fa-icon {
@@ -47,7 +47,7 @@ li.nav-item {
 }
 
 .navbar-nav {
-  background: #212121;
+  background: var(--navbar-bg);
   bottom: 0;
   box-shadow: 0px 0px 15px 0px #000;
   flex-direction: row;
@@ -112,23 +112,23 @@ nav {
 }
 
 .mainnet.active {
-  background-color: #653b9c;
+  background-color: var(--tertiary);
 }
 
 .liquid.active {
-  background-color: #116761;
+  background-color: var(--liquid);
 }
 
 .liquidtestnet.active {
-  background-color: #494a4a;
+  background-color: var(--liquidtestnet);
 }
 
 .testnet.active {
-  background-color: #1d486f;
+  background-color: var(--testnet);
 }
 
 .signet.active {
-  background-color: #6f1d5d;
+  background-color: var(--signet);
 }
 
 .dropdown-divider {

frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.html

@@ -9,7 +9,7 @@
 
   <div class="item">
     <a class="title-link" [routerLink]="['/audit/wallet/utxos' | relativeUrl]" [fragment]="'expired'">
-      <h5 class="card-title"><ng-container i18n="liquid.total-expired">Total Expired</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
+      <h5 class="card-title"><ng-container i18n="liquid.total-expired">Total Expired</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: var(--title-fg)"></fa-icon></h5>
     </a>
     <div *ngIf="(stats$ | async) as expiredStats; else loadingData" class="card-text">
       <div class="fee-text" i18n-ngbTooltip="liquid.expired-utxos" ngbTooltip="Total amount of BTC held in Federation UTXOs that have expired timelocks" placement="top">{{ (+expiredStats.all.total) / 100000000 | number: '1.5-5' }} <span style="color: #b86d12;">BTC</span></div>

frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.scss

@@ -14,7 +14,7 @@
     }
 
     .card-title {
-      color: #4a68b9;
+      color: var(--title-fg);
       font-size: 10px;
       margin-bottom: 4px;  
       font-size: 1rem;

frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss

@@ -33,7 +33,7 @@ tr, td, th {
 }
 
 .progress {
-  background-color: #2d3348;
+  background-color: var(--secondary);
 }
 
 .address {

frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html

@@ -2,7 +2,7 @@
   <div class="fee-estimation-container">
     <div class="item">
       <a class="title-link" [routerLink]="['/audit/wallet/addresses' | relativeUrl]">
-        <h5 class="card-title"><ng-container i18n="liquid.federation-wallet">Liquid Federation Wallet</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
+        <h5 class="card-title"><ng-container i18n="liquid.federation-wallet">Liquid Federation Wallet</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: var(--title-fg)"></fa-icon></h5>
       </a>
       <div class="card-text">
         <div class="fee-text">{{ federationWalletStats.address_count }} <span i18n="shared.addresses">addresses</span></div>
@@ -16,7 +16,7 @@
   <div class="fee-estimation-container loading-container">
     <div class="item">
       <a class="title-link" [routerLink]="['/audit/wallet/addresses' | relativeUrl]">
-        <h5 class="card-title"><ng-container i18n="liquid.federation-wallet">Liquid Federation Wallet</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
+        <h5 class="card-title"><ng-container i18n="liquid.federation-wallet">Liquid Federation Wallet</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: var(--title-fg)"></fa-icon></h5>
       </a>
       <div class="card-text">
         <div class="skeleton-loader"></div>

frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.scss

@@ -15,7 +15,7 @@
 
     .card-title {
       margin: 0;
-      color: #4a68b9;
+      color: var(--title-fg);
       font-size: 10px;
       font-size: 1rem;
       white-space: nowrap;

frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss

@@ -24,7 +24,7 @@ tr, td, th {
 }
 
 .progress {
-  background-color: #2d3348;
+  background-color: var(--secondary);
 }
 
 .txid {

frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss

@@ -27,7 +27,7 @@ tr, td, th {
 }
 
 .progress {
-  background-color: #2d3348;
+  background-color: var(--secondary);
 }
 
 .transaction {

frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html

@@ -2,7 +2,7 @@
   <div class="fee-estimation-container">
     <div class="item">
       <a class="title-link" [routerLink]="['/audit/pegs' | relativeUrl]">
-        <h5 class="card-title"><ng-container i18n="liquid.recent-pegs">Recent Peg-In / Out's</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
+        <h5 class="card-title"><ng-container i18n="liquid.recent-pegs">Recent Peg-In / Out's</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: var(--title-fg)"></fa-icon></h5>
       </a>
     </div>
   </div>
@@ -26,7 +26,7 @@
   <div class="fee-estimation-container loading-container">
     <div class="item">
       <a class="title-link" [routerLink]="['/audit/pegs' | relativeUrl]">
-        <h5 class="card-title"><ng-container i18n="liquid.recent-pegs">Recent Peg-In / Out's</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
+        <h5 class="card-title"><ng-container i18n="liquid.recent-pegs">Recent Peg-In / Out's</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: var(--title-fg)"></fa-icon></h5>
       </a>
     </div>
   </div>

frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss

@@ -15,7 +15,7 @@
 
     .card-title {
       margin: 0;
-      color: #4a68b9;
+      color: var(--title-fg);
       font-size: 10px;
       font-size: 1rem;
       white-space: nowrap;

frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.html

@@ -23,7 +23,7 @@
 
   <div class="item">
     <!-- <a class="title-link" [routerLink]="['/audit/emergency-spends' | relativeUrl]">
-      <h5 class="card-title"><ng-container i18n="liquid.forfeited-utxos">Forfeited UTXOs</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
+      <h5 class="card-title"><ng-container i18n="liquid.forfeited-utxos">Forfeited UTXOs</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: var(--title-fg)"></fa-icon></h5>
     </a> -->
     <h5 class="card-title" i18n="liquid.emergency-keys">Emergency Keys</h5>
     <div *ngIf="(emergencyUtxosStats$ | async) as emergencyUtxosStats; else loadingData" class="card-text">

frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.scss

@@ -22,7 +22,7 @@
 
     .card-title {
       margin-bottom: 4px;
-      color: #4a68b9;
+      color: var(--title-fg);
       font-size: 10px;
       font-size: 1rem;
       white-space: nowrap;

frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts

@@ -141,7 +141,7 @@ export class ReservesRatioComponent implements OnInit, OnChanges {
             show: true,
             offsetCenter: [0, '-127%'],
             fontSize: 18,
-            color: '#4a68b9',
+            color: 'var(--title-fg)',
             fontFamily: 'inherit',
             fontWeight: 500,
           },

frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.scss

@@ -13,7 +13,7 @@
     }
 
     .card-title {
-      color: #4a68b9;
+      color: var(--title-fg);
       font-size: 10px;
       margin-bottom: 4px;  
       font-size: 1rem;

frontend/src/app/components/master-page-preview/master-page-preview.component.scss

@@ -18,7 +18,7 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    background: #11131f;
+    background: var(--active-bg);
     text-align: start;
     font-size: 1.8em;
   }

frontend/src/app/components/master-page/master-page.component.scss

@@ -7,7 +7,7 @@
 }
 
 li.nav-item.active {
-  background-color: #653b9c;
+  background-color: var(--tertiary);
 }
 
 fa-icon {
@@ -58,7 +58,7 @@ li.nav-item {
 }
 
 .navbar-nav {
-  background: #212121;
+  background: var(--navbar-bg);
   bottom: 0;
   box-shadow: 0px 0px 15px 0px #000;
   flex-direction: row;
@@ -139,23 +139,23 @@ nav {
 }
 
 .mainnet.active {
-  background-color: #653b9c;
+  background-color: var(--tertiary);
 }
 
 .liquid.active {
-  background-color: #116761;
+  background-color: var(--liquid);
 }
 
 .liquidtestnet.active {
-  background-color: #494a4a;
+  background-color: var(--liquidtestnet);
 }
 
 .testnet.active {
-  background-color: #1d486f;
+  background-color: var(--testnet);
 }
 
 .signet.active {
-  background-color: #6f1d5d;
+  background-color: var(--signet);
 }
 
 .dropdown-divider {

frontend/src/app/components/mempool-block/mempool-block.component.scss

@@ -1,5 +1,5 @@
 .progress {
-  background-color: #2d3348;
+  background-color: var(--secondary);
   position: relative;
   top: 5px;
 }

frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss

@@ -106,7 +106,7 @@
 }
 
 .black-background {
-  background-color: #11131f;
+  background-color: var(--active-bg);
   z-index: 100;
   position: relative;
 }

frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts

@@ -4,12 +4,13 @@ import { MempoolBlock } from '../../interfaces/websocket.interface';
 import { StateService } from '../../services/state.service';
 import { Router } from '@angular/router';
 import { map, switchMap, tap } from 'rxjs/operators';
-import { feeLevels, mempoolFeeColors } from '../../app.constants';
+import { feeLevels } from '../../app.constants';
 import { specialBlocks } from '../../app.constants';
 import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
 import { Location } from '@angular/common';
 import { DifficultyAdjustment, MempoolPosition } from '../../interfaces/node-api.interface';
 import { animate, style, transition, trigger } from '@angular/animations';
+import { ThemeService } from '../../services/theme.service';
 
 @Component({
   selector: 'app-mempool-blocks',
@@ -84,6 +85,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
   constructor(
     private router: Router,
     public stateService: StateService,
+    private themeService: ThemeService,
     private cd: ChangeDetectorRef,
     private relativeUrlPipe: RelativeUrlPipe,
     private location: Location,
@@ -354,7 +356,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
     trimmedFeeRange.forEach((fee: number) => {
       let feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => fee >= feeLvl);
       feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex;
-      gradientColors.push(mempoolFeeColors[feeLevelIndex - 1] || mempoolFeeColors[mempoolFeeColors.length - 1]);
+      gradientColors.push(this.themeService.mempoolFeeColors[feeLevelIndex - 1] || this.themeService.mempoolFeeColors[this.themeService.mempoolFeeColors.length - 1]);
     });
 
     gradientColors.forEach((color, i, gc) => {

frontend/src/app/components/mempool-graph/mempool-graph.component.ts

@@ -432,7 +432,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
         splitLine: {
           lineStyle: {
             type: 'dotted',
-            color: '#ffffff66',
+            color: 'var(--transparent-fg)',
             opacity: 0.25,
           }
         }
@@ -500,7 +500,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
     const now = new Date();
     // @ts-ignore
     this.mempoolVsizeFeesOptions.grid.height = prevHeight + 20;
-    this.mempoolVsizeFeesOptions.backgroundColor = '#11131f';
+    this.mempoolVsizeFeesOptions.backgroundColor = 'var(--active-bg)';
     this.chartInstance.setOption(this.mempoolVsizeFeesOptions);
     download(this.chartInstance.getDataURL({
       pixelRatio: 2,

frontend/src/app/components/menu/menu.component.scss

@@ -34,7 +34,7 @@
 
 .sidenav.open {
   display: block;
-  background-color: #1d1f31;
+  background-color: var(--bg);
 }
 
 :host-context(.ltr-layout) .sidenav.open {
@@ -56,7 +56,7 @@
 .sidenav nav {
   width: 100%;
   height: calc(100vh - 65px);
-  background-color: #1d1f31;
+  background-color: var(--bg);
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 20px;
@@ -75,7 +75,7 @@
 }
 
 .badge-og {
-  background-color: #4a68b9;
+  background-color: var(--title-fg);
 }
 
 .badge-pleb {
@@ -87,7 +87,7 @@
 }
 
 .badge-whale {
-  background-color: #653b9c;
+  background-color: var(--tertiary);
 }
 
 .badge-silver {
@@ -99,5 +99,5 @@
 }
 
 .badge-platinum {
-  background-color: #653b9c;
+  background-color: var(--tertiary);
 }

frontend/src/app/components/mining-dashboard/mining-dashboard.component.html

@@ -55,7 +55,7 @@
           <a class="title-link" href="" [routerLink]="['/blocks' | relativeUrl]">
             <h5 class="card-title d-inline" i18n="dashboard.recent-blocks">Recent Blocks</h5>
             <span>&nbsp;</span>
-            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
+            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
           </a>
           <app-blocks-list [attr.data-cy]="'latest-blocks'" [widget]=true></app-blocks-list>
         </div>
@@ -69,7 +69,7 @@
           <a class="title-link" href="" [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]">
             <h5 class="card-title d-inline" i18n="dashboard.adjustments">Adjustments</h5>
             <span>&nbsp;</span>
-            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
+            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
           </a>
           <app-difficulty-adjustments-table [attr.data-cy]="'difficulty-adjustments-table'"></app-difficulty-adjustments-table>
         </div>

frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss

@@ -7,7 +7,7 @@
 }
 
 .card {
-  background-color: #1d1f31;
+  background-color: var(--bg);
 }
 
 .graph-card {
@@ -32,10 +32,10 @@
 
 .card-title {
   font-size: 1rem;
-  color: #4a68b9;
+  color: var(--title-fg);
 }
 .card-title > a {
-  color: #4a68b9;
+  color: var(--title-fg);
 }
 
 .card-body.pool-ranking {

frontend/src/app/components/pool-ranking/pool-ranking.component.scss

@@ -99,7 +99,7 @@
     }
     .card-title {
       font-size: 1rem;
-      color: #4a68b9;
+      color: var(--title-fg);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -107,7 +107,7 @@
     .card-text {
       font-size: 18px;
       span {
-        color: #ffffff66;
+        color: var(--transparent-fg);
         font-size: 12px;
       }
     }

frontend/src/app/components/pool-ranking/pool-ranking.component.ts

@@ -146,7 +146,7 @@ export class PoolRankingComponent implements OnInit {
         name: pool.name + ((isMobile() || this.widget) ? `` : ` (${pool.share}%)`),
         label: {
           overflow: 'none',
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
           alignTo: 'edge',
           edgeDistance: edgeDistance,
         },
@@ -156,7 +156,7 @@ export class PoolRankingComponent implements OnInit {
           borderRadius: 4,
           shadowColor: 'rgba(0, 0, 0, 0.5)',
           textStyle: {
-            color: '#b1b1b1',
+            color: 'var(--tooltip-grey)',
           },
           borderColor: '#000',
           formatter: () => {
@@ -186,7 +186,7 @@ export class PoolRankingComponent implements OnInit {
       name:  $localize`Other (${percentage})`,
       label: {
         overflow: 'none',
-        color: '#b1b1b1',
+        color: 'var(--tooltip-grey)',
         alignTo: 'edge',
         edgeDistance: edgeDistance
       },
@@ -195,7 +195,7 @@ export class PoolRankingComponent implements OnInit {
         borderRadius: 4,
         shadowColor: 'rgba(0, 0, 0, 0.5)',
         textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
         },
         borderColor: '#000',
         formatter: () => {
@@ -306,7 +306,7 @@ export class PoolRankingComponent implements OnInit {
 
   onSaveChart() {
     const now = new Date();
-    this.chartOptions.backgroundColor = '#11131f';
+    this.chartOptions.backgroundColor = 'var(--active-bg)';
     this.chartInstance.setOption(this.chartOptions);
     download(this.chartInstance.getDataURL({
       pixelRatio: 2,

frontend/src/app/components/pool/pool-preview.component.scss

@@ -17,7 +17,7 @@
     justify-content: space-between;
     width: 100%;
     margin-left: 15px;
-    background: #181b2d;
+    background: var(--stat-box-bg);
     padding: 0.75rem;
     width: 0;
     flex-grow: 1;
@@ -43,7 +43,7 @@
 .chart {
   width: 100%;
   height: 315px;
-  background: #181b2d;
+  background: var(--stat-box-bg);
 }
 
 .row {
@@ -65,7 +65,7 @@
     position: absolute;
     right: 0;
     top: 0;
-    background: #24273e;
+    background: var(--box-bg);
 
     &.noimg {
       opacity: 0;

frontend/src/app/components/pool/pool.component.scss

@@ -88,7 +88,7 @@ div.scrollable {
 }
 
 .progress {
-  background-color: #2d3348;
+  background-color: var(--secondary);
 }
 
 .coinbase {
@@ -190,7 +190,7 @@ div.scrollable {
 }
 
 .data-title {
-  color: #4a68b9;
+  color: var(--title-fg);
   font-size: 14px;
 }
 

frontend/src/app/components/pool/pool.component.ts

@@ -175,7 +175,7 @@ export class PoolComponent implements OnInit {
         borderRadius: 4,
         shadowColor: 'rgba(0, 0, 0, 0.5)',
         textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
           align: 'left',
         },
         borderColor: '#000',

frontend/src/app/components/rbf-list/rbf-list.component.scss

@@ -25,7 +25,7 @@
   }
 
   .timeline-wrapper.mined {
-    border: solid 4px #1a9436;
+    border: solid 4px var(--success);
   }
 
   .no-replacements {

frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss

@@ -15,12 +15,12 @@
 
   &::before {
     left: 0;
-    background: linear-gradient(to right, #24273e, #24273e, transparent);
+    background: linear-gradient(to right, var(--box-bg), var(--box-bg), transparent);
   }
 
   &::after {
     right: 0;
-    background: linear-gradient(to left, #24273e, #24273e, transparent);
+    background: linear-gradient(to left, var(--box-bg), var(--box-bg), transparent);
   }
 
   .timeline-wrapper {
@@ -45,7 +45,7 @@
       width: 100%;
       height: 70px;
       top: -70px;
-      background: linear-gradient(to bottom, rgba(36, 39, 62, 0) 0%, rgba(36, 39, 62, 1) 100%);
+      background: linear-gradient(to bottom, var(--fade-out-box-bg-start), var(--fade-out-box-bg-end));
       z-index: 1;
     }
   }
@@ -101,7 +101,7 @@
       right: -5px;
       top: 0;
       transform: translateY(-50%);
-      background: #105fb0;
+      background: var(--primary);
       border-radius: 5px;
 
       &.left {
@@ -112,7 +112,7 @@
       }
 
       &.fullrbf {
-        background: #1bd8f4;
+        background: var(--info);
       }
     }
     &.first-node {
@@ -165,20 +165,20 @@
 
       &.mined {
         .shape-border {
-          background: #1a9436;
+          background: var(--success);
         }
       }
 
       .shape-border:hover {
         padding: 0px;
         .shape {
-          background: #1bd8f4;
+          background: var(--info);
         }
       }
 
       &.selected.mined {
         .shape-border {
-          background: #1a9436;
+          background: var(--success);
           height: calc(1em + 16px);
           width: calc(1em + 16px);
 
@@ -190,7 +190,7 @@
             padding: 4px;
             .shape {
               border-width: 1px;
-              border-color: #1bd8f4
+              border-color: var(--info)
             }
           }
         }
@@ -207,9 +207,9 @@
         width: 20px;
         height: 108px;
         bottom: 50%;
-        border-right: solid 10px #105fb0;
+        border-right: solid 10px var(--primary);
         &.fullrbf {
-          border-right: solid 10px #1bd8f4;
+          border-right: solid 10px var(--info);
         }
         &.last-pipe {
           height: 150px;
@@ -218,10 +218,10 @@
       }
 
       .corner {
-        border-bottom: solid 10px #105fb0;
+        border-bottom: solid 10px var(--primary);
         border-bottom-right-radius: 10px;
         &.fullrbf {
-          border-bottom: solid 10px #1bd8f4;
+          border-bottom: solid 10px var(--info);
         }
       }
     }

frontend/src/app/components/reward-stats/reward-stats.component.scss

@@ -1,5 +1,5 @@
 .card-title {
-  color: #4a68b9;
+  color: var(--title-fg);
   font-size: 10px;
   margin-bottom: 4px;  
   font-size: 1rem;
@@ -50,7 +50,7 @@
       margin-bottom: 0;
     }
     .card-text span {
-      color: #ffffff66;
+      color: var(--transparent-fg);
       font-size: 12px;
       top: 0px;
     }

frontend/src/app/components/search-form/search-results/search-results.component.scss

@@ -1,5 +1,5 @@
 .card-title {
-  color: #4a68b9;
+  color: var(--title-fg);
   font-size: 10px;
   margin-bottom: 4px;
   font-size: 1rem;

frontend/src/app/components/start/start.component.scss

@@ -32,7 +32,7 @@
     cursor: pointer;
     opacity: 0.8;
     transition: opacity 500ms;
-    background: radial-gradient(#1d1f31 0%, transparent 50%);
+    background: radial-gradient(var(--bg) 0%, transparent 50%);
 
     &:hover {
       opacity: 1;

frontend/src/app/components/statistics/statistics.component.scss

@@ -117,7 +117,7 @@
   }
   .inactive {
     .square {
-      background-color: #ffffff66 !important;
+      background-color: var(--transparent-fg) !important;
     }
     .fee-text {
       text-decoration: line-through;

frontend/src/app/components/theme-selector/theme-selector.component.html

@@ -0,0 +1,6 @@
+<div [formGroup]="themeForm" class="text-small text-center">
+    <select formControlName="theme" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 150px;" (change)="changeTheme()">
+        <option value="default" i18n="theme.mempool-theme">Mempool Theme</option>
+        <option value="contrast" i18n="theme.high-contrast">High Contrast</option>
+    </select>
+</div>

frontend/src/app/components/theme-selector/theme-selector.component.ts

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { ThemeService } from '../../services/theme.service';
+
+@Component({
+  selector: 'app-theme-selector',
+  templateUrl: './theme-selector.component.html',
+  styleUrls: ['./theme-selector.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ThemeSelectorComponent implements OnInit {
+  themeForm: UntypedFormGroup;
+  themes = ['default', 'contrast'];
+
+  constructor(
+    private formBuilder: UntypedFormBuilder,
+    private themeService: ThemeService,
+  ) { }
+
+  ngOnInit() {
+    this.themeForm = this.formBuilder.group({
+      theme: ['default']
+    });
+    this.themeForm.get('theme')?.setValue(this.themeService.theme);
+  }
+
+  changeTheme() {
+    const newTheme = this.themeForm.get('theme')?.value;
+    this.themeService.apply(newTheme);
+  }
+}

frontend/src/app/components/transaction/transaction-preview.component.scss

@@ -54,7 +54,7 @@
   }
 
   .label {
-    color: #ffffff66;
+    color: var(--transparent-fg);
   }
 
   &.pair > *:first-child {
@@ -79,7 +79,7 @@
 
 .graph-wrapper {
   position: relative;
-  background: #181b2d;
+  background: var(--stat-box-bg);
   padding: 10px 0;
   padding-bottom: 0;
 
@@ -113,7 +113,7 @@
       max-width: 100%;
       margin: auto;
       table-layout: auto;
-      background: #2d3348af;
+      background: var(--secondary)af;
       border-top-left-radius: 5px;
       border-top-right-radius: 5px;
 

frontend/src/app/components/transaction/transaction.component.scss

@@ -61,7 +61,7 @@
 }
 
 .badge.badge-accelerated {
-  background-color: #653b9c;
+  background-color: var(--tertiary);
   color: white;
 }
 
@@ -70,11 +70,11 @@
 }
 
 .arrow-green {
-	color: #1a9436;
+	color: var(--success);
 }
 
 .arrow-red {
-	color: #dc3545;
+	color: var(--red);
 }
 
 .container-xl {
@@ -100,7 +100,7 @@
 .graph-container {
   position: relative;
   width: 100%;
-  background: #181b2d;
+  background: var(--stat-box-bg);
   padding: 10px 0;
   padding-bottom: 0;
 }
@@ -256,7 +256,7 @@
 }
 
 .blink-bg {
-  color: #fff;
+  color: var(--fg);
   background: repeating-linear-gradient(#daad0a 0%, #daad0a 5%, #987805 100%) !important;
   animation: shadowyBackground 1s infinite;
   box-shadow: 0px 0px 20px rgba(#eba814, 1);
@@ -279,7 +279,7 @@
   display: flex !important;
   align-self: auto;
   margin-left: auto;
-  background-color: #653b9c;
+  background-color: var(--tertiary);
   @media (max-width: 849px) {
     margin-left: 5px;
   }
@@ -302,7 +302,7 @@
   align-self: auto;
   margin-top: 3px;
   margin-left: auto;
-  background-color: #653b9c;
+  background-color: var(--tertiary);
   @media (max-width: 995px) {
     margin-left: 0px;
   }

frontend/src/app/components/transactions-list/transactions-list.component.scss

@@ -13,15 +13,15 @@
 	}
 }
 .green {
-  color:#28a745;
+  color: var(--green);
 }
 
 .red {
-  color:#dc3545;
+  color: var(--red);
 }
 
 .grey {
-  color:#6c757d;
+  color: var(--grey);
 }
 
 .mobile-bottomcol {
@@ -69,7 +69,7 @@ td.amount.large {
 		text-align: right;
 	}
 	.sats {
-		color: #ffffff66;
+		color: var(--transparent-fg);
 		font-size: 11px;
 	}
 }
@@ -112,7 +112,7 @@ td.amount.large {
 		padding: 0.75rem;
 		font-size: 12px;
 		&:first-child {
-			color: #ffffff66;
+			color: var(--transparent-fg);
 			white-space: pre-wrap;
 			width: 150px;
 		}
@@ -138,7 +138,7 @@ h2 {
 }
 
 .highlight {
-	background-color: #181b2d;
+	background-color: var(--stat-box-bg);
 }
 
 .summary {
@@ -159,7 +159,7 @@ h2 {
 }
 
 .grey-info-text {
-	color:#6c757d;
+	color: var(--grey);
 	font-style: italic;
 	font-size: 12px;
 }

frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.scss

@@ -3,7 +3,7 @@
   background: rgba(#11131f, 0.95);
   border-radius: 4px;
   box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
-  color: #b1b1b1;
+  color: var(--tooltip-grey);
   padding: 10px 15px;
   text-align: left;
   pointer-events: none;

frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html

@@ -77,12 +77,12 @@
       <linearGradient id="input-highlight-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
       <stop offset="0%" [attr.stop-color]="gradient[0]" />
       <stop offset="2%" [attr.stop-color]="gradient[0]" />
-        <stop offset="30%" stop-color="#1bd8f4" />
+        <stop offset="30%" stop-color="var(--info)" />
         <stop offset="100%" [attr.stop-color]="gradient[1]" />
       </linearGradient>
       <linearGradient id="output-highlight-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
         <stop offset="0%" [attr.stop-color]="gradient[1]" />
-        <stop offset="70%" stop-color="#1bd8f4" />
+        <stop offset="70%" stop-color="var(--info)" />
         <stop offset="98%" [attr.stop-color]="gradient[0]" />
         <stop offset="100%" [attr.stop-color]="gradient[0]" />
       </linearGradient>

frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.scss

@@ -30,7 +30,7 @@
         stroke: url(#output-highlight-gradient);
       }
       &.zerovalue {
-        stroke: #1bd8f4;
+        stroke: var(--info);
       }
     }
   }

frontend/src/app/dashboard/dashboard.component.html

@@ -20,7 +20,7 @@
           <a class="title-link mb-0" style="margin-top: -2px" href="" [routerLink]="['/mempool-block/0' | relativeUrl]">
             <h5 class="card-title d-inline"><span>Mempool Goggles&trade;</span> : {{ goggleCycle[goggleIndex].name }}</h5>
             <span>&nbsp;</span>
-            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
+            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
           </a>
           <div class="quick-filter">
             <div class="btn-group btn-group-toggle">
@@ -64,7 +64,7 @@
           <a class="title-link" href="" [routerLink]="['/rbf' | relativeUrl]">
             <h5 class="card-title d-inline" i18n="dashboard.recent-rbf-replacements">Recent Replacements</h5>
             <span>&nbsp;</span>
-            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
+            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
           </a>
           <table class="table lastest-replacements-table">
             <thead>
@@ -98,7 +98,7 @@
             <a class="title-link" href="" [routerLink]="['/blocks' | relativeUrl]">
               <h5 class="card-title d-inline" i18n="dashboard.recent-blocks">Recent Blocks</h5>
               <span>&nbsp;</span>
-              <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
+              <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
             </a>
             <table class="table lastest-blocks-table">
               <thead>

frontend/src/app/dashboard/dashboard.component.scss

@@ -7,12 +7,12 @@
 }
 
 .card {
-  background-color: #1d1f31;
+  background-color: var(--bg);
   height: 100%;
 }
 
 .card-title {
-  color: #4a68b9;
+  color: var(--title-fg);
   font-size: 1rem;
 }
 
@@ -25,7 +25,7 @@
 .progress {
   display: inline-flex;
   width: 100%;
-  background-color: #2d3348;
+  background-color: var(--secondary);
   height: 1.1rem;
   max-width: 180px;
 }
@@ -101,7 +101,7 @@
     .card-text {
       font-size: 18px;
       span {
-        color: #ffffff66;
+        color: var(--transparent-fg);
         font-size: 12px;
       }
       .bitcoin-color {
@@ -399,11 +399,11 @@
 .goggle-badge {
   margin: 6px 5px 8px;
   background: none;
-  border: solid 2px #105fb0;
+  border: solid 2px var(--primary);
   cursor: pointer;
 
   &.active {
-    background: #105fb0;
+    background: var(--primary);
   }
 }
 
@@ -418,7 +418,7 @@
 }
 
 .card-liquid {
-  background-color: #1d1f31;
+  background-color: var(--bg);
   height: 418px;
   @media (min-width: 992px) {
     height: 512px;

frontend/src/app/docs/api-docs/api-docs-nav.component.scss

@@ -1,12 +1,12 @@
 p {
-  color: #4a68b9;
+  color: var(--title-fg);
   font-weight: 700;
   margin: 10px 0;
   margin: 15px 0 10px 0;
 }
 
 a {
-  color: #fff;
+  color: var(--fg);
   text-decoration: none;
   display: block;
   margin: 5px 0;
@@ -17,13 +17,13 @@ a {
   text-align: center;
   padding: 20px;
   margin: 20px 20px 20px 0;
-  background-color: #1d1f31;
+  background-color: var(--bg);
   border-radius: 12px;
 }
 
 #enterprise-cta-desktop p {
   margin: 0 auto 16px auto;
-  color: #fff;
+  color: var(--fg);
   font-weight: 400;
 }
 

frontend/src/app/docs/api-docs/api-docs.component.scss

@@ -17,7 +17,7 @@
 }
 
 code {
-  background-color: #1d1f31;
+  background-color: var(--bg);
   font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
 }
 
@@ -95,7 +95,7 @@ ul.no-bull.block-audit code{
 .nav-tabs .nav-link.active {
   border-bottom: 1px solid #fff;
   @media (min-width: 676px){
-    border-bottom: 1px solid #11131f;
+    border-bottom: 1px solid var(--active-bg);
   }
 }
 
@@ -113,7 +113,7 @@ ul.no-bull.block-audit code{
     padding: 0px;
   }
   .nav-tabs .nav-link.active {
-    border-bottom: 1px solid #11131f;
+    border-bottom: 1px solid var(--active-bg);
   }
   .subtitle {
     display: flex;
@@ -158,17 +158,17 @@ ul.no-bull.block-audit code{
   top: 80px;
   overflow-y: auto;
   height: calc(100vh - 75px);
-  scrollbar-color: #2d3348 #11131f;
+  scrollbar-color: var(--secondary) var(--active-bg);
   scrollbar-width: thin;
 }
 ::-webkit-scrollbar {
   width: 3px;
 }
 ::-webkit-scrollbar-track {
-  background: #11131f;
+  background: var(--active-bg);
 }
 ::-webkit-scrollbar-thumb {
-  background-color: #2d3348;
+  background-color: var(--secondary);
   border-radius: 5px;
   border: none;
 }
@@ -196,8 +196,8 @@ h3 {
 
 .endpoint-container .section-header {
   display: block;
-  background-color: #2d3348;
+  background-color: var(--secondary);
-  color: #1bd8f4;
+  color: var(--info);
   padding: 1rem 1.3rem 1rem 1.3rem;
   font-weight: bold;
   border-radius: 0.25rem;
@@ -211,8 +211,8 @@ h3 {
 }
 
 .endpoint-container .section-header span {
-  color: #fff;
+  color: var(--fg);
-  background-color: #653b9c;
+  background-color: var(--tertiary);
   font-size: 12px;
   text-transform: uppercase;
   font-weight: 400;
@@ -244,7 +244,7 @@ h3 {
 }
 
 #doc-nav-mobile > div {
-  background-color: #2d3348;
+  background-color: var(--secondary);
   z-index: 100;
   border-radius: 0 0 0.5rem 0.5rem;
   height: 55vh;
@@ -253,9 +253,9 @@ h3 {
 
 #doc-nav-mobile button {
   width: 100%;
-  background-color: #105fb0;
+  background-color: var(--primary);
-  color: #fff;
+  color: var(--fg);
-  border-color: #105fb0;
+  border-color: var(--primary);
   border-radius: 0.5rem 0.5rem 0 0;
 }
 
@@ -303,7 +303,7 @@ h3 {
 }
 
 #disclaimer {
-  background-color: #1d1f31;
+  background-color: var(--bg);
   padding: 24px;
   margin: 24px 0;
 }
@@ -318,7 +318,7 @@ h3 {
 
 #enterprise-cta-mobile {
   padding: 20px;
-  background-color: #1d1f31;
+  background-color: var(--bg);
   border-radius: 0.25rem;
   text-align: center;
   position: fixed;
@@ -343,8 +343,8 @@ h3 {
 }
 
 #enterprise-cta-mobile .btn-secondary:hover {
-  background-color: #2d3348;
+  background-color: var(--secondary);
-  border-color: #2d3348;
+  border-color: var(--secondary);
 }
 
 #enterprise-cta-mobile .no-line-break {
@@ -438,7 +438,7 @@ dl {
 
 dt {
   font-weight: bold;
-  color: #4a68b9;
+  color: var(--title-fg);
   padding: 5px 0;
 }
 
@@ -447,7 +447,7 @@ dd {
 
   & > dl {
     padding-left: 1em;
-    border-left: 2px solid #4a68b9;
+    border-left: 2px solid var(--title-fg);
     margin-left: 1em;
     margin-top: 5px;
   }

frontend/src/app/docs/code-template/code-template.component.scss

@@ -3,7 +3,7 @@
 }
 
 code {
-  background-color: #1d1f31;
+  background-color: var(--bg);
   font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
 }
 
@@ -25,7 +25,7 @@ li.nav-item {
 .nav-tabs .nav-link.active {
   border-bottom: 1px solid #fff;
   @media (min-width: 676px){
-    border-bottom: 1px solid #11131f;
+    border-bottom: 1px solid var(--active-bg);
   }
 }
 
@@ -43,7 +43,7 @@ li.nav-item {
     padding: 0px;
   }
   .nav-tabs .nav-link.active {
-    border-bottom: 1px solid #11131f;
+    border-bottom: 1px solid var(--active-bg);
   }
   .subtitle {
     display: flex;
@@ -87,7 +87,7 @@ pre {
   display: block;
   font-size: 87.5%;
   color: #f18920;
-  background-color: #1d1f31;
+  background-color: var(--bg);
   padding: 30px;
   code{
     background-color: transparent;

frontend/src/app/lightning/channel/channel-box/channel-box.component.scss

@@ -13,7 +13,7 @@
 }
 
 .shared-block {
-  color: #ffffff66;
+  color: var(--transparent-fg);
   font-size: 12px;
 }