From ee92f6639ad903d6fc7ee32d153522e42069c8f3 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Thu, 4 Apr 2024 15:36:24 +0900
Subject: [PATCH 01/13] convert to CSS variables

---
 frontend/src/app/app.module.ts                |   2 +
 .../components/amount/amount.component.scss   |   2 +-
 .../src/app/components/app/app.component.ts   |   2 +
 .../asset-group/asset-group.component.scss    |   2 +-
 .../assets-featured.component.scss            |   2 +-
 .../block-fee-rates-graph.component.ts        |   4 +-
 .../block-fees-graph.component.ts             |   4 +-
 .../block-health-graph.component.ts           |   4 +-
 .../block-overview-graph.component.scss       |   2 +-
 .../block-rewards-graph.component.ts          |   4 +-
 .../block-sizes-weights-graph.component.ts    |   6 +-
 .../app/components/block/block.component.scss |   2 +-
 .../blockchain-blocks.component.scss          |   2 +-
 .../blockchain-blocks.component.ts            |  14 +-
 .../blockchain/blockchain.component.scss      |   2 +-
 .../blocks-list/blocks-list.component.scss    |   2 +-
 .../difficulty/difficulty.component.html      |  41 ++++
 .../difficulty/difficulty.component.scss      |   6 +-
 .../difficulty/difficulty.component.ts        |  14 +-
 .../fee-distribution-graph.component.ts       |   2 +-
 .../fees-box/fees-box.component.scss          |   2 +-
 .../components/footer/footer.component.scss   |   4 +-
 .../hashrate-chart.component.scss             |   2 +-
 .../hashrate-chart.component.ts               |   4 +-
 .../hashrate-chart-pools.component.ts         |   2 +-
 .../incoming-transactions-graph.component.ts  |   4 +-
 .../lbtc-pegs-graph.component.ts              |   8 +-
 .../liquid-master-page.component.scss         |  12 +-
 .../master-page-preview.component.scss        |   2 +-
 .../master-page/master-page.component.scss    |  12 +-
 .../mempool-block.component.scss              |   2 +-
 .../mempool-blocks.component.scss             |   2 +-
 .../mempool-graph/mempool-graph.component.ts  |   4 +-
 .../mining-dashboard.component.scss           |   2 +-
 .../pool-ranking/pool-ranking.component.scss  |   2 +-
 .../pool-ranking/pool-ranking.component.ts    |   2 +-
 .../pool/pool-preview.component.scss          |   6 +-
 .../app/components/pool/pool.component.scss   |   2 +-
 .../reward-stats/reward-stats.component.scss  |   2 +-
 .../statistics/statistics.component.scss      |   2 +-
 .../transaction-preview.component.scss        |   4 +-
 .../transaction/transaction.component.scss    |   6 +-
 .../transactions-list.component.scss          |   8 +-
 .../tx-bowtie-graph.component.html            |   4 +-
 .../tx-bowtie-graph.component.scss            |   2 +-
 .../app/dashboard/dashboard.component.scss    |   6 +-
 .../app/docs/api-docs/api-docs.component.scss |  26 +--
 .../code-template.component.scss              |   8 +-
 .../channel-box/channel-box.component.scss    |   2 +-
 .../channel/channel-preview.component.scss    |   4 +-
 .../lightning/channel/channel.component.html  |   4 +-
 .../channels-list.component.scss              |   2 +-
 .../channels-statistics.component.html        |   2 +-
 .../channels-statistics.component.scss        |   4 +-
 .../group/group-preview.component.scss        |   4 +-
 .../app/lightning/group/group.component.html  |   4 +-
 .../lightning-dashboard.component.scss        |   2 +-
 .../node-fee-chart.component.ts               |   2 +-
 .../node-statistics-chart.component.ts        |   4 +-
 .../node-statistics.component.scss            |   2 +-
 .../node/node-preview.component.scss          |   2 +-
 .../app/lightning/node/node.component.html    |   4 +-
 .../app/lightning/node/node.component.scss    |   2 +-
 .../nodes-channels-map.component.html         |   2 +-
 .../nodes-map/nodes-map.component.html        |   2 +-
 .../nodes-networks-chart.component.scss       |   2 +-
 .../nodes-networks-chart.component.ts         |   6 +-
 .../nodes-per-country-chart.component.html    |   2 +-
 .../nodes-per-country-chart.component.scss    |   2 +-
 .../nodes-per-country-chart.component.ts      |   2 +-
 .../nodes-per-country.component.html          |   2 +-
 .../nodes-per-country.component.scss          |   2 +-
 .../nodes-per-isp-chart.component.html        |   2 +-
 .../nodes-per-isp-chart.component.scss        |   2 +-
 .../nodes-per-isp-chart.component.ts          |   2 +-
 .../nodes-per-isp-preview.component.scss      |   2 +-
 .../nodes-per-isp.component.html              |   2 +-
 .../nodes-per-isp.component.scss              |   2 +-
 .../nodes-rankings-dashboard.component.scss   |   2 +-
 .../lightning-statistics-chart.component.scss |   2 +-
 .../lightning-statistics-chart.component.ts   |   6 +-
 frontend/src/index.liquid.html                |   2 +-
 frontend/src/index.mempool.html               |   2 +-
 frontend/src/styles.scss                      | 189 +++++++++++-------
 84 files changed, 317 insertions(+), 225 deletions(-)

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index e3f585a25..65d484520 100644
--- a/frontend/src/app/app.module.ts
+++ b/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,
diff --git a/frontend/src/app/components/amount/amount.component.scss b/frontend/src/app/components/amount/amount.component.scss
index b26429dcc..87f2fe6cd 100644
--- a/frontend/src/app/components/amount/amount.component.scss
+++ b/frontend/src/app/components/amount/amount.component.scss
@@ -1,3 +1,3 @@
 .green-color {
-  color: #3bcc49;
+  color: var(--green);
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/app/app.component.ts b/frontend/src/app/components/app/app.component.ts
index ace0122f0..49eb691c7 100644
--- a/frontend/src/app/components/app/app.component.ts
+++ b/frontend/src/app/components/app/app.component.ts
@@ -4,6 +4,7 @@ import { Router, NavigationEnd } from '@angular/router';
 import { StateService } from '../../services/state.service';
 import { OpenGraphService } from '../../services/opengraph.service';
 import { NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap';
+import { ThemeService } from 'src/app/services/theme.service';
 
 @Component({
   selector: 'app-root',
@@ -19,6 +20,7 @@ export class AppComponent implements OnInit {
     private stateService: StateService,
     private openGraphService: OpenGraphService,
     private location: Location,
+    private theme: ThemeService,
     tooltipConfig: NgbTooltipConfig,
     @Inject(LOCALE_ID) private locale: string,
   ) {
diff --git a/frontend/src/app/components/assets/asset-group/asset-group.component.scss b/frontend/src/app/components/assets/asset-group/asset-group.component.scss
index c0b31f273..d434c16ef 100644
--- a/frontend/src/app/components/assets/asset-group/asset-group.component.scss
+++ b/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;
diff --git a/frontend/src/app/components/assets/assets-featured/assets-featured.component.scss b/frontend/src/app/components/assets/assets-featured/assets-featured.component.scss
index 32c560af4..c80c3689d 100644
--- a/frontend/src/app/components/assets/assets-featured/assets-featured.component.scss
+++ b/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;
diff --git a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts
index 0abc55aa7..13fa60364 100644
--- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts
+++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts
@@ -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,
diff --git a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts
index 895a6f33f..4a2fa9808 100644
--- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts
+++ b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts
@@ -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,
diff --git a/frontend/src/app/components/block-health-graph/block-health-graph.component.ts b/frontend/src/app/components/block-health-graph/block-health-graph.component.ts
index 8eef20d51..efd490d1f 100644
--- a/frontend/src/app/components/block-health-graph/block-health-graph.component.ts
+++ b/frontend/src/app/components/block-health-graph/block-health-graph.component.ts
@@ -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,
diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss
index c468cf792..af5135db7 100644
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss
+++ b/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;
diff --git a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts
index fe8efa9c7..46b614b78 100644
--- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts
+++ b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts
@@ -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,
diff --git a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts
index 76d6e8216..7db01bec9 100644
--- a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts
+++ b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts
@@ -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,
diff --git a/frontend/src/app/components/block/block.component.scss b/frontend/src/app/components/block/block.component.scss
index bad8fa52e..32de75c1e 100644
--- a/frontend/src/app/components/block/block.component.scss
+++ b/frontend/src/app/components/block/block.component.scss
@@ -254,7 +254,7 @@ h1 {
   cursor: pointer;
 
   &.active {
-    background: #24273e;
+    background: var(--box-bg);
   }
 
   &.active, &:hover {
diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
index c1cc6809d..0cbadf01b 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
+++ b/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;
 }
diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
index 5141f4de9..ca79b68a6 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
+++ b/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'],
-    liquid: ['#116761', '#183550'],
-    'liquidtestnet': ['#494a4a', '#272e46'],
-    testnet: ['#1d486f', '#183550'],
-    signet: ['#6f1d5d', '#471850'],
+    '': ['var(--mainnet-alt)', 'var(--primary)'],
+    liquid: ['var(--liquid)', 'var(--testnet-alt)'],
+    'liquidtestnet': ['var(--liquidtestnet)', 'var(--liquidtestnet-alt)'],
+    testnet: ['var(--testnet)', 'var(--testnet-alt)'],
+    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)",
     };
   }
 
diff --git a/frontend/src/app/components/blockchain/blockchain.component.scss b/frontend/src/app/components/blockchain/blockchain.component.scss
index eacd16118..a8ecc6aba 100644
--- a/frontend/src/app/components/blockchain/blockchain.component.scss
+++ b/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;
 }
diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.scss b/frontend/src/app/components/blocks-list/blocks-list.component.scss
index 3d3169a69..6dba7441f 100644
--- a/frontend/src/app/components/blocks-list/blocks-list.component.scss
+++ b/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 {
diff --git a/frontend/src/app/components/difficulty/difficulty.component.html b/frontend/src/app/components/difficulty/difficulty.component.html
index ff31d4f57..c4983b8dd 100644
--- a/frontend/src/app/components/difficulty/difficulty.component.html
+++ b/frontend/src/app/components/difficulty/difficulty.component.html
@@ -101,6 +101,47 @@
           </div>
           <div class="symbol">
             <span i18n="difficulty-box.new-subsidy">New subsidy</span>
+        <div class="item">
+          <h5 class="card-title" i18n="difficulty-box.remaining">Remaining</h5>
+          <div class="card-text">
+            <ng-container *ngTemplateOutlet="epochData.remainingBlocks === 1 ? blocksSingular : blocksPlural; context: {$implicit: epochData.remainingBlocks }"></ng-container>
+            <ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
+            <ng-template #blocksSingular let-i i18n="shared.block">{{ i }} <span class="shared-block">block</span></ng-template>
+          </div>
+          <div class="symbol"><app-time-until [time]="epochData.estimatedRetargetDate" [fastRender]="true"></app-time-until></div>
+        </div>
+        <div class="item">
+          <h5 class="card-title" i18n="difficulty-box.estimate">Estimate</h5>
+          <div *ngIf="epochData.remainingBlocks < 1870; else recentlyAdjusted" class="card-text" [ngStyle]="{'color': epochData.colorAdjustments}">
+            <span *ngIf="epochData.change > 0; else arrowDownDifficulty" >
+              <fa-icon class="retarget-sign" [icon]="['fas', 'caret-up']" [fixedWidth]="true"></fa-icon>
+            </span>
+            <ng-template #arrowDownDifficulty >
+              <fa-icon class="retarget-sign" [icon]="['fas', 'caret-down']" [fixedWidth]="true"></fa-icon>
+            </ng-template>
+            {{ epochData.change | absolute | number: '1.2-2' }}
+            <span class="symbol">%</span>
+          </div>
+          <ng-template #recentlyAdjusted>
+            <div class="card-text">&#8212;</div>
+          </ng-template>
+          <div class="symbol">
+            <span i18n="difficulty-box.previous">Previous</span>:
+            <span [ngStyle]="{'color': epochData.colorPreviousAdjustments}">
+              <span *ngIf="epochData.previousRetarget > 0; else arrowDownPreviousDifficulty" >
+                <fa-icon class="previous-retarget-sign" [icon]="['fas', 'caret-up']" [fixedWidth]="true"></fa-icon>
+              </span>
+              <ng-template #arrowDownPreviousDifficulty >
+                <fa-icon class="previous-retarget-sign" [icon]="['fas', 'caret-down']" [fixedWidth]="true"></fa-icon>
+              </ng-template>
+              {{ epochData.previousRetarget | absolute | number: '1.2-2' }} </span> %
+          </div>
+        </div>
+        <div class="item" *ngIf="showProgress">
+          <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: var(--primary)" [ngStyle]="{'width': epochData.base}">&nbsp;</div>
           </div>
         </div>
         <div class="item">
diff --git a/frontend/src/app/components/difficulty/difficulty.component.scss b/frontend/src/app/components/difficulty/difficulty.component.scss
index 3b591dc2d..ecd63a684 100644
--- a/frontend/src/app/components/difficulty/difficulty.component.scss
+++ b/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,7 +91,7 @@
 }
 
 .card {
-  background-color: #1d1f31;
+  background-color: var(--bg);
   height: 100%;
 }
 
@@ -103,7 +103,7 @@
 .progress {
   display: inline-flex;
   width: 100%;
-  background-color: #2d3348;
+  background-color: var(--secondary);
   height: 1.1rem;
   max-width: 180px;
 }
diff --git a/frontend/src/app/components/difficulty/difficulty.component.ts b/frontend/src/app/components/difficulty/difficulty.component.ts
index a58250653..579b49fc3 100644
--- a/frontend/src/app/components/difficulty/difficulty.component.ts
+++ b/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);
diff --git a/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts b/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts
index ca5b3f452..c26aae31a 100644
--- a/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts
+++ b/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,
           }
         },
diff --git a/frontend/src/app/components/fees-box/fees-box.component.scss b/frontend/src/app/components/fees-box/fees-box.component.scss
index ba68e2086..dee87f7f2 100644
--- a/frontend/src/app/components/fees-box/fees-box.component.scss
+++ b/frontend/src/app/components/fees-box/fees-box.component.scss
@@ -36,7 +36,7 @@
       margin-bottom: 0;
     }
     .card-text span {
-      color: #ffffff66;
+      color: var(--transparent-fg);
       font-size: 12px;
       top: 0px;
     }
diff --git a/frontend/src/app/components/footer/footer.component.scss b/frontend/src/app/components/footer/footer.component.scss
index cc0146345..a7c0f2c2b 100644
--- a/frontend/src/app/components/footer/footer.component.scss
+++ b/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;
 
@@ -61,7 +61,7 @@
 .progress {
   display: inline-flex;
   width: 160px;
-  background-color: #2d3348;
+  background-color: var(--secondary);
   height: 1.1rem;
 }
 
diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
index 32885d5de..df5795b90 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
@@ -99,7 +99,7 @@
     .card-text {
       font-size: 18px;
       span {
-        color: #ffffff66;
+        color: var(--transparent-fg);
         font-size: 12px;
       }
     }
diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
index f4924f255..04c2721d2 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
@@ -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,
diff --git a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
index d938baf15..c6498b25d 100644
--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
+++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
@@ -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,
diff --git a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
index 5c102eadf..c456053ea 100644
--- a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
+++ b/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,
diff --git a/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts b/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
index 4359d8fa3..f6ecb950e 100644
--- a/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
+++ b/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
@@ -104,7 +104,7 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges {
           type: 'line',
         },
         formatter: (params: any) => {
-          const colorSpan = (color: string) => `<span class="indicator" style="background-color: ${color};"></span>`;
+          const colorSpan = (color: string) => `<span class="indicator" style="background-color: var(--liquid);"></span>`;
           let itemFormatted = '<div class="title">' + params[0].axisValue + '</div>';
           for (let index = params.length - 1; index >= 0; index--) {
             const item = params[index];
@@ -137,7 +137,7 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges {
         splitLine: {
           lineStyle: {
             type: 'dotted',
-            color: '#ffffff66',
+            color: 'var(--transparent-fg)',
             opacity: 0.25,
           }
         }
@@ -153,11 +153,11 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges {
           showSymbol: false,
           areaStyle: {
             opacity: 0.2,
-            color: '#116761',
+            color: 'var(--liquid)',
           },
           lineStyle: {
             width: 2,
-            color: '#116761',
+            color: 'var(--liquid)',
           },
         },
         {
diff --git a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss
index d6aaccff1..ce3127042 100644
--- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss
+++ b/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 {
@@ -108,23 +108,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 {
diff --git a/frontend/src/app/components/master-page-preview/master-page-preview.component.scss b/frontend/src/app/components/master-page-preview/master-page-preview.component.scss
index f901f31a3..486922dfa 100644
--- a/frontend/src/app/components/master-page-preview/master-page-preview.component.scss
+++ b/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;
   }
diff --git a/frontend/src/app/components/master-page/master-page.component.scss b/frontend/src/app/components/master-page/master-page.component.scss
index 9320e2b38..1bead6f52 100644
--- a/frontend/src/app/components/master-page/master-page.component.scss
+++ b/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 {
@@ -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 {
diff --git a/frontend/src/app/components/mempool-block/mempool-block.component.scss b/frontend/src/app/components/mempool-block/mempool-block.component.scss
index e74689a9a..b2f9419b8 100644
--- a/frontend/src/app/components/mempool-block/mempool-block.component.scss
+++ b/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;
 }
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
index 606699d93..dada75603 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
+++ b/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;
 }
diff --git a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
index 58d1764ab..4700332a3 100644
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
+++ b/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,
diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
index ce68c97ae..87a773ab2 100644
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
@@ -7,7 +7,7 @@
 }
 
 .card {
-  background-color: #1d1f31;
+  background-color: var(--bg);
 }
 
 .graph-card {
diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
index f5a49678b..ce5813da1 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
@@ -107,7 +107,7 @@
     .card-text {
       font-size: 18px;
       span {
-        color: #ffffff66;
+        color: var(--transparent-fg);
         font-size: 12px;
       }
     }
diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
index 11ee6e506..43088329a 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
@@ -305,7 +305,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,
diff --git a/frontend/src/app/components/pool/pool-preview.component.scss b/frontend/src/app/components/pool/pool-preview.component.scss
index bd0c19859..24a38c9c5 100644
--- a/frontend/src/app/components/pool/pool-preview.component.scss
+++ b/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;
diff --git a/frontend/src/app/components/pool/pool.component.scss b/frontend/src/app/components/pool/pool.component.scss
index 8bd6763e5..b2975639e 100644
--- a/frontend/src/app/components/pool/pool.component.scss
+++ b/frontend/src/app/components/pool/pool.component.scss
@@ -88,7 +88,7 @@ div.scrollable {
 }
 
 .progress {
-  background-color: #2d3348;
+  background-color: var(--secondary);
 }
 
 .coinbase {
diff --git a/frontend/src/app/components/reward-stats/reward-stats.component.scss b/frontend/src/app/components/reward-stats/reward-stats.component.scss
index e02b3a311..e541e30ef 100644
--- a/frontend/src/app/components/reward-stats/reward-stats.component.scss
+++ b/frontend/src/app/components/reward-stats/reward-stats.component.scss
@@ -50,7 +50,7 @@
       margin-bottom: 0;
     }
     .card-text span {
-      color: #ffffff66;
+      color: var(--transparent-fg);
       font-size: 12px;
       top: 0px;
     }
diff --git a/frontend/src/app/components/statistics/statistics.component.scss b/frontend/src/app/components/statistics/statistics.component.scss
index 3d4813fb5..835a170cc 100644
--- a/frontend/src/app/components/statistics/statistics.component.scss
+++ b/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;
diff --git a/frontend/src/app/components/transaction/transaction-preview.component.scss b/frontend/src/app/components/transaction/transaction-preview.component.scss
index 4fa8b661a..0b26e539a 100644
--- a/frontend/src/app/components/transaction/transaction-preview.component.scss
+++ b/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;
 
diff --git a/frontend/src/app/components/transaction/transaction.component.scss b/frontend/src/app/components/transaction/transaction.component.scss
index bfdd4cc03..a30454225 100644
--- a/frontend/src/app/components/transaction/transaction.component.scss
+++ b/frontend/src/app/components/transaction/transaction.component.scss
@@ -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;
 }
diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.scss b/frontend/src/app/components/transactions-list/transactions-list.component.scss
index b80c4da4c..f4e58f1af 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.scss
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.scss
@@ -17,7 +17,7 @@
 }
 
 .red {
-  color:#dc3545;
+  color:var(--red);
 }
 
 .grey {
@@ -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 {
diff --git a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
index 9f491affc..3b044f28d 100644
--- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
+++ b/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>
diff --git a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.scss b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.scss
index 454d92bbf..e39d54e59 100644
--- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.scss
+++ b/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);
       }
     }
   }
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss
index 01eb7f73d..ffc9449f7 100644
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@@ -7,7 +7,7 @@
 }
 
 .card {
-  background-color: #1d1f31;
+  background-color: var(--bg);
   height: 100%;
 }
 
@@ -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 {
diff --git a/frontend/src/app/docs/api-docs/api-docs.component.scss b/frontend/src/app/docs/api-docs/api-docs.component.scss
index a139288e7..9a4ec8dc9 100644
--- a/frontend/src/app/docs/api-docs/api-docs.component.scss
+++ b/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;
-  color: #1bd8f4;
+  background-color: var(--secondary);
+  color: var(--info);
   padding: 1rem 1.3rem 1rem 1.3rem;
   font-weight: bold;
   border-radius: 0.25rem;
@@ -212,7 +212,7 @@ h3 {
 
 .endpoint-container .section-header span {
   color: #fff;
-  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;
-  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;
 }
diff --git a/frontend/src/app/docs/code-template/code-template.component.scss b/frontend/src/app/docs/code-template/code-template.component.scss
index 4d3288dfd..960787af0 100644
--- a/frontend/src/app/docs/code-template/code-template.component.scss
+++ b/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;
diff --git a/frontend/src/app/lightning/channel/channel-box/channel-box.component.scss b/frontend/src/app/lightning/channel/channel-box/channel-box.component.scss
index f157f380a..2306dd261 100644
--- a/frontend/src/app/lightning/channel/channel-box/channel-box.component.scss
+++ b/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;
 }
 
diff --git a/frontend/src/app/lightning/channel/channel-preview.component.scss b/frontend/src/app/lightning/channel/channel-preview.component.scss
index 6b6ac5152..cdd30204c 100644
--- a/frontend/src/app/lightning/channel/channel-preview.component.scss
+++ b/frontend/src/app/lightning/channel/channel-preview.component.scss
@@ -34,7 +34,7 @@
 }
 
 .row.nodes {
-  background: #181b2d;
+  background: var(--stat-box-bg);
   margin: 15px 0 0;
 }
 
@@ -53,7 +53,7 @@
   width: 470px;
   min-width: 470px;
   padding: 0;
-  background: #181b2d;
+  background: var(--stat-box-bg);
   max-height: 350px;
   overflow: hidden;
 }
diff --git a/frontend/src/app/lightning/channel/channel.component.html b/frontend/src/app/lightning/channel/channel.component.html
index b9d9e09a4..290199210 100644
--- a/frontend/src/app/lightning/channel/channel.component.html
+++ b/frontend/src/app/lightning/channel/channel.component.html
@@ -1,7 +1,7 @@
 <div class="container-xl" *ngIf="(channel$ | async) as channel; else skeletonLoader">
 
   <ng-container *ngIf="!error">
-    <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>
+    <h5 class="mb-0" style="color: var(--transparent-fg)" i18n="lightning.channel">Lightning channel</h5>
     <div class="title-container">
       <h1 class="mb-0">{{ channel.short_id }}</h1>
       <span class="tx-link">
@@ -113,7 +113,7 @@
 
 <ng-template #skeletonLoader>
   <div class="container-xl">
-    <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>
+    <h5 class="mb-0" style="color: var(--transparent-fg)" i18n="lightning.channel">Lightning channel</h5>
     <div class="title-container">
       <h1 class="mb-0"><span class="skeleton-loader" style="width: 275px; height: 25px;"></span></h1>
       <span class="tx-link">
diff --git a/frontend/src/app/lightning/channels-list/channels-list.component.scss b/frontend/src/app/lightning/channels-list/channels-list.component.scss
index 80797b550..f45f162c6 100644
--- a/frontend/src/app/lightning/channels-list/channels-list.component.scss
+++ b/frontend/src/app/lightning/channels-list/channels-list.component.scss
@@ -3,7 +3,7 @@
 }
 
 .sats {
-  color: #ffffff66;
+  color: var(--transparent-fg);
   font-size: 12px;
   top: 0px;
 }
diff --git a/frontend/src/app/lightning/channels-statistics/channels-statistics.component.html b/frontend/src/app/lightning/channels-statistics/channels-statistics.component.html
index 31b4c33af..a84def86c 100644
--- a/frontend/src/app/lightning/channels-statistics/channels-statistics.component.html
+++ b/frontend/src/app/lightning/channels-statistics/channels-statistics.component.html
@@ -1,7 +1,7 @@
 <div class="widget-toggler">
   <a href="" (click)="switchMode('avg')" class="toggler-option"
     [ngClass]="{'inactive': mode === 'avg'}"><small i18n="statistics.average-small">avg</small></a>
-  <span style="color: #ffffff66; font-size: 8px"> | </span>
+  <span style="color: var(--transparent-fg); font-size: 8px"> | </span>
   <a href="" (click)="switchMode('med')" class="toggler-option"
     [ngClass]="{'inactive': mode === 'med'}"><small i18n="statistics.median-small">med</small></a>
 </div>
diff --git a/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss b/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss
index 30f88f136..0b144ae2b 100644
--- a/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss
+++ b/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss
@@ -57,7 +57,7 @@
       margin-bottom: 0;
     }
     .card-text span {
-      color: #ffffff66;
+      color: var(--transparent-fg);
       font-size: 12px;
       top: 0px;
     }
@@ -110,5 +110,5 @@
 }
 
 .inactive {
-  color: #ffffff66;
+  color: var(--transparent-fg);
 }
\ No newline at end of file
diff --git a/frontend/src/app/lightning/group/group-preview.component.scss b/frontend/src/app/lightning/group/group-preview.component.scss
index 712112f5a..f31c33f47 100644
--- a/frontend/src/app/lightning/group/group-preview.component.scss
+++ b/frontend/src/app/lightning/group/group-preview.component.scss
@@ -20,7 +20,7 @@
   width: 100%;
   margin: 16px 0 0;
   padding: 20px 12px;
-  background: #181b2d;
+  background: var(--stat-box-bg);
   font-size: 32px;
 }
 
@@ -46,7 +46,7 @@
   min-height: 272px;
   max-height: 272px;
   padding: 0;
-  background: #181b2d;
+  background: var(--stat-box-bg);
   overflow: hidden;
   margin-top: 16px;
 }
diff --git a/frontend/src/app/lightning/group/group.component.html b/frontend/src/app/lightning/group/group.component.html
index c1ffe7f6d..c5999da5c 100644
--- a/frontend/src/app/lightning/group/group.component.html
+++ b/frontend/src/app/lightning/group/group.component.html
@@ -1,5 +1,5 @@
 <div class="container-xl full-height" style="min-height: 335px">
-  <h5 class="mb-1" style="color: #ffffff66" i18n="lightning.node-group">Lightning node group</h5>
+  <h5 class="mb-1" style="color: var(--transparent-fg)" i18n="lightning.node-group">Lightning node group</h5>
 
   <div class="header">
     <div class="logo-container">
@@ -44,7 +44,7 @@
         </table>
       </div>
       <div class="col-12 col-md-6 p-3 p-md-0 pr-md-3">
-        <div style="background-color: #181b2d">
+        <div style="background-color: var(--stat-box-bg)">
           <app-nodes-map [widget]="true" [nodes]="nodes.nodes" type="isp"></app-nodes-map>
         </div>
       </div>
diff --git a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
index e6da450df..435adc925 100644
--- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
+++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
@@ -10,7 +10,7 @@
 }
 
 .card {
-  background-color: #1d1f31;
+  background-color: var(--bg);
 }
 
 .graph-card {
diff --git a/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts b/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts
index f20a5123c..ac53da255 100644
--- a/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts
+++ b/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts
@@ -205,7 +205,7 @@ export class NodeFeeChartComponent implements OnInit {
           splitLine: {
             lineStyle: {
               type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 0.25,
             }
           },
diff --git a/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts b/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts
index f67c83367..b2016b2cf 100644
--- a/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts
+++ b/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts
@@ -181,7 +181,7 @@ export class NodeStatisticsChartComponent implements OnInit {
           splitLine: {
             lineStyle: {
               type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 0.25,
             }
           },
@@ -217,7 +217,7 @@ export class NodeStatisticsChartComponent implements OnInit {
             symbol: 'none',
             lineStyle: {
               type: 'solid',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 1,
               width: 1,
             },
diff --git a/frontend/src/app/lightning/node-statistics/node-statistics.component.scss b/frontend/src/app/lightning/node-statistics/node-statistics.component.scss
index dc69a4dae..cb580a151 100644
--- a/frontend/src/app/lightning/node-statistics/node-statistics.component.scss
+++ b/frontend/src/app/lightning/node-statistics/node-statistics.component.scss
@@ -52,7 +52,7 @@
       }  
     }
     .card-text span {
-      color: #ffffff66;
+      color: var(--transparent-fg);
       font-size: 12px;
       top: 0px;
     }
diff --git a/frontend/src/app/lightning/node/node-preview.component.scss b/frontend/src/app/lightning/node/node-preview.component.scss
index da8794010..aac57754d 100644
--- a/frontend/src/app/lightning/node/node-preview.component.scss
+++ b/frontend/src/app/lightning/node/node-preview.component.scss
@@ -32,7 +32,7 @@
   min-height: 408px;
   max-height: 408px;
   padding: 0;
-  background: #181b2d;
+  background: var(--stat-box-bg);
   overflow: hidden;
   margin-top: 6px;
 }
diff --git a/frontend/src/app/lightning/node/node.component.html b/frontend/src/app/lightning/node/node.component.html
index 50dab25c7..546b9ecf0 100644
--- a/frontend/src/app/lightning/node/node.component.html
+++ b/frontend/src/app/lightning/node/node.component.html
@@ -1,7 +1,7 @@
 <div class="container-xl" *ngIf="(node$ | async) as node; else skeletonLoader">
 
   <ng-container *ngIf="!error">
-    <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
+    <h5 class="mb-0" style="color: var(--transparent-fg)" i18n="lightning.node">Lightning node</h5>
     <div class="title-container mb-2">
       <div class="d-flex justify-content-between align-items-center">
         <h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
@@ -303,7 +303,7 @@
 
 <ng-template #skeletonLoader>
   <div class="container-xl">
-    <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
+    <h5 class="mb-0" style="color: var(--transparent-fg)" i18n="lightning.node">Lightning node</h5>
     <div class="title-container mb-2">
       <h1 class="mb-0"><span class="skeleton-loader" style="width: 250px; height: 36px; margin-top: 5px; margin-bottom: 5px;"></span></h1>
       <span class="tx-link">
diff --git a/frontend/src/app/lightning/node/node.component.scss b/frontend/src/app/lightning/node/node.component.scss
index 117fc8a2c..dcbac7fa7 100644
--- a/frontend/src/app/lightning/node/node.component.scss
+++ b/frontend/src/app/lightning/node/node.component.scss
@@ -89,7 +89,7 @@ app-fiat {
 
   .tlv-type {
     font-size: 12px;
-    color: #ffffff66;
+    color: var(--transparent-fg);
   }
 
   .tlv-payload {
diff --git a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html
index b8d0dc12f..8be2e2c14 100644
--- a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html
+++ b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html
@@ -19,7 +19,7 @@
     <div class="d-flex d-md-block align-items-baseline" style="margin-bottom: -5px">
       <span i18n="lightning.nodes-channels-world-map">Lightning Nodes Channels World Map</span>
     </div>
-    <small style="color: #ffffff66" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
+    <small style="color: var(--transparent-fg)" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
   </div>
 
   <ng-container *ngIf="channelsObservable | async">
diff --git a/frontend/src/app/lightning/nodes-map/nodes-map.component.html b/frontend/src/app/lightning/nodes-map/nodes-map.component.html
index d6b793e25..65617f0fd 100644
--- a/frontend/src/app/lightning/nodes-map/nodes-map.component.html
+++ b/frontend/src/app/lightning/nodes-map/nodes-map.component.html
@@ -4,7 +4,7 @@
     <div class="d-flex d-md-block align-items-baseline" style="margin-bottom: -5px">
       <span i18n="lightning.nodes-world-map">Lightning Nodes World Map</span>
     </div>
-    <small style="color: #ffffff66" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
+    <small style="color: var(--transparent-fg)" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
   </div>
 
   <ng-container *ngIf="observable$ | async">
diff --git a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
index aaea41265..ca8ef711e 100644
--- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
+++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
@@ -98,7 +98,7 @@
     .card-text {
       font-size: 18px;
       span {
-        color: #ffffff66;
+        color: var(--transparent-fg);
         font-size: 12px;
       }
     }
diff --git a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts
index a7f6da5c2..3c2868794 100644
--- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts
+++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts
@@ -352,7 +352,7 @@ export class NodesNetworksChartComponent implements OnInit, OnChanges {
           splitLine: {
             lineStyle: {
               type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 0.25,
             },
           },
@@ -375,7 +375,7 @@ export class NodesNetworksChartComponent implements OnInit, OnChanges {
           splitLine: {
             lineStyle: {
               type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 0.25,
             },
           },
@@ -449,7 +449,7 @@ export class NodesNetworksChartComponent implements OnInit, OnChanges {
     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,
diff --git a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html
index 191a3dbb1..cbe9ed6b1 100644
--- a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html
+++ b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html
@@ -7,7 +7,7 @@
         <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
       </button>
     </div>
-    <small style="color: #ffffff66" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
+    <small style="color: var(--transparent-fg)" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
   </div>
 
   <div class="container pb-lg-0">
diff --git a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.scss b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.scss
index f127d88cd..8d41b72d3 100644
--- a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.scss
+++ b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.scss
@@ -1,5 +1,5 @@
 .sats {
-  color: #ffffff66;
+  color: var(--transparent-fg);
   font-size: 12px;
   top: 0px;
 }
diff --git a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts
index 5d80341fe..89300e5eb 100644
--- a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts
+++ b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts
@@ -220,7 +220,7 @@ export class NodesPerCountryChartComponent 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,
diff --git a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html
index be7737894..0d982f127 100644
--- a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html
+++ b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html
@@ -46,7 +46,7 @@
         </table>
       </div>
       <div class="col-12 col-md-6 p-3 p-md-0 pr-md-3">
-        <div style="background-color: #181b2d">
+        <div style="background-color: var(--stat-box-bg)">
           <app-nodes-map [widget]="true" [nodes]="countryNodes.nodes" type="country"></app-nodes-map>
         </div>
       </div>
diff --git a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.scss b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.scss
index 97d42298c..cd0c0ad0c 100644
--- a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.scss
+++ b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.scss
@@ -4,7 +4,7 @@
 }
 
 .sats {
-  color: #ffffff66;
+  color: var(--transparent-fg);
   font-size: 12px;
   top: 0px;
 }
diff --git a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html
index 52d74c806..e71e6fb7d 100644
--- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html
+++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html
@@ -33,7 +33,7 @@
         <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
       </button>
     </div>
-    <small class="d-block" style="color: #ffffff66; min-height: 25px" >
+    <small class="d-block" style="color: var(--transparent-fg); min-height: 25px" >
       <span i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</span>
     </small>
   </div>
diff --git a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss
index 7879c18b1..056e9024b 100644
--- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss
+++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss
@@ -97,7 +97,7 @@
     .card-text {
       font-size: 18px;
       span {
-        color: #ffffff66;
+        color: var(--transparent-fg);
         font-size: 12px;
       }
     }
diff --git a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts
index 5599bc255..c5928c7d9 100644
--- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts
+++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts
@@ -275,7 +275,7 @@ export class NodesPerISPChartComponent implements OnInit {
 
   onSaveChart(): void {
     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,
diff --git a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp-preview.component.scss b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp-preview.component.scss
index 2fe34ef5e..ca066073b 100644
--- a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp-preview.component.scss
+++ b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp-preview.component.scss
@@ -12,7 +12,7 @@
   min-height: 360px;
   max-height: 360px;
   padding: 0;
-  background: #181b2d;
+  background: var(--stat-box-bg);
   overflow: hidden;
   margin-top: 0;
 }
diff --git a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html
index 865d2d2dd..cfb688b8b 100644
--- a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html
+++ b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html
@@ -43,7 +43,7 @@
         </table>
       </div>
       <div class="col-12 col-md-6 p-3 p-md-0 pr-md-3">
-        <div style="background-color: #181b2d">
+        <div style="background-color: var(--stat-box-bg)">
           <app-nodes-map [widget]="true" [nodes]="ispNodes.nodes" type="isp"></app-nodes-map>
         </div>
       </div>
diff --git a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.scss b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.scss
index b043d36f8..6e047152e 100644
--- a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.scss
+++ b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.scss
@@ -4,7 +4,7 @@
 }
 
 .sats {
-  color: #ffffff66;
+  color: var(--transparent-fg);
   font-size: 12px;
   top: 0px;
 }
diff --git a/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.scss b/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.scss
index 28e80d451..c9c322603 100644
--- a/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.scss
+++ b/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.scss
@@ -9,7 +9,7 @@
 }
 
 .card {
-  background-color: #1d1f31;
+  background-color: var(--bg);
 }
 
 .card-title {
diff --git a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
index 923a8a3e4..456ebdf38 100644
--- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
+++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
@@ -98,7 +98,7 @@
     .card-text {
       font-size: 18px;
       span {
-        color: #ffffff66;
+        color: var(--transparent-fg);
         font-size: 12px;
       }
     }
diff --git a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts
index 2763c319f..b008ce8e5 100644
--- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts
+++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts
@@ -239,7 +239,7 @@ export class LightningStatisticsChartComponent implements OnInit, OnChanges {
           splitLine: {
             lineStyle: {
               type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 0.25,
             }
           },
@@ -280,7 +280,7 @@ export class LightningStatisticsChartComponent implements OnInit, OnChanges {
             symbol: 'none',
             lineStyle: {
               type: 'solid',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 1,
               width: 1,
             },
@@ -348,7 +348,7 @@ export class LightningStatisticsChartComponent implements OnInit, OnChanges {
     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,
diff --git a/frontend/src/index.liquid.html b/frontend/src/index.liquid.html
index 5aa14cd2d..7ec1ee0ee 100644
--- a/frontend/src/index.liquid.html
+++ b/frontend/src/index.liquid.html
@@ -33,7 +33,7 @@
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
   <meta name="msapplication-TileColor" content="#000000">
   <meta name="msapplication-config" content="/resources/liquid/favicons/browserconfig.xml">
-  <meta name="theme-color" content="#1d1f31">
+  <meta name="theme-color" content="var(--bg)">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
diff --git a/frontend/src/index.mempool.html b/frontend/src/index.mempool.html
index 838af21d0..3edb144d1 100644
--- a/frontend/src/index.mempool.html
+++ b/frontend/src/index.mempool.html
@@ -32,7 +32,7 @@
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
   <meta name="msapplication-TileColor" content="#000000">
   <meta name="msapplication-config" content="/resources/favicons/browserconfig.xml">
-  <meta name="theme-color" content="#1d1f31">
+  <meta name="theme-color" content="var(--bg)">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index f38d25bf1..380a98ac5 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -1,14 +1,25 @@
+/* Theme */
+$bg: #1d1f31;
+$active-bg: #11131f;
+$hover-bg: #12131e;
+$fg: #fff;
+
+$taproot: #eba814;
+$taproot-light: #d5a90a;
+$taproot-dark: #9d7c05;
+
 /* Bootstrap */
 
-$body-bg: #1d1f31;
-$body-color: #fff;
-$gray-800: #1d1f31;
-$gray-700: #fff;
+$body-bg: $bg;
+$body-color: $fg;
+$gray-800: $bg;
+$gray-700: $fg;
 
-$nav-tabs-link-active-bg: #11131f;
+$nav-tabs-link-active-bg: $active-bg;
 
 $primary: #105fb0;
 $secondary: #2d3348;
+$tertiary: #653b9c;
 $success: #1a9436;
 $info: #1bd8f4;
 
@@ -16,44 +27,80 @@ $h5-font-size: 1.15rem !default;
 
 $pagination-bg: $body-bg;
 $pagination-border-color: $gray-800;
-$pagination-disabled-bg:           #FFF;
-$pagination-disabled-border-color: #1d1f31;
-$pagination-active-color:          #fff;
-$pagination-active-bg:             #653b9c;
-$pagination-hover-bg:              #12131e;
-$pagination-hover-border-color:     #1d1f31;
-$pagination-disabled-bg:          #1d1f31;
+$pagination-disabled-bg:           $fg;
+$pagination-disabled-border-color: $bg;
+$pagination-active-color:          $fg;
+$pagination-active-bg:             $tertiary;
+$pagination-hover-bg:              $hover-bg;
+$pagination-hover-border-color:     $bg;
+$pagination-disabled-bg:          $bg;
 
-$custom-select-indicator-color: #FFF;
+$custom-select-indicator-color: $fg;
 
 .input-group-text {
   background-color: #1c2031 !important;
   border: 1px solid #20263e !important;
 }
 
-$link-color:                #1bd8f4;
+$link-color:                $info;
 $link-decoration:           none !default;
 $link-hover-color:          darken($link-color, 15%) !default;
 $link-hover-decoration:     underline !default;
 
-$dropdown-bg: #1d1f31;
-$dropdown-link-color: #fff;
+$dropdown-bg: $bg;
+$dropdown-link-color: $fg;
 
-$dropdown-link-hover-color: #fff;
-$dropdown-link-hover-bg: #11131f;
+$dropdown-link-hover-color: $fg;
+$dropdown-link-hover-bg: $active-bg;
 
-$dropdown-link-active-color: #fff;
-$dropdown-link-active-bg: #11131f;
+$dropdown-link-active-color: $fg;
+$dropdown-link-active-bg: $active-bg;
 
 @import "bootstrap/scss/bootstrap";
 @import 'tlite/tlite.css';
 
+:root {
+  --bg: #{$bg};
+  --active-bg: #{$active-bg};
+  --hover-bg: #{$hover-bg};
+  --fg: #{$fg};
+
+  --primary: #{$primary};
+  --secondary: #{$secondary};
+  --tertiary: #{$tertiary};
+  --success: #{$success};
+  --info: #{$info};
+
+  --box-bg: #24273e;
+  --stat-box-bg: #181b2d;
+  --alert-bg: #3a1c61;
+  --transparent-fg: #ffffff66;
+
+  --testnet: #1d486f;
+  --signet: #6f1d5d;
+  --liquid: #116761;
+  --liquidtestnet: #494a4a;
+
+  --mainnet-alt: #9339f4;
+  --testnet-alt: #183550;
+  --signet-alt: #471850;
+  --liquidtestnet-alt: #272e46;
+
+  --taproot: #eba814;
+  --taproot-light: #d5a90a;
+  --taproot-dark: #9d7c05;
+
+  --green: #3bcc49;
+  --red: #dc3545;
+  --yellow: #ffd800;
+}
+
 html, body {
   height: 100%;
 }
 
 body {
-  background-color: #11131f;
+  background-color: var(--active-bg);
   min-width: 375px;
   padding-bottom: 60px;
 }
@@ -82,7 +129,7 @@ main {
   position: relative;
   min-width: 0;
   word-wrap: break-word;
-  background-color: #24273e;
+  background-color: var(--box-bg);
   background-clip: border-box;
   border: 1px solid rgba(0,0,0,.125);
   box-shadow: 0.125rem 0.125rem 0.25rem rgba(0,0,0,0.075);
@@ -100,35 +147,35 @@ main {
 }
 
 .navbar-nav.liquid > .active {
-  background-color: #116761 !important;
+  background-color: var(--liquid) !important;
 }
 
 .navbar-nav.testnet > .active {
-  background-color: #1d486f !important;
+  background-color: var(--testnet) !important;
 }
 
 .navbar-nav.signet > .active {
-  background-color: #6f1d5d !important;
+  background-color: var(--signet) !important;
 }
 
 .navbar-nav.liquidtestnet > .active {
-  background-color: #494a4a !important;
+  background-color: var(--liquidtestnet) !important;
 }
 
 .form-control {
   color: #fff;
-  background-color: #2d3348;
+  background-color: var(--secondary);
   border: 1px solid rgba(17, 19, 31, 0.2);
 }
 
 .form-control:focus {
   color: #fff;
-  background-color: #2d3348;
+  background-color: var(--secondary);
 }
 
 .btn-purple {
-  background-color: #653b9c;
-  border-color: #653b9c;
+  background-color: var(--tertiary);
+  border-color: var(--tertiary);
 }
 
 .btn-purple:not(:disabled):not(.disabled):active, .btn-purple:not(:disabled):not(.disabled).active, .show > .btn-purple.dropdown-toggle {
@@ -151,12 +198,12 @@ main {
 }
 
 .form-control.form-control-secondary {
-  color: #fff;
-  background-color: #2d3348;
-  border: 1px solid #2d3348;
+  color: var(--fg);
+  background-color: var(--secondary);
+  border: 1px solid var(--secondary);
 }
 .form-control.form-control-secondary:focus {
-  color: #fff;
+  color: var(--fg);
 }
 
 .h2-match-table {
@@ -210,20 +257,20 @@ main {
 }
 
 .symbol {
-	color: #ffffff66;
+	color: var(--transparent-fg);
 	font-size: 12px;
 }
 
 .progress-text {
   span {
-    color: #fff !important;
+    color: var(--fg) !important;
   }
 }
 
 .block-size, .blocks-container {
   .symbol {
     font-size: 16px;
-    color: #fff !important;
+    color: var(--fg) !important;
   }
 }
 
@@ -233,17 +280,17 @@ main {
 }
 
 .title-block {
-  color: #FFF;
+  color: var(--fg);
   padding-top: 20px;
   padding-bottom: 10px;
-  border-top: 3px solid #FFF;
+  border-top: 3px solid var(--fg);
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
 
 .title-address, .title-asset {
-  color: #FFF;
+  color: var(--fg);
   padding-bottom: 10px;
   display: flex;
   flex-direction: column;
@@ -282,11 +329,11 @@ main {
 }
 
 .close {
-  color: #fff;
+  color: var(--fg);
 }
 
 .close:hover {
-  color: #fff;
+  color: var(--fg);
 }
 
 .white-color {
@@ -294,19 +341,19 @@ main {
 }
 
 .green-color {
-  color: #3bcc49;
+  color: var(--green);
 }
 
 .red-color {
-  color: #dc3545;
+  color: var(--red);
 }
 
 .yellow-color {
-  color: #ffd800;
+  color: var(--yellow);
 }
 
 .table-striped tbody tr:nth-of-type(odd) {
-  background-color: #181b2d;
+  background-color: var(--stat-box-bg);
 }
 
 .bordertop {
@@ -334,7 +381,7 @@ html:lang(ru) .card-title {
 
 .tx-wrapper-tooltip-chart,
 .fees-wrapper-tooltip-chart {
-  background: rgba(#11131f, 0.95);
+  background: rgba($active-bg, 0.95);
   border-radius: 4px;
   box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
   color: #b1b1b1;
@@ -363,7 +410,7 @@ html:lang(ru) .card-title {
     font-size: 12px;
     font-weight: 700;
     margin-bottom: 2px;
-    color: #fff;
+    color: var(--fg);
     .total-value {
       float: right;
     }
@@ -422,7 +469,7 @@ html:lang(ru) .card-title {
   .total-label {
     width: 100%;
     text-align: left;
-    color: #fff;
+    color: var(--fg);
     margin-top: 5px;
     font-size: 14px;
     span {
@@ -518,8 +565,8 @@ html:lang(ru) .card-title {
 
 .fees-wrapper-tooltip-chart-advanced,
 .tx-wrapper-tooltip-chart-advanced {
-  background: rgba(#1d1f31, 0.98);
   width: 300px;
+  background: rgba($bg, 0.98);
 
   thead {
     th {
@@ -673,27 +720,27 @@ h1, h2, h3 {
 }
 
 .progress-mempool {
-  background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #105fb0 0%, #9339f4 100%);
+  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, var(--mainnet-alt) 100%);
 }
 
 .progress-mempool.testnet {
-  background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #1d486f 0%, #183550 100%);
+  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--testnet) 0%, var(--testnet-alt) 100%);
 }
 
 .progress-mempool.signet {
-  background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #6f1d5d 0%, #471850 100%);
+  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--signet) 0%, var(--signet-alt) 100%);
 }
 
 .progress-mempool.liquid {
-  background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #116761 0%, #183550 100%);
+  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--liquid) 0%, var(--testnet-alt) 100%);
 }
 
 .progress-dark {
-  background-color: #181b2d;
+  background-color: var(--stat-box-bg);
 }
 
 .progress-darklight {
-  background-color: #24273e;
+  background-color: var(--box-bg);
 }
 
 .progress-light {
@@ -701,12 +748,12 @@ h1, h2, h3 {
 }
 
 .progress.progress-health {
-  background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #105fb0 0%, #1a9436 100%);
+  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, $success 100%);
   justify-content: flex-end;
 }
 
 .progress-bar.progress-bar-health {
-  background: #2d3348;
+  background: var(--secondary);
 }
 
 .mt-2-5, .my-2-5 {
@@ -714,9 +761,9 @@ h1, h2, h3 {
 }
 
 .alert-mempool {
-  color: #ffffff;
-  background-color: #653b9c;
-  border-color: #3a1c61;
+  color: var(--fg);
+  background-color: var(--tertiary);
+  border-color: var(--alert-bg);
   width: 100%;
   display: inline-flex;
   flex-direction: column;
@@ -1082,7 +1129,7 @@ th {
       display: block;
       width: 100%;
       padding: 1rem 2rem;
-      color: #fff;
+      color: var(--fg);
       font-weight: bold;
       &:focus, &:hover, &:active {
         text-decoration: none;
@@ -1096,8 +1143,8 @@ th {
     }
 
     .collapsed {
-      background-color: #2d3348;
-      color: #1bd8f4;
+      background-color: var(--secondary);
+      color: var(--info);
     }
   }
 
@@ -1115,7 +1162,7 @@ th {
   display: inline-block;
   width: 100%;
   justify-content: space-between;
-  background: #1d1f31;
+  background: var(--bg);
   margin: 0;
   @media (min-width: 550px) {
     width: auto;
@@ -1141,21 +1188,21 @@ th {
 // Blinking block
 @keyframes shadowyBackground {
   0% {
-    box-shadow: -10px -15px 75px rgba(#eba814, 1);
+    box-shadow: -10px -15px 75px rgba($taproot, 1);
   }
   50% {
-    box-shadow: -10px -15px 75px rgba(#eba814, .3);
+    box-shadow: -10px -15px 75px rgba($taproot, .3);
   }
   100% {
-    box-shadow: -10px -15px 75px rgba(#eba814, 1);
+    box-shadow: -10px -15px 75px rgba($taproot, 1);
   }
 }
 
 .blink-bg {
-  color: #fff;
-  background: repeating-linear-gradient(#9d7c05, #9d7c05 0.163525%, #d5a90a 100%) !important;
+  color: var(--fg);
+  background: repeating-linear-gradient($taproot-dark, $taproot-dark 0.163525%, $taproot-light 100%) !important;
   animation: shadowyBackground 1s infinite;
-  box-shadow: -10px -15px 75px rgba(#eba814, 1);
+  box-shadow: -10px -15px 75px rgba($taproot, 1);
   transition: 100ms all ease-in;
 }
 

From 4c205eb09dfa978cfa3024e31ccaba69781820be Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Mon, 2 Jan 2023 12:26:10 -0600
Subject: [PATCH 02/13] implement theme switching service

---
 frontend/src/app/app.constants.ts             |  43 +++++++-
 .../block-overview-graph.component.ts         |  10 +-
 .../block-overview-graph/block-scene.ts       |  21 ++--
 .../block-overview-graph/tx-view.ts           |  36 +++++-
 .../components/fees-box/fees-box.component.ts |  10 +-
 .../mempool-blocks.component.ts               |   6 +-
 frontend/src/app/services/theme.service.ts    | 103 ++++++++++++++++++
 frontend/src/theme-contrast.scss              |  70 ++++++++++++
 8 files changed, 279 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/app/services/theme.service.ts
 create mode 100644 frontend/src/theme-contrast.scss

diff --git a/frontend/src/app/app.constants.ts b/frontend/src/app/app.constants.ts
index 17105d97e..2af8117b8 100644
--- a/frontend/src/app/app.constants.ts
+++ b/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 = [
+  '83fd00',
+  '83f609',
+  '83ef12',
+  '83e71a',
+  '83e023',
+  '83d92c',
+  '83d235',
+  '83cb3e',
+  '83c446',
+  '83bc4f',
+  '83b558',
+  '83ae61',
+  '83a76a',
+  '83a072',
+  '83997b',
+  '839184',
+  '838a8d',
+  '838395',
+  '837c9e',
+  '8375a7',
+  '836eb0',
+  '8366b9',
+  '835fc1',
+  '8358ca',
+  '8351d3',
+  '834adc',
+  '8343e5',
+  '833bed',
+  '8334f6',
+  '832dff',
+  '832dff',
+  '832dff',
+  '832dff',
+  '832dff',
+  '832dff',
+  '832dff',
+  '832dff',
+  '832dff',
+];
+
 export const chartColors = [
   "#D81B60",
   "#8E24AA",
diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
index 003531fce..7ab147345 100644
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
+++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
@@ -7,6 +7,7 @@ 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 'src/app/services/theme.service';
 import { Subscription } from 'rxjs';
 import { defaultColorFunction, setOpacity, defaultFeeColors, defaultAuditFeeColors, defaultMarginalFeeColors, defaultAuditColors } from './utils';
 import { ActiveFilter, FilterMode, toFlags } from '../../shared/filters.utils';
@@ -55,6 +56,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
 
   @ViewChild('blockCanvas')
   canvas: ElementRef<HTMLCanvasElement>;
+  themeChangedSubscription: Subscription;
 
   gl: WebGLRenderingContext;
   animationFrameRequest: number;
@@ -86,6 +88,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);
@@ -104,6 +107,10 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
       if (this.gl) {
         this.initCanvas();
         this.resizeCanvas();
+        this.themeChangedSubscription = this.themeService.themeChanged$.subscribe(() => {
+          // force full re-render
+          this.resizeCanvas();
+        });
       }
     }
   }
@@ -149,6 +156,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();
     }
   }
 
@@ -291,7 +299,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();
diff --git a/frontend/src/app/components/block-overview-graph/block-scene.ts b/frontend/src/app/components/block-overview-graph/block-scene.ts
index 5d2196f1e..853301ee7 100644
--- a/frontend/src/app/components/block-overview-graph/block-scene.ts
+++ b/frontend/src/app/components/block-overview-graph/block-scene.ts
@@ -3,12 +3,14 @@ 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 { ThemeService } from 'src/app/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 {
@@ -90,7 +92,7 @@ export default class BlockScene {
     });
     this.layout = new BlockLayout({ width: this.gridWidth, height: this.gridHeight });
     txs.forEach(tx => {
-      const txView = new TxView(tx, this);
+      const txView = new TxView(tx, this, this.theme);
       this.txs[tx.txid] = txView;
       this.place(txView);
       this.saveGridToScreenPosition(txView);
@@ -136,7 +138,7 @@ export default class BlockScene {
     });
     txs.forEach(tx => {
       if (!this.txs[tx.txid]) {
-        this.txs[tx.txid] = new TxView(tx, this);
+        this.txs[tx.txid] = new TxView(tx, this, this.theme);
       }
     });
 
@@ -178,7 +180,7 @@ export default class BlockScene {
     if (resetLayout) {
       add.forEach(tx => {
         if (!this.txs[tx.txid]) {
-          this.txs[tx.txid] = new TxView(tx, this);
+          this.txs[tx.txid] = new TxView(tx, this, this.theme);
         }
       });
       this.layout = new BlockLayout({ width: this.gridWidth, height: this.gridHeight });
@@ -198,7 +200,7 @@ export default class BlockScene {
 
       // try to insert new txs directly
       const remaining = [];
-      add.map(tx => new TxView(tx, this)).sort(feeRateDescending).forEach(tx => {
+      add.map(tx => new TxView(tx, this, this.theme)).sort(feeRateDescending).forEach(tx => {
         if (!this.tryInsertByFee(tx)) {
           remaining.push(tx);
         }
@@ -228,9 +230,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;
@@ -240,6 +242,7 @@ export default class BlockScene {
     this.vertexArray = vertexArray;
     this.highlightingEnabled = highlighting;
     this.getColor = colorFunction || defaultColorFunction;
+    this.theme = theme;
 
     this.scene = {
       count: 0,
diff --git a/frontend/src/app/components/block-overview-graph/tx-view.ts b/frontend/src/app/components/block-overview-graph/tx-view.ts
index 742c305f5..13de08aa6 100644
--- a/frontend/src/app/components/block-overview-graph/tx-view.ts
+++ b/frontend/src/app/components/block-overview-graph/tx-view.ts
@@ -5,6 +5,8 @@ import { hexToColor } from './utils';
 import BlockScene from './block-scene';
 import { TransactionStripped } from '../../interfaces/node-api.interface';
 import { TransactionFlags } from '../../shared/filters.utils';
+import { feeLevels } from '../../app.constants';
+import { ThemeService } from 'src/app/services/theme.service';
 
 const hoverTransitionTime = 300;
 const defaultHoverColor = hexToColor('1bd8f4');
@@ -36,6 +38,7 @@ export default class TxView implements TransactionStripped {
   status?: 'found' | 'missing' | 'sigop' | 'fresh' | 'freshcpfp' | 'added' | 'prioritized' | 'censored' | 'selected' | 'rbf' | 'accelerated';
   context?: 'projected' | 'actual';
   scene?: BlockScene;
+  theme: ThemeService;
 
   initialised: boolean;
   vertexArray: FastVertexArray;
@@ -50,7 +53,7 @@ export default class TxView implements TransactionStripped {
 
   dirty: boolean;
 
-  constructor(tx: TransactionStripped, scene: BlockScene) {
+  constructor(tx: TransactionStripped, scene: BlockScene, theme: ThemeService) {
     this.scene = scene;
     this.context = tx.context;
     this.txid = tx.txid;
@@ -66,6 +69,7 @@ export default class TxView implements TransactionStripped {
     this.bigintFlags = tx.flags ? (BigInt(tx.flags) | (this.acc ? TransactionFlags.acceleration : 0n)): 0n;
     this.initialised = false;
     this.vertexArray = scene.vertexArray;
+    this.theme = theme;
 
     this.hover = false;
 
@@ -138,10 +142,10 @@ export default class TxView implements TransactionStripped {
 
   // Temporarily override the tx color
   // returns minimum transition end time
-  setHover(hoverOn: boolean, color: Color | void = defaultHoverColor): number {
+  setHover(hoverOn: boolean, color: Color | void): number {
     if (hoverOn) {
       this.hover = true;
-      this.hoverColor = color;
+      this.hoverColor = color || this.theme.defaultHoverColor;
 
       this.sprite.update({
         ...this.hoverColor,
@@ -191,4 +195,30 @@ export default class TxView implements TransactionStripped {
     this.dirty = false;
     return performance.now() + hoverTransitionTime;
   }
+
+  getColor(): Color {
+    const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, this.feerate) < feeLvl) - 1;
+    const feeLevelColor = this.theme.feeColors[feeLevelIndex] || this.theme.feeColors[this.theme.mempoolFeeColors.length - 1];
+    // Block audit
+    switch(this.status) {
+      case 'censored':
+        return this.theme.auditColors.censored;
+      case 'missing':
+        return this.theme.auditColors.missing;
+      case 'fresh':
+        return this.theme.auditColors.missing;
+      case 'added':
+        return this.theme.auditColors.added;
+      case 'selected':
+        return this.theme.auditColors.selected;
+      case 'found':
+        if (this.context === 'projected') {
+          return this.theme.auditFeeColors[feeLevelIndex] || this.theme.auditFeeColors[this.theme.mempoolFeeColors.length - 1];
+        } else {
+          return feeLevelColor;
+        }
+      default:
+        return feeLevelColor;
+    }
+  }
 }
diff --git a/frontend/src/app/components/fees-box/fees-box.component.ts b/frontend/src/app/components/fees-box/fees-box.component.ts
index 4f9772b22..2523822f4 100644
--- a/frontend/src/app/components/fees-box/fees-box.component.ts
+++ b/frontend/src/app/components/fees-box/fees-box.component.ts
@@ -2,8 +2,9 @@ import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { StateService } from '../../services/state.service';
 import { Observable, combineLatest } 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 'src/app/services/theme.service';
 
 @Component({
   selector: 'app-fees-box',
@@ -18,7 +19,8 @@ export class FeesBoxComponent implements OnInit {
   noPriority = '#2e324e';
 
   constructor(
-    private stateService: StateService
+    private stateService: StateService,
+    private themeService: ThemeService,
   ) { }
 
   ngOnInit(): void {
@@ -33,11 +35,11 @@ export class FeesBoxComponent implements OnInit {
         tap((fees) => {
           let feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => fees.minimumFee >= feeLvl);
           feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex;
-          const startColor = '#' + (mempoolFeeColors[feeLevelIndex - 1] || mempoolFeeColors[mempoolFeeColors.length - 1]);
+          const startColor = '#' + (this.themeService.mempoolFeeColors[feeLevelIndex - 1] || this.themeService.mempoolFeeColors[this.themeService.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]);
+          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;
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
index ed5b61f2b..0614bfec0 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
+++ b/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 'src/app/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) => {
diff --git a/frontend/src/app/services/theme.service.ts b/frontend/src/app/services/theme.service.ts
new file mode 100644
index 000000000..2d4ba17a3
--- /dev/null
+++ b/frontend/src/app/services/theme.service.ts
@@ -0,0 +1,103 @@
+import { Injectable } from '@angular/core';
+import { audit, Subject } from 'rxjs';
+import { Color } from '../components/block-overview-graph/sprite-types';
+import { defaultMempoolFeeColors, contrastMempoolFeeColors } from '../app.constants';
+import { StorageService } from './storage.service';
+
+const defaultAuditColors = {
+  censored: hexToColor('f344df'),
+  missing: darken(desaturate(hexToColor('f344df'), 0.3), 0.7),
+  added: hexToColor('0099ff'),
+  selected: darken(desaturate(hexToColor('0099ff'), 0.3), 0.7),
+};
+const contrastAuditColors = {
+  censored: hexToColor('ffa8ff'),
+  missing: darken(desaturate(hexToColor('ffa8ff'), 0.3), 0.7),
+  added: hexToColor('00bb98'),
+  selected: darken(desaturate(hexToColor('00bb98'), 0.3), 0.7),
+};
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ThemeService {
+  style: HTMLLinkElement;
+  theme: string = 'default';
+  themeChanged$: Subject<string> = new Subject();
+  mempoolFeeColors: string[] = defaultMempoolFeeColors;
+
+  /* block visualization colors */
+  defaultHoverColor: Color;
+  feeColors: Color[];
+  auditFeeColors: Color[];
+  auditColors: { [category: string]: Color } = defaultAuditColors;
+
+  constructor(
+    private storageService: StorageService,
+  ) {
+    const theme = this.storageService.getValue('theme-preference') || 'default';
+    this.apply(theme);
+  }
+
+  apply(theme) {
+    this.theme = theme;
+    if (theme !== 'default') {
+      if (theme === 'contrast') {
+        this.mempoolFeeColors = contrastMempoolFeeColors;
+        this.auditColors = contrastAuditColors;
+      }
+      if (!this.style) {
+        this.style = document.createElement('link');
+        this.style.rel = 'stylesheet';
+        this.style.href = `theme-${theme}.css`;
+        document.head.appendChild(this.style);
+      } else {
+        this.style.href = `theme-${theme}.css`;
+      }
+    } else {
+      this.mempoolFeeColors = defaultMempoolFeeColors;
+      this.auditColors = defaultAuditColors;
+      if (this.style) {
+        this.style.remove();
+        this.style = null;
+      }
+    }
+    this.updateFeeColors();
+    this.storageService.setValue('theme-preference', theme);
+    this.themeChanged$.next(this.theme);
+  }
+
+  updateFeeColors() {
+    this.defaultHoverColor = hexToColor('1bd8f4');
+    this.feeColors = this.mempoolFeeColors.map(hexToColor);
+    this.auditFeeColors = this.feeColors.map((color) => darken(desaturate(color, 0.3), 0.9));
+  }
+}
+
+export function hexToColor(hex: string): Color {
+  return {
+    r: parseInt(hex.slice(0, 2), 16) / 255,
+    g: parseInt(hex.slice(2, 4), 16) / 255,
+    b: parseInt(hex.slice(4, 6), 16) / 255,
+    a: 1
+  };
+}
+
+export function desaturate(color: Color, amount: number): Color {
+  const gray = (color.r + color.g + color.b) / 6;
+  return {
+    r: color.r + ((gray - color.r) * amount),
+    g: color.g + ((gray - color.g) * amount),
+    b: color.b + ((gray - color.b) * amount),
+    a: color.a,
+  };
+}
+
+export function darken(color: Color, amount: number): Color {
+  return {
+    r: color.r * amount,
+    g: color.g * amount,
+    b: color.b * amount,
+    a: color.a,
+  }
+}
diff --git a/frontend/src/theme-contrast.scss b/frontend/src/theme-contrast.scss
new file mode 100644
index 000000000..48d9a1034
--- /dev/null
+++ b/frontend/src/theme-contrast.scss
@@ -0,0 +1,70 @@
+/* Theme */
+$bg: #ff1f31;
+$active-bg: #ff131f;
+$hover-bg: #ff131e;
+$fg: #ff0;
+
+/* Bootstrap */
+
+$body-bg: $bg;
+$body-color: $fg;
+$gray-800: $bg;
+$gray-700: $fg;
+
+$nav-tabs-link-active-bg: $active-bg;
+
+$primary: #105fb0;
+$secondary: #2d3348;
+$tertiary: #653b9c;
+$success: #1a9436;
+$info: #1bd8f4;
+
+$h5-font-size: 1.15rem !default;
+
+$pagination-bg: $body-bg;
+$pagination-border-color: $gray-800;
+$pagination-disabled-bg:           $fg;
+$pagination-disabled-border-color: $bg;
+$pagination-active-color:          $fg;
+$pagination-active-bg:             $tertiary;
+$pagination-hover-bg:              $hover-bg;
+$pagination-hover-border-color:     $bg;
+$pagination-disabled-bg:          $bg;
+
+$custom-select-indicator-color: $fg;
+
+.input-group-text {
+  background-color: #1c2031 !important;
+  border: 1px solid #20263e !important;
+}
+
+$link-color:                $info;
+$link-decoration:           none !default;
+$link-hover-color:          darken($link-color, 15%) !default;
+$link-hover-decoration:     underline !default;
+
+$dropdown-bg: $bg;
+$dropdown-link-color: $fg;
+
+$dropdown-link-hover-color: $fg;
+$dropdown-link-hover-bg: $active-bg;
+
+$dropdown-link-active-color: $fg;
+$dropdown-link-active-bg: $active-bg;
+
+@import "~bootstrap/scss/bootstrap";
+
+:root {
+  --bg: #{$bg};
+  --active-bg: #{$active-bg};
+  --hover-bg: #{$hover-bg};
+  --fg: #{$fg};
+
+  --primary: #{$primary};
+  --secondary: #{$secondary};
+  --tertiary: #{$tertiary};
+  --success: #{$success};
+  --info: #{$info};
+
+  --box-bg: var(--box-bg);
+}
\ No newline at end of file

From 1ca05a029a244a7a77e60951f321fc73247a2760 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Mon, 2 Jan 2023 13:08:25 -0600
Subject: [PATCH 03/13] add theme selector to main dashboard

---
 .../theme-selector.component.html             |  6 ++++
 .../theme-selector.component.scss             |  0
 .../theme-selector.component.ts               | 31 +++++++++++++++++++
 .../global-footer.component.html              |  3 ++
 frontend/src/app/shared/shared.module.ts      |  3 ++
 5 files changed, 43 insertions(+)
 create mode 100644 frontend/src/app/components/theme-selector/theme-selector.component.html
 create mode 100644 frontend/src/app/components/theme-selector/theme-selector.component.scss
 create mode 100644 frontend/src/app/components/theme-selector/theme-selector.component.ts

diff --git a/frontend/src/app/components/theme-selector/theme-selector.component.html b/frontend/src/app/components/theme-selector/theme-selector.component.html
new file mode 100644
index 000000000..994ade99c
--- /dev/null
+++ b/frontend/src/app/components/theme-selector/theme-selector.component.html
@@ -0,0 +1,6 @@
+<div [formGroup]="themeForm" class="text-small text-center ml-2">
+    <select formControlName="theme" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 160px;" (change)="changeTheme()">
+        <option value="default" i18n="theme.mempool-theme">Mempool Theme</option>
+        <option value="contrast" i18n="theme.high-contrast">High Contrast</option>
+    </select>
+</div>
diff --git a/frontend/src/app/components/theme-selector/theme-selector.component.scss b/frontend/src/app/components/theme-selector/theme-selector.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/components/theme-selector/theme-selector.component.ts b/frontend/src/app/components/theme-selector/theme-selector.component.ts
new file mode 100644
index 000000000..7f38844bb
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.html b/frontend/src/app/shared/components/global-footer/global-footer.component.html
index cc9cb3538..eee4756a9 100644
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.html
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.html
@@ -21,6 +21,9 @@
           <div class="selector">
             <app-rate-unit-selector></app-rate-unit-selector>
           </div>
+          <div class="selector">
+            <app-theme-selector></app-theme-selector>
+          </div>
           <a *ngIf="stateService.isMempoolSpaceBuild" class="btn btn-purple sponsor d-none d-sm-flex justify-content-center" [routerLink]="['/login' | relativeUrl]">
             <span *ngIf="loggedIn" i18n="shared.my-account">My Account</span>
             <span *ngIf="!loggedIn" i18n="shared.sign-in">Sign In</span>
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
index 5e58ef080..72d9eb04d 100644
--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@@ -34,6 +34,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { LanguageSelectorComponent } from '../components/language-selector/language-selector.component';
 import { FiatSelectorComponent } from '../components/fiat-selector/fiat-selector.component';
 import { RateUnitSelectorComponent } from '../components/rate-unit-selector/rate-unit-selector.component';
+import { ThemeSelectorComponent } from '../components/theme-selector/theme-selector.component';
 import { BrowserOnlyDirective } from './directives/browser-only.directive';
 import { ServerOnlyDirective } from './directives/server-only.directive';
 import { ColoredPriceDirective } from './directives/colored-price.directive';
@@ -119,6 +120,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     TxFeeRatingComponent,
     LanguageSelectorComponent,
     FiatSelectorComponent,
+    ThemeSelectorComponent,
     RateUnitSelectorComponent,
     ScriptpubkeyTypePipe,
     RelativeUrlPipe,
@@ -257,6 +259,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     LanguageSelectorComponent,
     FiatSelectorComponent,
     RateUnitSelectorComponent,
+    ThemeSelectorComponent,
     ScriptpubkeyTypePipe,
     RelativeUrlPipe,
     Hex2asciiPipe,

From 79dd263fb120333d2621f92e53a025ca6b39b7c4 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Tue, 3 Jan 2023 05:24:14 -0600
Subject: [PATCH 04/13] add high contrast theme

---
 frontend/angular.json                         |   5 +
 frontend/src/app/app.constants.ts             |  78 ++---
 .../block-fee-rates-graph.component.ts        |   2 +-
 .../block-fees-graph.component.ts             |   2 +-
 .../block-health-graph.component.ts           |   2 +-
 .../block-overview-tooltip.component.scss     |   2 +-
 .../block-rewards-graph.component.ts          |   2 +-
 .../block-sizes-weights-graph.component.ts    |   2 +-
 .../app/components/block/block.component.scss |   2 -
 .../difficulty/difficulty.component.scss      |   2 +-
 .../fees-box/fees-box.component.scss          |   3 +-
 .../components/fees-box/fees-box.component.ts |  43 ++-
 .../components/footer/footer.component.scss   |  10 +-
 .../hashrate-chart.component.scss             |   2 +-
 .../hashrate-chart.component.ts               |   2 +-
 .../hashrate-chart-pools.component.ts         |   2 +-
 .../liquid-master-page.component.scss         |   2 +-
 .../master-page/master-page.component.scss    |   2 +-
 .../mining-dashboard.component.html           |   4 +-
 .../mining-dashboard.component.scss           |   4 +-
 .../pool-ranking/pool-ranking.component.scss  |   2 +-
 .../pool-ranking/pool-ranking.component.ts    |   8 +-
 .../app/components/pool/pool.component.scss   |   2 +-
 .../src/app/components/pool/pool.component.ts |   2 +-
 .../reward-stats/reward-stats.component.scss  |   2 +-
 .../search-results.component.scss             |   2 +-
 .../transactions-list.component.scss          |   8 +-
 .../tx-bowtie-graph-tooltip.component.scss    |   2 +-
 .../app/dashboard/dashboard.component.html    |   2 +-
 .../app/dashboard/dashboard.component.scss    |   2 +-
 .../docs/api-docs/api-docs-nav.component.scss |   2 +-
 .../channels-statistics.component.scss        |   2 +-
 .../lightning-dashboard.component.html        |   4 +-
 .../lightning-dashboard.component.scss        |   4 +-
 .../node-fee-chart.component.ts               |   2 +-
 .../node-statistics-chart.component.ts        |   2 +-
 .../node-statistics.component.scss            |   2 +-
 .../nodes-channels-map.component.ts           |   2 +-
 .../nodes-channels/node-channels.component.ts |   2 +-
 .../nodes-map/nodes-map.component.ts          |   2 +-
 .../nodes-networks-chart.component.scss       |   2 +-
 .../nodes-networks-chart.component.ts         |   2 +-
 .../nodes-per-country-chart.component.ts      |   8 +-
 .../nodes-per-isp-chart.component.scss        |   2 +-
 .../nodes-per-isp-chart.component.ts          |   8 +-
 .../nodes-rankings-dashboard.component.html   |   6 +-
 .../nodes-rankings-dashboard.component.scss   |   4 +-
 .../lightning-statistics-chart.component.scss |   2 +-
 .../lightning-statistics-chart.component.ts   |   2 +-
 frontend/src/app/services/theme.service.ts    |  18 +-
 frontend/src/index.liquid.html                |   2 +-
 frontend/src/index.mempool.html               |   2 +-
 frontend/src/styles.scss                      |  12 +-
 frontend/src/theme-contrast.scss              | 296 +++++++++++++++++-
 54 files changed, 446 insertions(+), 149 deletions(-)

diff --git a/frontend/angular.json b/frontend/angular.json
index f55c59ae9..f631cce4d 100644
--- a/frontend/angular.json
+++ b/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,
diff --git a/frontend/src/app/app.constants.ts b/frontend/src/app/app.constants.ts
index 2af8117b8..a8ba96ed4 100644
--- a/frontend/src/app/app.constants.ts
+++ b/frontend/src/app/app.constants.ts
@@ -40,45 +40,45 @@ export const defaultMempoolFeeColors = [
 ];
 
 export const contrastMempoolFeeColors = [
-  '83fd00',
-  '83f609',
-  '83ef12',
-  '83e71a',
-  '83e023',
-  '83d92c',
-  '83d235',
-  '83cb3e',
-  '83c446',
-  '83bc4f',
-  '83b558',
-  '83ae61',
-  '83a76a',
-  '83a072',
-  '83997b',
-  '839184',
-  '838a8d',
-  '838395',
-  '837c9e',
-  '8375a7',
-  '836eb0',
-  '8366b9',
-  '835fc1',
-  '8358ca',
-  '8351d3',
-  '834adc',
-  '8343e5',
-  '833bed',
-  '8334f6',
-  '832dff',
-  '832dff',
-  '832dff',
-  '832dff',
-  '832dff',
-  '832dff',
-  '832dff',
-  '832dff',
-  '832dff',
-];
+  '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',
+  'ffaf24',
+  'ffaf24',
+  'ffaf24',
+  'ffaf24',
+  'ffaf24',
+  'ffaf24',
+  'ffaf24',
+  'ffaf24',
+ ];
 
 export const chartColors = [
   "#D81B60",
diff --git a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts
index 13fa60364..ba3489e17 100644
--- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts
+++ b/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',
diff --git a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts
index 4a2fa9808..eb567c2a6 100644
--- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts
+++ b/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',
diff --git a/frontend/src/app/components/block-health-graph/block-health-graph.component.ts b/frontend/src/app/components/block-health-graph/block-health-graph.component.ts
index efd490d1f..e48d5c091 100644
--- a/frontend/src/app/components/block-health-graph/block-health-graph.component.ts
+++ b/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',
diff --git a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss
index 51edee1e8..135f1cfe6 100644
--- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss
+++ b/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;
diff --git a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts
index 46b614b78..d0c154420 100644
--- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts
+++ b/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',
diff --git a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts
index 7db01bec9..bf591ad70 100644
--- a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts
+++ b/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',
diff --git a/frontend/src/app/components/block/block.component.scss b/frontend/src/app/components/block/block.component.scss
index 32de75c1e..a7ebafbe5 100644
--- a/frontend/src/app/components/block/block.component.scss
+++ b/frontend/src/app/components/block/block.component.scss
@@ -175,9 +175,7 @@ h1 {
   }
 
   a {
-    color: #1ad8f4;
     &:hover, &:focus {
-      color: #09a3ba;
       display: inline-block;
     }
   }
diff --git a/frontend/src/app/components/difficulty/difficulty.component.scss b/frontend/src/app/components/difficulty/difficulty.component.scss
index ecd63a684..eda486966 100644
--- a/frontend/src/app/components/difficulty/difficulty.component.scss
+++ b/frontend/src/app/components/difficulty/difficulty.component.scss
@@ -96,7 +96,7 @@
 }
 
 .card-title {
-  color: #4a68b9;
+  color: var(--title-fg);
   font-size: 1rem;
 }
 
diff --git a/frontend/src/app/components/fees-box/fees-box.component.scss b/frontend/src/app/components/fees-box/fees-box.component.scss
index dee87f7f2..0272936ee 100644
--- a/frontend/src/app/components/fees-box/fees-box.component.scss
+++ b/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;
@@ -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%;
diff --git a/frontend/src/app/components/fees-box/fees-box.component.ts b/frontend/src/app/components/fees-box/fees-box.component.ts
index 2523822f4..d3a1f19b9 100644
--- a/frontend/src/app/components/fees-box/fees-box.component.ts
+++ b/frontend/src/app/components/fees-box/fees-box.component.ts
@@ -1,6 +1,6 @@
-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 } from '../../app.constants';
 import { map, startWith, tap } from 'rxjs/operators';
@@ -12,15 +12,18 @@ import { ThemeService } from 'src/app/services/theme.service';
   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 themeService: ThemeService,
+    private cd: ChangeDetectorRef,
   ) { }
 
   ngOnInit(): void {
@@ -33,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);
-          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) => 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.fees = fees;
+          this.setFeeGradient();
         }
       )
     );
+    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();
   }
 }
diff --git a/frontend/src/app/components/footer/footer.component.scss b/frontend/src/app/components/footer/footer.component.scss
index a7c0f2c2b..b21f39676 100644
--- a/frontend/src/app/components/footer/footer.component.scss
+++ b/frontend/src/app/components/footer/footer.component.scss
@@ -40,16 +40,8 @@
   }
 }
 
-.txPerSecond {
-  color: #4a9ff4;
-}
-
 .mempoolSize {
-  color: #4a68b9;
-}
-
-.unconfirmedTx {
-  color: #f14d80;
+  color: var(--title-fg);
 }
 
 .info-block {
diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
index df5795b90..dc19dc9d1 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
@@ -94,7 +94,7 @@
     }
     .card-title {
       font-size: 1rem;
-      color: #4a68b9;
+      color: var(--title-fg);
     }
     .card-text {
       font-size: 18px;
diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
index 04c2721d2..b61f88521 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
+++ b/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',
diff --git a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
index c6498b25d..5ac2cc10d 100644
--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
+++ b/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',
diff --git a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss
index ce3127042..1577b5c88 100644
--- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss
+++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss
@@ -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;
diff --git a/frontend/src/app/components/master-page/master-page.component.scss b/frontend/src/app/components/master-page/master-page.component.scss
index 1bead6f52..2f5bc536e 100644
--- a/frontend/src/app/components/master-page/master-page.component.scss
+++ b/frontend/src/app/components/master-page/master-page.component.scss
@@ -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;
diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
index c4fca72eb..6b37d7dd9 100644
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
+++ b/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>
diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
index 87a773ab2..a7948b40e 100644
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
@@ -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 {
diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
index ce5813da1..65f4f1f5c 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
+++ b/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;
diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
index 43088329a..91422d2d4 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
+++ b/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: () => {
@@ -184,7 +184,7 @@ export class PoolRankingComponent implements OnInit {
       name: 'Other' + (isMobile() ? `` : ` (${totalShareOther.toFixed(2)}%)`),
       label: {
         overflow: 'none',
-        color: '#b1b1b1',
+        color: 'var(--tooltip-grey)',
         alignTo: 'edge',
         edgeDistance: edgeDistance
       },
@@ -193,7 +193,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: () => {
diff --git a/frontend/src/app/components/pool/pool.component.scss b/frontend/src/app/components/pool/pool.component.scss
index b2975639e..36bdc93e9 100644
--- a/frontend/src/app/components/pool/pool.component.scss
+++ b/frontend/src/app/components/pool/pool.component.scss
@@ -190,7 +190,7 @@ div.scrollable {
 }
 
 .data-title {
-  color: #4a68b9;
+  color: var(--title-fg);
   font-size: 14px;
 }
 
diff --git a/frontend/src/app/components/pool/pool.component.ts b/frontend/src/app/components/pool/pool.component.ts
index 7c6b5de38..3d2d0ac81 100644
--- a/frontend/src/app/components/pool/pool.component.ts
+++ b/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',
diff --git a/frontend/src/app/components/reward-stats/reward-stats.component.scss b/frontend/src/app/components/reward-stats/reward-stats.component.scss
index e541e30ef..2237d8716 100644
--- a/frontend/src/app/components/reward-stats/reward-stats.component.scss
+++ b/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;
diff --git a/frontend/src/app/components/search-form/search-results/search-results.component.scss b/frontend/src/app/components/search-form/search-results/search-results.component.scss
index 496e718d8..5540d7e7a 100644
--- a/frontend/src/app/components/search-form/search-results/search-results.component.scss
+++ b/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;
diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.scss b/frontend/src/app/components/transactions-list/transactions-list.component.scss
index f4e58f1af..2bae3de2c 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.scss
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.scss
@@ -13,15 +13,15 @@
 	}
 }
 .green {
-  color:#28a745;
+  color: var(--green);
 }
 
 .red {
-  color:var(--red);
+  color: var(--red);
 }
 
 .grey {
-  color:#6c757d;
+  color: var(--grey);
 }
 
 .mobile-bottomcol {
@@ -159,7 +159,7 @@ h2 {
 }
 
 .grey-info-text {
-	color:#6c757d;
+	color: var(--grey);
 	font-style: italic;
 	font-size: 12px;
 }
diff --git a/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.scss b/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.scss
index 97cfcddb7..0c973ad00 100644
--- a/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.scss
+++ b/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;
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index 5df8256ca..a6b67384b 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -63,7 +63,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>
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss
index ffc9449f7..08d77beeb 100644
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@@ -12,7 +12,7 @@
 }
 
 .card-title {
-  color: #4a68b9;
+  color: var(--title-fg);
   font-size: 1rem;
 }
 
diff --git a/frontend/src/app/docs/api-docs/api-docs-nav.component.scss b/frontend/src/app/docs/api-docs/api-docs-nav.component.scss
index 9db2f56e9..c22d95ed2 100644
--- a/frontend/src/app/docs/api-docs/api-docs-nav.component.scss
+++ b/frontend/src/app/docs/api-docs/api-docs-nav.component.scss
@@ -1,5 +1,5 @@
 p {
-  color: #4a68b9;
+  color: var(--title-fg);
   font-weight: 700;
   margin: 10px 0;
   margin: 15px 0 10px 0;
diff --git a/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss b/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss
index 0b144ae2b..614b9bd94 100644
--- a/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss
+++ b/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss
@@ -1,5 +1,5 @@
 .card-title {
-  color: #4a68b9;
+  color: var(--title-fg);
   font-size: 10px;
   margin-bottom: 4px;  
   font-size: 1rem;      
diff --git a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html
index ec59b7432..490a5d706 100644
--- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html
+++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html
@@ -65,7 +65,7 @@
           <a class="title-link" href="" [routerLink]="['/lightning/nodes/rankings/liquidity' | relativeUrl]">
             <h5 class="card-title d-inline" i18n="lightning.liquidity-ranking">Liquidity Ranking</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-top-nodes-per-capacity [nodes$]="nodesRanking$" [statistics$]="statistics$" [widget]="true"></app-top-nodes-per-capacity>
         </div>
@@ -79,7 +79,7 @@
           <a class="title-link" href="" [routerLink]="['/lightning/nodes/rankings/connectivity' | relativeUrl]">
             <h5 class="card-title d-inline" i18n="lightning.connectivity-ranking">Connectivity Ranking</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-top-nodes-per-channels [nodes$]="nodesRanking$" [statistics$]="statistics$" [widget]="true"></app-top-nodes-per-channels>
         </div>
diff --git a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
index 435adc925..7fb011146 100644
--- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
+++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
@@ -35,10 +35,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 {
diff --git a/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts b/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts
index ac53da255..7f329eaf2 100644
--- a/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts
+++ b/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts
@@ -142,7 +142,7 @@ export class NodeFeeChartComponent implements OnInit {
         borderRadius: 4,
         shadowColor: 'rgba(0, 0, 0, 0.5)',
         textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
           align: 'left',
         },
         borderColor: '#000',
diff --git a/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts b/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts
index b2016b2cf..35cd8b236 100644
--- a/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts
+++ b/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts
@@ -112,7 +112,7 @@ export class NodeStatisticsChartComponent implements OnInit {
         borderRadius: 4,
         shadowColor: 'rgba(0, 0, 0, 0.5)',
         textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
           align: 'left',
         },
         borderColor: '#000',
diff --git a/frontend/src/app/lightning/node-statistics/node-statistics.component.scss b/frontend/src/app/lightning/node-statistics/node-statistics.component.scss
index cb580a151..7b3f778b1 100644
--- a/frontend/src/app/lightning/node-statistics/node-statistics.component.scss
+++ b/frontend/src/app/lightning/node-statistics/node-statistics.component.scss
@@ -1,5 +1,5 @@
 .card-title {
-  color: #4a68b9;
+  color: var(--title-fg);
   font-size: 10px;
   margin-bottom: 4px;  
   font-size: 1rem;
diff --git a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts
index 18edc6ab1..3447348be 100644
--- a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts
+++ b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts
@@ -296,7 +296,7 @@ export class NodesChannelsMap implements OnInit {
             borderRadius: 4,
             shadowColor: 'rgba(0, 0, 0, 0.5)',
             textStyle: {
-              color: '#b1b1b1',
+              color: 'var(--tooltip-grey)',
               align: 'left',
             },
             borderColor: '#000',
diff --git a/frontend/src/app/lightning/nodes-channels/node-channels.component.ts b/frontend/src/app/lightning/nodes-channels/node-channels.component.ts
index 1954e429a..fce014e77 100644
--- a/frontend/src/app/lightning/nodes-channels/node-channels.component.ts
+++ b/frontend/src/app/lightning/nodes-channels/node-channels.component.ts
@@ -96,7 +96,7 @@ export class NodeChannels implements OnChanges {
             borderRadius: 4,
             shadowColor: 'rgba(0, 0, 0, 0.5)',
             textStyle: {
-              color: '#b1b1b1',
+              color: 'var(--tooltip-grey)',
             },
             borderColor: '#000',
             formatter: (value): string => {
diff --git a/frontend/src/app/lightning/nodes-map/nodes-map.component.ts b/frontend/src/app/lightning/nodes-map/nodes-map.component.ts
index 054f1ab6f..50df2f986 100644
--- a/frontend/src/app/lightning/nodes-map/nodes-map.component.ts
+++ b/frontend/src/app/lightning/nodes-map/nodes-map.component.ts
@@ -196,7 +196,7 @@ export class NodesMap implements OnInit, OnChanges {
             borderRadius: 0,
             shadowColor: 'rgba(0, 0, 0, 0.5)',
             textStyle: {
-              color: '#b1b1b1',
+              color: 'var(--tooltip-grey)',
               align: 'left',
             },
             borderColor: '#000',
diff --git a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
index ca8ef711e..ab8cb92da 100644
--- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
+++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
@@ -93,7 +93,7 @@
     }
     .card-title {
       font-size: 1rem;
-      color: #4a68b9;
+      color: var(--title-fg);
     }
     .card-text {
       font-size: 18px;
diff --git a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts
index 3c2868794..9784e0a5b 100644
--- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts
+++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts
@@ -255,7 +255,7 @@ export class NodesNetworksChartComponent implements OnInit, OnChanges {
         borderRadius: 4,
         shadowColor: 'rgba(0, 0, 0, 0.5)',
         textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
           align: 'left',
         },
         borderColor: '#000',
diff --git a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts
index 89300e5eb..7eba4f9b7 100644
--- a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts
+++ b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts
@@ -85,7 +85,7 @@ export class NodesPerCountryChartComponent implements OnInit {
         name: country.name.en + (this.isMobile() ? `` : ` (${country.share}%)`),
         label: {
           overflow: 'truncate',
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
           alignTo: 'edge',
           edgeDistance: edgeDistance,
         },
@@ -95,7 +95,7 @@ export class NodesPerCountryChartComponent implements OnInit {
           borderRadius: 4,
           shadowColor: 'rgba(0, 0, 0, 0.5)',
           textStyle: {
-            color: '#b1b1b1',
+            color: 'var(--tooltip-grey)',
           },
           borderColor: '#000',
           formatter: () => {
@@ -119,7 +119,7 @@ export class NodesPerCountryChartComponent implements OnInit {
       name: $localize`Other (${totalShareOther.toFixed(2) + '%'})`,
       label: {
         overflow: 'truncate',
-        color: '#b1b1b1',
+        color: 'var(--tooltip-grey)',
         alignTo: 'edge',
         edgeDistance: edgeDistance
       },
@@ -128,7 +128,7 @@ export class NodesPerCountryChartComponent implements OnInit {
         borderRadius: 4,
         shadowColor: 'rgba(0, 0, 0, 0.5)',
         textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
         },
         borderColor: '#000',
         formatter: () => {
diff --git a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss
index 056e9024b..b9490d579 100644
--- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss
+++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss
@@ -89,7 +89,7 @@
     }
     .card-title {
       font-size: 1rem;
-      color: #4a68b9;
+      color: var(--title-fg);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
diff --git a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts
index c5928c7d9..429d7ee36 100644
--- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts
+++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts
@@ -144,7 +144,7 @@ export class NodesPerISPChartComponent implements OnInit {
         label: {
           overflow: 'truncate',
           width: isMobile() ? 75 : this.widget ? 125 : 250,
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
           alignTo: 'edge',
           edgeDistance: edgeDistance,
         },
@@ -154,7 +154,7 @@ export class NodesPerISPChartComponent implements OnInit {
           borderRadius: 4,
           shadowColor: 'rgba(0, 0, 0, 0.5)',
           textStyle: {
-            color: '#b1b1b1',
+            color: 'var(--tooltip-grey)',
           },
           borderColor: '#000',
           formatter: () => {
@@ -178,7 +178,7 @@ export class NodesPerISPChartComponent implements OnInit {
       name: $localize`Other (${totalShareOther.toFixed(2) + '%'})`,
       label: {
         overflow: 'truncate',
-        color: '#b1b1b1',
+        color: 'var(--tooltip-grey)',
         alignTo: 'edge',
         edgeDistance: edgeDistance
       },
@@ -187,7 +187,7 @@ export class NodesPerISPChartComponent implements OnInit {
         borderRadius: 4,
         shadowColor: 'rgba(0, 0, 0, 0.5)',
         textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
         },
         borderColor: '#000',
         formatter: () => {
diff --git a/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.html b/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.html
index ef23bc104..11fb9227c 100644
--- a/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.html
+++ b/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.html
@@ -8,7 +8,7 @@
             <h5 class="card-title d-inline" i18n="lightning.liquidity-ranking">Liquidity Ranking</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>
+              style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
           </a>
           <app-top-nodes-per-capacity [nodes$]="nodesRanking$" [widget]="true"></app-top-nodes-per-capacity>
         </div>
@@ -22,7 +22,7 @@
             <h5 class="card-title d-inline" i18n="lightning.connectivity-ranking">Connectivity Ranking</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>
+              style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
           </a>
           <app-top-nodes-per-channels [nodes$]="nodesRanking$" [widget]="true"></app-top-nodes-per-channels>
         </div>
@@ -36,7 +36,7 @@
             <h5 class="card-title d-inline" i18n="lightning.top-channels-age">Oldest nodes</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>
+              style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
           </a>
           <app-oldest-nodes [widget]="true"></app-oldest-nodes>
         </div>
diff --git a/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.scss b/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.scss
index c9c322603..0f94397c6 100644
--- a/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.scss
+++ b/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.scss
@@ -14,10 +14,10 @@
 
 .card-title {
   font-size: 1rem;
-  color: #4a68b9;
+  color: var(--title-fg);
 }
 .card-title > a {
-  color: #4a68b9;
+  color: var(--title-fg);
 }
 
 .card-text {
diff --git a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
index 456ebdf38..1779394c9 100644
--- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
+++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
@@ -93,7 +93,7 @@
     }
     .card-title {
       font-size: 1rem;
-      color: #4a68b9;
+      color: var(--title-fg);
     }
     .card-text {
       font-size: 18px;
diff --git a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts
index b008ce8e5..44f359ae8 100644
--- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts
+++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts
@@ -164,7 +164,7 @@ export class LightningStatisticsChartComponent implements OnInit, OnChanges {
         borderRadius: 4,
         shadowColor: 'rgba(0, 0, 0, 0.5)',
         textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
           align: 'left',
         },
         borderColor: '#000',
diff --git a/frontend/src/app/services/theme.service.ts b/frontend/src/app/services/theme.service.ts
index 2d4ba17a3..58fdc6575 100644
--- a/frontend/src/app/services/theme.service.ts
+++ b/frontend/src/app/services/theme.service.ts
@@ -46,13 +46,17 @@ export class ThemeService {
         this.mempoolFeeColors = contrastMempoolFeeColors;
         this.auditColors = contrastAuditColors;
       }
-      if (!this.style) {
-        this.style = document.createElement('link');
-        this.style.rel = 'stylesheet';
-        this.style.href = `theme-${theme}.css`;
-        document.head.appendChild(this.style);
-      } else {
-        this.style.href = `theme-${theme}.css`;
+      try {
+        if (!this.style) {
+          this.style = document.createElement('link');
+          this.style.rel = 'stylesheet';
+          this.style.href = `${theme}.css`;
+          document.head.appendChild(this.style);
+        } else {
+          this.style.href = `${theme}.css`;
+        }
+      } catch (err) {
+        console.log('failed to apply theme stylesheet: ', err);
       }
     } else {
       this.mempoolFeeColors = defaultMempoolFeeColors;
diff --git a/frontend/src/index.liquid.html b/frontend/src/index.liquid.html
index 7ec1ee0ee..5aa14cd2d 100644
--- a/frontend/src/index.liquid.html
+++ b/frontend/src/index.liquid.html
@@ -33,7 +33,7 @@
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
   <meta name="msapplication-TileColor" content="#000000">
   <meta name="msapplication-config" content="/resources/liquid/favicons/browserconfig.xml">
-  <meta name="theme-color" content="var(--bg)">
+  <meta name="theme-color" content="#1d1f31">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
diff --git a/frontend/src/index.mempool.html b/frontend/src/index.mempool.html
index 3edb144d1..838af21d0 100644
--- a/frontend/src/index.mempool.html
+++ b/frontend/src/index.mempool.html
@@ -32,7 +32,7 @@
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
   <meta name="msapplication-TileColor" content="#000000">
   <meta name="msapplication-config" content="/resources/favicons/browserconfig.xml">
-  <meta name="theme-color" content="var(--bg)">
+  <meta name="theme-color" content="#1d1f31">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 380a98ac5..fa680ed60 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -3,13 +3,13 @@ $bg: #1d1f31;
 $active-bg: #11131f;
 $hover-bg: #12131e;
 $fg: #fff;
+$title-fg: #4a68b9;
 
 $taproot: #eba814;
 $taproot-light: #d5a90a;
 $taproot-dark: #9d7c05;
 
 /* Bootstrap */
-
 $body-bg: $bg;
 $body-color: $fg;
 $gray-800: $bg;
@@ -64,6 +64,8 @@ $dropdown-link-active-bg: $active-bg;
   --active-bg: #{$active-bg};
   --hover-bg: #{$hover-bg};
   --fg: #{$fg};
+  --color-fg: #ffffff;
+  --title-fg: #{$title-fg};
 
   --primary: #{$primary};
   --secondary: #{$secondary};
@@ -93,6 +95,8 @@ $dropdown-link-active-bg: $active-bg;
   --green: #3bcc49;
   --red: #dc3545;
   --yellow: #ffd800;
+  --grey: #6c757d;
+  --tooltip-grey: #b1b1b1;
 }
 
 html, body {
@@ -384,7 +388,7 @@ html:lang(ru) .card-title {
   background: rgba($active-bg, 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;
@@ -394,7 +398,7 @@ html:lang(ru) .card-title {
   thead {
     th {
       font-size: 9px;
-      color: #b1b1b1;
+      color: var(--tooltip-grey);
       text-align: right;
       &:first-child {
         text-align: left;
@@ -485,7 +489,7 @@ html:lang(ru) .card-title {
   thead {
     th {
       font-size: 9px;
-      color: #b1b1b1;
+      color: var(--tooltip-grey);
       text-align: right;
       &:first-child {
         text-align: left;
diff --git a/frontend/src/theme-contrast.scss b/frontend/src/theme-contrast.scss
index 48d9a1034..a3d0bb9ca 100644
--- a/frontend/src/theme-contrast.scss
+++ b/frontend/src/theme-contrast.scss
@@ -1,8 +1,13 @@
 /* Theme */
-$bg: #ff1f31;
-$active-bg: #ff131f;
-$hover-bg: #ff131e;
-$fg: #ff0;
+$bg: #11131f;
+$active-bg: #000000;
+$hover-bg: #12131e;
+$fg: #fff;
+$title-fg: #2055e3;
+
+$taproot: #eba814;
+$taproot-light: #d5a90a;
+$taproot-dark: #9d7c05;
 
 /* Bootstrap */
 
@@ -13,11 +18,11 @@ $gray-700: $fg;
 
 $nav-tabs-link-active-bg: $active-bg;
 
-$primary: #105fb0;
-$secondary: #2d3348;
-$tertiary: #653b9c;
-$success: #1a9436;
-$info: #1bd8f4;
+$primary: #007cfa;
+$secondary: #272f4e;
+$tertiary: #6225b2;
+$success: #0aab2f;
+$info: #10e0ff;
 
 $h5-font-size: 1.15rem !default;
 
@@ -59,6 +64,8 @@ $dropdown-link-active-bg: $active-bg;
   --active-bg: #{$active-bg};
   --hover-bg: #{$hover-bg};
   --fg: #{$fg};
+  --color-fg: #fff;
+  --title-fg: #{$title-fg};
 
   --primary: #{$primary};
   --secondary: #{$secondary};
@@ -66,5 +73,274 @@ $dropdown-link-active-bg: $active-bg;
   --success: #{$success};
   --info: #{$info};
 
-  --box-bg: var(--box-bg);
+  --transparent-fg: #ffffffbb;
+
+  --box-bg: #171c2a;
+  --stat-box-bg: #0b1018;
+  --green: #83fd00;
+}
+
+body {
+  background-color: var(--active-bg);
+}
+
+.box {
+  background-color: var(--box-bg);
+  border: 1px solid rgba(0,0,0,.125);
+  box-shadow: 0.125rem 0.125rem 0.25rem rgba(0,0,0,0.075);
+}
+
+.navbar-nav.liquid > .active {
+  background-color: var(--liquid) !important;
+}
+
+.navbar-nav.testnet > .active {
+  background-color: var(--testnet) !important;
+}
+
+.navbar-nav.signet > .active {
+  background-color: var(--signet) !important;
+}
+
+.navbar-nav.liquidtestnet > .active {
+  background-color: var(--liquidtestnet) !important;
+}
+
+.form-control {
+  color: #495057;
+}
+.form-control:focus {
+  color: #000;
+}
+
+.form-control.form-control-secondary {
+  color: var(--fg);
+  background-color: var(--secondary);
+  border: 1px solid var(--secondary);
+}
+.form-control.form-control-secondary:focus {
+  color: var(--fg);
+}
+
+.skeleton-loader {
+  background: #2e324e no-repeat;
+  background-image: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0),
+    #5d6182,
+    rgba(255, 255, 255, 0)
+  );
+}
+
+.symbol {
+	color: var(--transparent-fg);
+}
+
+.progress-text {
+  span {
+    color: var(--fg) !important;
+  }
+}
+
+.block-size, .blocks-container {
+  span {
+    color: var(--fg) !important;
+  }
+}
+
+.title-block {
+  color: var(--fg);
+  border-top: 3px solid var(--fg);
+}
+
+.title-address, .title-asset {
+  color: var(--fg);
+}
+
+.close {
+  color: var(--fg);
+}
+
+.close:hover {
+  color: var(--fg);
+}
+
+.green-color {
+  color: var(--green);
+}
+
+.red-color {
+  color: var(--red);
+}
+
+.yellow-color {
+  color: var(--yellow);
+}
+
+.table-striped tbody tr:nth-of-type(odd) {
+  background-color: var(--stat-box-bg);
+}
+
+.bordertop {
+  border-top: 1px solid #4c4c4c;
+}
+
+.tx-wrapper-tooltip-chart,
+.fees-wrapper-tooltip-chart {
+  background: rgba($active-bg, 0.95);
+  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
+  color: var(--tooltip-grey);
+  thead {
+    th {
+      color: var(--tooltip-grey);
+    }
+  }
+  .title {
+    color: var(--fg);
+  }
+  .active {
+    color: yellow !important;
+    .value,
+    .total-partial {
+      color: yellow !important;
+      .symbol {
+        color: yellow !important;
+      }
+    }
+  }
+  .item {
+    .value {
+      .symbol {
+        color: #7e7e7e;
+      }
+    }
+  }
+  .total-label {
+    color: var(--fg);
+  }
+  thead {
+    th {
+      color: var(--tooltip-grey);
+    }
+  }
+  .total-percentage-bar {
+    span {
+      background: #282d47;
+    }
+  }
+}
+
+
+.fees-wrapper-tooltip-chart-advanced,
+.tx-wrapper-tooltip-chart-advanced {
+  background: rgba($bg, 0.98);
+  thead {
+    .total-progress-percentage-bar,
+    .total-progress-sum-bar {
+      div {
+        background: #29324c94;
+      }
+    }
+  }
+  .total-percentage-bar-background {
+    background-color: #282d47;
+  }
+}
+
+hr {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.progress-mempool {
+  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, var(--mainnet-alt) 100%);
+}
+
+.progress-mempool.testnet {
+  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--testnet) 0%, var(--testnet-alt) 100%);
+}
+
+.progress-mempool.signet {
+  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--signet) 0%, var(--signet-alt) 100%);
+}
+
+.progress-mempool.liquid {
+  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--liquid) 0%, var(--testnet-alt) 100%);
+}
+
+.progress-dark {
+  background-color: var(--stat-box-bg);
+}
+
+.progress-darklight {
+  background-color: var(--box-bg);
+}
+
+.progress-light {
+  background-color: #2e324e;
+}
+
+.progress.progress-health {
+  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, $success 100%);
+}
+
+.progress-bar.progress-bar-health {
+  background: var(--secondary);
+}
+
+.alert-mempool {
+  color: var(--fg);
+  background-color: var(--tertiary);
+  border-color: var(--alert-bg);
+}
+
+// ASM opcode colors
+
+.constants { color: #ff8c00 }
+.control { color: #87ceeb }
+.stack { color: #ffa500 }
+.splice { color: #46b5e2 }
+.logic { color: #46b5e2 }
+.arithmetic { color: #cae8d0 }
+.crypto { color: #fa3d3d }
+.locktime { color: #ff8c00 }
+.reserved { color: #ff8c00 }
+
+.tab-pane {
+  .card {
+    button {
+      color: var(--fg);
+    }
+
+    .collapsed {
+      background-color: var(--secondary);
+      color: var(--info);
+    }
+  }
+}
+
+
+.pagination-container {
+  background: var(--bg);
+}
+
+
+// Blinking block
+@keyframes shadowyBackground {
+  0% {
+    box-shadow: -10px -15px 75px rgba($taproot, 1);
+  }
+  50% {
+    box-shadow: -10px -15px 75px rgba($taproot, .3);
+  }
+  100% {
+    box-shadow: -10px -15px 75px rgba($taproot, 1);
+  }
+}
+
+.blink-bg {
+  color: var(--fg);
+  background: repeating-linear-gradient($taproot-dark, $taproot-dark 0.163525%, $taproot-light 100%) !important;
+  animation: shadowyBackground 1s infinite;
+  box-shadow: -10px -15px 75px rgba($taproot, 1);
+  transition: 100ms all ease-in;
 }
\ No newline at end of file

From c827953ca5695764d30fc49e14fee124e7194045 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Thu, 4 Apr 2024 16:33:50 +0900
Subject: [PATCH 05/13] Fix remaining bugs from rebase

---
 .../accelerator-dashboard.component.ts        |  6 +--
 .../components/block-overview-graph/utils.ts  | 12 +++---
 .../difficulty/difficulty.component.html      | 41 -------------------
 frontend/src/theme-contrast.scss              |  2 +-
 4 files changed, 10 insertions(+), 51 deletions(-)

diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
index 1d3603739..dda2b036b 100644
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
@@ -8,12 +8,12 @@ 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 } from '../../../app.constants';
 import { ServicesApiServices } from '../../../services/services-api.service';
 import { detectWebGL } from '../../../shared/graphs.utils';
 
 const acceleratedColor: Color = hexToColor('8F5FF6');
-const normalColors = mempoolFeeColors.map(hex => hexToColor(hex + '5F'));
+const normalColors = defaultMempoolFeeColors.map(hex => hexToColor(hex + '5F'));
 
 interface AccelerationBlock extends BlockExtended {
   accelerationCount: number,
@@ -128,7 +128,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 normalColors[feeLevelIndex] || normalColors[defaultMempoolFeeColors.length - 1];
     }
   }
 
diff --git a/frontend/src/app/components/block-overview-graph/utils.ts b/frontend/src/app/components/block-overview-graph/utils.ts
index b6c8ccf5e..2f23d4cb9 100644
--- a/frontend/src/app/components/block-overview-graph/utils.ts
+++ b/frontend/src/app/components/block-overview-graph/utils.ts
@@ -1,4 +1,4 @@
-import { feeLevels, mempoolFeeColors } from '../../app.constants';
+import { feeLevels, defaultMempoolFeeColors } from '../../app.constants';
 import { Color } from './sprite-types';
 import TxView from './tx-view';
 
@@ -38,7 +38,7 @@ export function setOpacity(color: Color, opacity: number): Color {
 }
 
 // precomputed colors
-export const defaultFeeColors = mempoolFeeColors.map(hexToColor);
+export const defaultFeeColors = defaultMempoolFeeColors.map(hexToColor);
 export const defaultAuditFeeColors = defaultFeeColors.map((color) => darken(desaturate(color, 0.3), 0.9));
 export const defaultMarginalFeeColors = defaultFeeColors.map((color) => darken(desaturate(color, 0.8), 1.1));
 export const defaultAuditColors = {
@@ -58,7 +58,7 @@ export function defaultColorFunction(
 ): Color {
   const rate = tx.fee / tx.vsize; // color by simple single-tx fee rate
   const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1;
-  const feeLevelColor = feeColors[feeLevelIndex] || feeColors[mempoolFeeColors.length - 1];
+  const feeLevelColor = feeColors[feeLevelIndex] || feeColors[defaultMempoolFeeColors.length - 1];
   // Normal mode
   if (!tx.scene?.highlightingEnabled) {
     if (tx.acc) {
@@ -75,7 +75,7 @@ export function defaultColorFunction(
     case 'missing':
     case 'sigop':
     case 'rbf':
-      return marginalFeeColors[feeLevelIndex] || marginalFeeColors[mempoolFeeColors.length - 1];
+      return marginalFeeColors[feeLevelIndex] || marginalFeeColors[defaultMempoolFeeColors.length - 1];
     case 'fresh':
     case 'freshcpfp':
       return auditColors.missing;
@@ -84,12 +84,12 @@ export function defaultColorFunction(
     case 'prioritized':
       return auditColors.prioritized;
     case 'selected':
-      return marginalFeeColors[feeLevelIndex] || marginalFeeColors[mempoolFeeColors.length - 1];
+      return marginalFeeColors[feeLevelIndex] || marginalFeeColors[defaultMempoolFeeColors.length - 1];
     case 'accelerated':
       return auditColors.accelerated;
     case 'found':
       if (tx.context === 'projected') {
-        return auditFeeColors[feeLevelIndex] || auditFeeColors[mempoolFeeColors.length - 1];
+        return auditFeeColors[feeLevelIndex] || auditFeeColors[defaultMempoolFeeColors.length - 1];
       } else {
         return feeLevelColor;
       }
diff --git a/frontend/src/app/components/difficulty/difficulty.component.html b/frontend/src/app/components/difficulty/difficulty.component.html
index c4983b8dd..ff31d4f57 100644
--- a/frontend/src/app/components/difficulty/difficulty.component.html
+++ b/frontend/src/app/components/difficulty/difficulty.component.html
@@ -101,47 +101,6 @@
           </div>
           <div class="symbol">
             <span i18n="difficulty-box.new-subsidy">New subsidy</span>
-        <div class="item">
-          <h5 class="card-title" i18n="difficulty-box.remaining">Remaining</h5>
-          <div class="card-text">
-            <ng-container *ngTemplateOutlet="epochData.remainingBlocks === 1 ? blocksSingular : blocksPlural; context: {$implicit: epochData.remainingBlocks }"></ng-container>
-            <ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
-            <ng-template #blocksSingular let-i i18n="shared.block">{{ i }} <span class="shared-block">block</span></ng-template>
-          </div>
-          <div class="symbol"><app-time-until [time]="epochData.estimatedRetargetDate" [fastRender]="true"></app-time-until></div>
-        </div>
-        <div class="item">
-          <h5 class="card-title" i18n="difficulty-box.estimate">Estimate</h5>
-          <div *ngIf="epochData.remainingBlocks < 1870; else recentlyAdjusted" class="card-text" [ngStyle]="{'color': epochData.colorAdjustments}">
-            <span *ngIf="epochData.change > 0; else arrowDownDifficulty" >
-              <fa-icon class="retarget-sign" [icon]="['fas', 'caret-up']" [fixedWidth]="true"></fa-icon>
-            </span>
-            <ng-template #arrowDownDifficulty >
-              <fa-icon class="retarget-sign" [icon]="['fas', 'caret-down']" [fixedWidth]="true"></fa-icon>
-            </ng-template>
-            {{ epochData.change | absolute | number: '1.2-2' }}
-            <span class="symbol">%</span>
-          </div>
-          <ng-template #recentlyAdjusted>
-            <div class="card-text">&#8212;</div>
-          </ng-template>
-          <div class="symbol">
-            <span i18n="difficulty-box.previous">Previous</span>:
-            <span [ngStyle]="{'color': epochData.colorPreviousAdjustments}">
-              <span *ngIf="epochData.previousRetarget > 0; else arrowDownPreviousDifficulty" >
-                <fa-icon class="previous-retarget-sign" [icon]="['fas', 'caret-up']" [fixedWidth]="true"></fa-icon>
-              </span>
-              <ng-template #arrowDownPreviousDifficulty >
-                <fa-icon class="previous-retarget-sign" [icon]="['fas', 'caret-down']" [fixedWidth]="true"></fa-icon>
-              </ng-template>
-              {{ epochData.previousRetarget | absolute | number: '1.2-2' }} </span> %
-          </div>
-        </div>
-        <div class="item" *ngIf="showProgress">
-          <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: var(--primary)" [ngStyle]="{'width': epochData.base}">&nbsp;</div>
           </div>
         </div>
         <div class="item">
diff --git a/frontend/src/theme-contrast.scss b/frontend/src/theme-contrast.scss
index a3d0bb9ca..57c8d2988 100644
--- a/frontend/src/theme-contrast.scss
+++ b/frontend/src/theme-contrast.scss
@@ -57,7 +57,7 @@ $dropdown-link-hover-bg: $active-bg;
 $dropdown-link-active-color: $fg;
 $dropdown-link-active-bg: $active-bg;
 
-@import "~bootstrap/scss/bootstrap";
+@import "bootstrap/scss/bootstrap";
 
 :root {
   --bg: #{$bg};

From 2f8d0d90cd697488d1694ca8f234ec7e46cba46f Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Thu, 4 Apr 2024 18:17:51 +0900
Subject: [PATCH 06/13] Update theme-contrast.css

---
 frontend/src/theme-contrast.scss | 916 ++++++++++++++++++++++++++++++-
 1 file changed, 909 insertions(+), 7 deletions(-)

diff --git a/frontend/src/theme-contrast.scss b/frontend/src/theme-contrast.scss
index 57c8d2988..e4aacdd83 100644
--- a/frontend/src/theme-contrast.scss
+++ b/frontend/src/theme-contrast.scss
@@ -10,7 +10,6 @@ $taproot-light: #d5a90a;
 $taproot-dark: #9d7c05;
 
 /* Bootstrap */
-
 $body-bg: $bg;
 $body-color: $fg;
 $gray-800: $bg;
@@ -73,23 +72,83 @@ $dropdown-link-active-bg: $active-bg;
   --success: #{$success};
   --info: #{$info};
 
-  --transparent-fg: #ffffffbb;
-
   --box-bg: #171c2a;
   --stat-box-bg: #0b1018;
+  --alert-bg: #3a1c61;
+  --transparent-fg: #ffffffbb;
+
+  --testnet: #1d486f;
+  --signet: #6f1d5d;
+  --liquid: #116761;
+  --liquidtestnet: #494a4a;
+
+  --mainnet-alt: #9339f4;
+  --testnet-alt: #183550;
+  --signet-alt: #471850;
+  --liquidtestnet-alt: #272e46;
+
+  --taproot: #eba814;
+  --taproot-light: #d5a90a;
+  --taproot-dark: #9d7c05;
+
   --green: #83fd00;
+  --red: #ff3d00;
+  --yellow: #ffcc00;
+  --grey: #7e7e7e;
+  --tooltip-grey: #b1b1b1;
+}
+
+html, body {
+  height: 100%;
 }
 
 body {
   background-color: var(--active-bg);
+  min-width: 375px;
+  padding-bottom: 60px;
+}
+
+.container {
+  position: relative;
+}
+
+main {
+  margin-top: 24px;
+}
+
+.full-height {
+  @media (max-width: 767.98px) {
+    min-height: 100vh;
+  }
+}
+
+:focus {
+  outline: none !important;
 }
 
 .box {
+  min-height: 1px;
+  padding: 1.25rem;
+  position: relative;
+  min-width: 0;
+  word-wrap: break-word;
   background-color: var(--box-bg);
+  background-clip: border-box;
   border: 1px solid rgba(0,0,0,.125);
   box-shadow: 0.125rem 0.125rem 0.25rem rgba(0,0,0,0.075);
 }
 
+.preview-box {
+  min-height: 520px;
+  padding: 1rem 3rem 1.5rem;
+}
+
+@media (max-width: 767.98px) {
+  .box {
+    padding: 0.75rem;
+  }
+}
+
 .navbar-nav.liquid > .active {
   background-color: var(--liquid) !important;
 }
@@ -107,10 +166,38 @@ body {
 }
 
 .form-control {
-  color: #495057;
+  color: #fff;
+  background-color: var(--secondary);
+  border: 1px solid rgba(17, 19, 31, 0.2);
 }
+
 .form-control:focus {
-  color: #000;
+  color: #fff;
+  background-color: var(--secondary);
+}
+
+.btn-purple {
+  background-color: var(--tertiary);
+  border-color: var(--tertiary);
+}
+
+.btn-purple:not(:disabled):not(.disabled):active, .btn-purple:not(:disabled):not(.disabled).active, .show > .btn-purple.dropdown-toggle {
+  color: #fff;
+  background-color: #4d2d77;
+  border-color: #472a6e;
+}
+
+.btn-purple:focus, .btn-purple.focus {
+  color: #fff;
+  background-color: #533180;
+  border-color: #4d2d77;
+  box-shadow: 0 0 0 0.2rem rgb(124 88 171 / 50%);
+}
+
+.btn-purple:hover {
+  color: #fff;
+  background-color: #533180;
+  border-color: #4d2d77;
 }
 
 .form-control.form-control-secondary {
@@ -122,7 +209,21 @@ body {
   color: var(--fg);
 }
 
+.h2-match-table {
+  padding-left: .65rem;
+}
+
 .skeleton-loader {
+  box-sizing: border-box;
+  /**
+  * `overflow` and `position` are required steps to make sure
+  * the component respects the specified dimensions
+  * given via `theme` object @Input attribute
+  */
+  overflow: hidden;
+  position: relative;
+
+  animation: progress 2s ease-in-out infinite;
   background: #2e324e no-repeat;
   background-image: linear-gradient(
     90deg,
@@ -130,10 +231,37 @@ body {
     #5d6182,
     rgba(255, 255, 255, 0)
   );
+  background-size: 200px 100%;
+  border-radius: 4px;
+  width: 100%;
+  height: 14px;
+  display: inline-block;
+
+  &:after,
+  &:before {
+    box-sizing: border-box;
+  }
+
+  &.circle {
+    width: 40px;
+    height: 40px;
+    margin: 5px;
+    border-radius: 50%;
+  }
+}
+
+@keyframes progress {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
 }
 
 .symbol {
 	color: var(--transparent-fg);
+	font-size: 12px;
 }
 
 .progress-text {
@@ -143,18 +271,64 @@ body {
 }
 
 .block-size, .blocks-container {
-  span {
+  .symbol {
+    font-size: 16px;
     color: var(--fg) !important;
   }
 }
 
+.break-all {
+  white-space: normal;
+  word-break: break-all;
+}
+
 .title-block {
   color: var(--fg);
+  padding-top: 20px;
+  padding-bottom: 10px;
   border-top: 3px solid var(--fg);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }
 
 .title-address, .title-asset {
   color: var(--fg);
+  padding-bottom: 10px;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 7px;
+  @media (min-width: 576px) {
+    flex-direction: row;
+    margin-bottom: 0px;
+  }
+  h1 {
+    line-height: 1;
+  }
+}
+
+.smaller-text {
+  font-size: 14px;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.table-xs th, .table-xs td {
+  padding: 0.1rem;
+}
+
+.table {
+  margin-bottom: 0;
+  font-size: 0.9rem;
+  @media (min-width: 576px) {
+    font-size: 1rem;
+  }
+}
+
+.table-fixed {
+  table-layout: fixed;
 }
 
 .close {
@@ -165,6 +339,10 @@ body {
   color: var(--fg);
 }
 
+.white-color {
+  color: white;
+}
+
 .green-color {
   color: var(--green);
 }
@@ -185,18 +363,60 @@ body {
   border-top: 1px solid #4c4c4c;
 }
 
+.smaller-text {
+  font-size: 14px;
+}
+
+html:lang(ru) .card-title {
+  font-size: 0.9rem;
+}
+
+/* MEMPOOL CHARTS - start */
+
+.mempool-wrapper-tooltip-chart {
+  height: 250px;
+}
+
+.echarts {
+  height: 100%;
+  min-height: 180px;
+}
+
 .tx-wrapper-tooltip-chart,
 .fees-wrapper-tooltip-chart {
   background: rgba($active-bg, 0.95);
+  border-radius: 4px;
   box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
   color: var(--tooltip-grey);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 10px 15px;
+  text-align: left;
+  width: 200px;
   thead {
     th {
+      font-size: 9px;
       color: var(--tooltip-grey);
+      text-align: right;
+      &:first-child {
+        text-align: left;
+        left: -1px;
+        position: relative;
+      }
+      &:nth-child(4) {
+        display: none;
+      }
     }
   }
   .title {
+    font-size: 12px;
+    font-weight: 700;
+    margin-bottom: 2px;
     color: var(--fg);
+    .total-value {
+      float: right;
+    }
   }
   .active {
     color: yellow !important;
@@ -209,37 +429,225 @@ body {
     }
   }
   .item {
+    line-height: 0.8;
+    .indicator-container {
+      .indicator {
+        display: inline-block;
+        margin-right: 5px;
+        border-radius: 2px;
+        margin-top: 5px;
+        width: 9px;
+        height: 9px;
+      }
+    }
     .value {
+      text-align: right;
       .symbol {
         color: #7e7e7e;
+        font-size: 9px !important;
       }
     }
+    .symbol {
+      font-size: 9px;
+    }
+    .total-partial {
+      font-size: 10px;
+      width: 58px;
+      text-align: right;
+    }
+    .total-percentage-bar {
+      padding-left: 8px;
+    }
+    .total-progress-percentage {
+      width: 45px;
+      height: 5px;
+      text-align: right;
+      display: none;
+    }
+    .total-progress-sum {
+      width: 58px;
+      text-align: right;
+    }
   }
   .total-label {
+    width: 100%;
+    text-align: left;
     color: var(--fg);
+    margin-top: 5px;
+    font-size: 14px;
+    span {
+      float: right;
+    }
+    .symbol {
+      margin-left: 3px;
+      font-size: 9px;
+      position: relative;
+      top: 2px;
+    }
   }
   thead {
     th {
+      font-size: 9px;
       color: var(--tooltip-grey);
+      text-align: right;
+      &:first-child {
+        text-align: left;
+        left: -1px;
+        position: relative;
+      }
+      &:nth-child(4) {
+        display: none;
+      }
+      &:nth-child(5) {
+        display: none;
+      }
     }
   }
   .total-percentage-bar {
+    margin: auto;
+    width: 35px;
+    position: relative;
     span {
+      display: block;
       background: #282d47;
+      height: 5px;
+      border-radius: 2px;
+    }
+  }
+  .total-parcial-active {
+    text-align: right;
+    margin: 5px auto 5px;
+    padding-left: 0px;
+    span {
+      font-size: 10px;
+    }
+    .symbol {
+      font-size: 9px;
+    }
+    .total-percentage-bar {
+      width: 100%;
+      span {
+        transition: 1000 all ease-in-out;
+      }
+    }
+    .progress-percentage {
+      float: left;
     }
   }
 }
 
+.tx-wrapper-tooltip-chart {
+  width: 115px;
+  .item {
+    display: flex;
+  }
+  .value {
+    margin-top: 5px;
+  }
+  .indicator-container {
+    border-radius: 2px;
+  }
+}
+
+.fee-distribution-chart {
+  height: 265px;
+}
+
+.fees-wrapper-tooltip-chart {
+  .item {
+    font-size: 9px;
+    line-height: 0.8;
+    margin: 0px;
+  }
+  .indicator {
+    margin-right: 5px !important;
+    border-radius: 1px !important;
+    margin-top: 0px !important;
+  }
+}
 
 .fees-wrapper-tooltip-chart-advanced,
 .tx-wrapper-tooltip-chart-advanced {
+  width: 300px;
   background: rgba($bg, 0.98);
+
   thead {
+    th {
+      &:nth-child(4) {
+        display: table-cell;
+      }
+      &:nth-child(5) {
+        display: table-cell;
+      }
+    }
+  }
+  .title {
+    font-size: 15px;
+    margin-bottom: 5px;
+  }
+  .item {
+    line-height: 1.25;
+    font-size: 11px;
+    .value {
+      width: 60px;
+      .symbol {
+        font-size: 9px !important;
+      }
+    }
+    .total-partial {
+      font-size: 10px;
+      width: 58px;
+      text-align: right;
+    }
+    .total-progress-percentage {
+      width: 65px;
+      height: 4px;
+      padding: 0px 5px;
+      display: table-cell !important;
+      border-radius: 4px;
+    }
+    .total-progress-sum {
+      width: 65px;
+      height: 4px;
+      padding: 0px 5px;
+      border-radius: 4px;
+    }
     .total-progress-percentage-bar,
     .total-progress-sum-bar {
+      width: 35px;
+      height: 4px;
       div {
+        width: 100%;
+        border-radius: 4px;
+        display: block;
         background: #29324c94;
       }
+      span {
+        height: 4px;
+        border-radius: 4px;
+        display: block;
+      }
+    }
+  }
+  .total-label {
+    margin-top: 5px;
+    font-size: 14px;
+    span {
+      float: right;
+    }
+  }
+  .total-parcial-active {
+    text-align: right;
+    margin: 5px auto 5px;
+    span {
+      font-size: 10px;
+    }
+    .total-percentage-bar {
+      width: 100%;
+      left: 0;
+      span {
+        transition: 1000 all ease-in-out;
+      }
     }
   }
   .total-percentage-bar-background {
@@ -247,10 +655,73 @@ body {
   }
 }
 
+.tx-wrapper-tooltip-chart-advanced {
+  .indicator-container {
+    .indicator {
+      margin-right: 5px;
+      border-radius: 0px;
+      margin-top: 5px;
+      width: 9px;
+      height: 9px;
+    }
+  }
+}
+
+
+/* MEMPOOL CHARTS - end */
+
+.grow {
+  flex-grow: 1;
+}
+
 hr {
   border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 
+tr {
+  white-space: nowrap;
+}
+
+h1, h2, h3 {
+  margin-bottom: 1rem;
+}
+
+@media (max-width: 767.98px) {
+  h1 {
+    font-size: 2rem;
+  }
+  h2 {
+    font-size: 1.50rem;
+  }
+}
+
+@media (min-width: 992px) {
+  .lg-inline {
+    display: inline-block;
+  }
+}
+
+@media (min-width: 768px) {
+  .d-md-inline {
+    display: inline-block;
+  }
+}
+
+.header-bg {
+  font-size: 14px;
+}
+
+.progress {
+  position: relative;
+}
+
+.progress-text {
+  position: absolute;
+  top: 8.5px;
+  width: 100%;
+  text-align: center;
+}
+
 .progress-mempool {
   background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, var(--mainnet-alt) 100%);
 }
@@ -281,16 +752,36 @@ hr {
 
 .progress.progress-health {
   background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, $success 100%);
+  justify-content: flex-end;
 }
 
 .progress-bar.progress-bar-health {
   background: var(--secondary);
 }
 
+.mt-2-5, .my-2-5 {
+  margin-top: 0.75rem !important;
+}
+
 .alert-mempool {
   color: var(--fg);
   background-color: var(--tertiary);
   border-color: var(--alert-bg);
+  width: 100%;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: space-between;
+  @media (min-width: 676px){
+    flex-direction: row;
+  }
+}
+
+.flex {
+	display: flex;
+}
+
+th {
+  white-space: nowrap;
 }
 
 // ASM opcode colors
@@ -305,10 +796,353 @@ hr {
 .locktime { color: #ff8c00 }
 .reserved { color: #ff8c00 }
 
+.shortable-address {
+  font-family: monospace;
+}
+
+.full-container .card-header .formRadioGroup {
+  margin-top: 6px;
+  display: flex;
+  flex-direction: column;
+  @media (min-width: 991px) {
+    position: relative;
+    top: -100px;
+  }
+  @media (min-width: 830px) and (max-width: 991px) {
+    position: relative;
+    top: 0px;
+  }
+  @media (min-width: 830px) {
+    flex-direction: row;
+    float: right;
+    margin-top: 0px;
+  }
+  .btn-sm {
+    font-size: 9px;
+    @media (min-width: 830px) {
+      font-size: 14px;
+    }
+  }
+}
+
+.direction-ltr {
+  direction: ltr;
+}
+
+.rtl-layout {
+  text-align: start;
+
+  .navbar-brand {
+    margin-right: 0px;
+    text-align: right;
+  }
+
+  .nav-pills {
+    @extend .nav-pills;
+    display: inline-block;
+  }
+
+  .description {
+    direction: rtl;
+  }
+
+  .dropdown {
+    margin-right: 1rem;
+    margin-left: 0;
+    @media (min-width: 576px) {
+      margin-left: 1rem;
+    }
+    @media (min-width: 768px) {
+      margin-left: 0;
+    }
+  }
+  .dropdown-menu-right {
+    left: 0px;
+    right: auto;
+  }
+  .fa-circle-right {
+    @extend .fa-circle-right;
+    -webkit-transform: scaleX(-1);
+    transform: scaleX(-1);
+  }
+
+  .btn.ml-2 {
+    margin-right: 0.5rem !important;
+  }
+
+  .pool-name {
+    @extend .pool-name;
+    padding-right: 10px;
+  }
+
+  .endpoint-container {
+    @extend .endpoint-container;
+    .section-header {
+      @extend .section-header;
+      text-align: left;
+    }
+  }
+
+  .table td {
+    text-align: right;
+    .fiat {
+      @extend .fiat;
+      margin-left: 0px !important;
+      margin-right: 15px;
+    }
+  }
+
+  .table th {
+    text-align: right;
+  }
+
+  .title-block {
+    text-align: right;
+  }
+
+  .mr-3 {
+    @extend .ml-3;
+    margin-right: 0 !important;
+  }
+
+  .mr-1 {
+      @extend .ml-1;
+  }
+
+  .float-left {
+    float: right !important;
+  }
+
+  .float-right {
+    float: left !important;
+  }
+
+  .text-left {
+    text-align: right !important;
+  }
+
+  .text-right {
+    text-align: left !important;
+  }
+
+  .bitcoin-block {
+    direction: rtl;
+  }
+
+  .next-previous-blocks {
+    @extend .next-previous-blocks;
+    direction: ltr;
+  }
+
+  .tx-link {
+    @extend .tx-link;
+    margin-left: 0px;
+    margin-right: 10px;
+  }
+
+  .pagination-container {
+    @extend .pagination-container;
+    ul {
+      @extend ul;
+      padding-left: 0px;
+      padding-right: 5px;
+    }
+  }
+
+  .search-box-container {
+    @extend .search-box-container;
+    margin-right: 0 !important;
+    margin-left: 0.5rem !important;
+  }
+
+  .code {
+    @extend .code;
+    text-align: left !important;
+    direction: ltr;
+    .subtitle {
+      @extend .subtitle;
+      direction: rtl;
+      text-align: right !important;
+    }
+  }
+
+  .chart {
+    direction: ltr;
+  }
+
+  .formRadioGroup {
+    @media (min-width: 830px) {
+      float: left;
+    }
+  }
+
+  .container-graph, .full-container, .toggle-holder {
+    @extend .container-graph;
+    .formRadioGroup {
+      @extend .formRadioGroup;
+      direction: ltr;
+    }
+
+    .card-header, h1, h2, h3 {
+      direction: rtl;
+    }
+  }
+
+  .fee-progress-bar {
+    @extend .fee-progress-bar;
+    &.priority {
+      @media (767px < width < 992px), (width < 576px) {
+        width: 100%;
+      }
+      width: 75%;
+      border-radius: 10px 0px 0px 10px !important;
+    }
+  }
+
+  .fees-wrapper-tooltip-chart {
+    @extend .fees-wrapper-tooltip-chart;
+    .title {
+      direction: rtl;
+    }
+  }
+
+  .btn-link {
+    padding: 0.1rem 0.5rem 0.25rem 0 !important;
+  }
+
+  .shortable-address {
+    direction: ltr;
+    font-family: monospace;
+  }
+
+  .lastest-blocks-table {
+    @extend .lastest-blocks-table;
+    .table-cell-mined {
+      @extend .table-cell-mined;
+      text-align: right !important;
+    }
+  }
+
+  .mempool-graph {
+    @extend .mempool-graph;
+    direction: ltr;
+  }
+  .title-block {
+    .title {
+      float: right;
+    }
+  }
+  .container-buttons {
+    float: left !important;
+    width: auto !important;
+  }
+  .tx-link {
+    margin-right: 0px;
+    @media (min-width: 768px) {
+      margin-right: 10px;
+    }
+  }
+
+  .btn-audit {
+    margin-left: .5em;
+  }
+
+  .sidenav {
+    @extend .sidenav;
+    margin-left: 0px !important;
+    margin-right: -250px;
+  }
+
+  .sidenav.open {
+    margin-right: 0px;
+  }
+
+  .profile_image_container {
+    @extend .profile_image_container;
+    margin-right: 0px !important;
+    margin-left: 15px;
+  }
+
+  #blockchain-container.with-menu {
+    width: calc(100% + 120px);
+    left: 120px;
+  }
+}
+
+.scriptmessage {
+	overflow: hidden;
+	display: inline-block;
+	text-overflow: ellipsis;
+	vertical-align: middle;
+	max-width: 50px;
+	width: auto;
+  text-align: left;
+	@media (min-width: 376px) {
+		max-width: 90px;
+	}
+	@media (min-width: 476px) {
+		max-width: 180px;
+	}
+	@media (min-width: 576px) {
+		max-width: 260px;
+	}
+	@media (min-width: 768px) {
+    max-width: 400px;
+	}
+	@media (min-width: 850px) {
+    max-width: 522px;
+	}
+	@media (min-width: 992px) {
+		max-width: 190px;
+	}
+	@media (min-width: 1200px) {
+		max-width: 250px;
+	}
+}
+
+.scriptmessage.longer {
+	max-width: 230px;
+	@media (min-width: 376px) {
+		max-width: 290px;
+	}
+	@media (min-width: 476px) {
+		max-width: 380px;
+	}
+	@media (min-width: 576px) {
+		max-width: 470px;
+	}
+	@media (min-width: 768px) {
+    max-width: 850px;
+	}
+	@media (min-width: 992px) {
+		max-width: 410px;
+	}
+	@media (min-width: 1200px) {
+		max-width: 480px;
+	}
+}
+
 .tab-pane {
   .card {
+    background-color: transparent;
+    padding: 0;
+
     button {
+      text-align: left;
+      display: block;
+      width: 100%;
+      padding: 1rem 2rem;
       color: var(--fg);
+      font-weight: bold;
+      &:focus, &:hover, &:active {
+        text-decoration: none;
+        outline: none;
+        box-shadow: none;
+      }
+    }
+
+    .card-header {
+      padding: 0;
     }
 
     .collapsed {
@@ -316,13 +1150,43 @@ hr {
       color: var(--info);
     }
   }
+
+  .subtitle {
+    font-weight: bold;
+    margin-bottom: 3px;
+    button {
+      padding: 0px !important;
+    }
+  }
 }
 
 
 .pagination-container {
+  display: inline-block;
+  width: 100%;
+  justify-content: space-between;
   background: var(--bg);
+  margin: 0;
+  @media (min-width: 550px) {
+    width: auto;
+  }
+  ul {
+    justify-content: space-evenly !important;
+    margin: 0;
+    @media (min-width: 400px) {
+      width: auto;
+      padding-left: 5px;
+    }
+  }
 }
 
+.fee-estimation-wrapper {
+  .tooltip.show {
+    width: 220px;
+  }
+}
+
+
 
 // Blinking block
 @keyframes shadowyBackground {
@@ -343,4 +1207,42 @@ hr {
   animation: shadowyBackground 1s infinite;
   box-shadow: -10px -15px 75px rgba($taproot, 1);
   transition: 100ms all ease-in;
-}
\ No newline at end of file
+}
+
+.page-item {
+  font-family: monospace;
+}
+
+#divider {
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='104%25' height='100%25' fill='none' stroke='white' stroke-width='4' stroke-dasharray='10%2c17' stroke-dashoffset='18' stroke-linecap='square'/%3e%3c/svg%3e");
+}
+
+.visually-hidden {
+  display: none;
+}
+
+app-master-page, app-liquid-master-page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  padding-bottom: 60px;
+  @media (min-width: 992px) {
+    padding-bottom: 0px;
+  }
+}
+
+app-global-footer {
+  margin-top: auto;
+}
+
+.btn-xs {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  line-height: 0.5;
+  border-radius: 0.2rem;
+}
+
+.info-link fa-icon {
+  color: rgba(255, 255, 255, 0.4);
+  margin-left: 5px;
+}

From cfc3615e640cc139f696340a315dc90065b59f91 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Thu, 4 Apr 2024 18:38:08 +0900
Subject: [PATCH 07/13] Fix global footer selector css

---
 .../components/theme-selector/theme-selector.component.html   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/theme-selector/theme-selector.component.html b/frontend/src/app/components/theme-selector/theme-selector.component.html
index 994ade99c..2ba7435ec 100644
--- a/frontend/src/app/components/theme-selector/theme-selector.component.html
+++ b/frontend/src/app/components/theme-selector/theme-selector.component.html
@@ -1,5 +1,5 @@
-<div [formGroup]="themeForm" class="text-small text-center ml-2">
-    <select formControlName="theme" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 160px;" (change)="changeTheme()">
+<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>

From 621a6ea42dd3782ad82f6a1722baac04cbc53f36 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Fri, 5 Apr 2024 16:07:25 +0900
Subject: [PATCH 08/13] Fix rbf tree fade out

---
 .../app/components/rbf-timeline/rbf-timeline.component.scss | 6 +++---
 frontend/src/styles.scss                                    | 2 ++
 frontend/src/theme-contrast.scss                            | 2 ++
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
index 8962be63c..23c252190 100644
--- a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
+++ b/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;
     }
   }
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index fa680ed60..88f664982 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -77,6 +77,8 @@ $dropdown-link-active-bg: $active-bg;
   --stat-box-bg: #181b2d;
   --alert-bg: #3a1c61;
   --transparent-fg: #ffffff66;
+  --fade-out-box-bg-start: rgba(36, 39, 62, 0);
+  --fade-out-box-bg-end: rgba(36, 39, 62, 1);
 
   --testnet: #1d486f;
   --signet: #6f1d5d;
diff --git a/frontend/src/theme-contrast.scss b/frontend/src/theme-contrast.scss
index e4aacdd83..3e85adf2a 100644
--- a/frontend/src/theme-contrast.scss
+++ b/frontend/src/theme-contrast.scss
@@ -76,6 +76,8 @@ $dropdown-link-active-bg: $active-bg;
   --stat-box-bg: #0b1018;
   --alert-bg: #3a1c61;
   --transparent-fg: #ffffffbb;
+  --fade-out-box-bg-start: rgba(23, 28, 42, 0);
+  --fade-out-box-bg-end: rgba(23, 28, 42, 1);
 
   --testnet: #1d486f;
   --signet: #6f1d5d;

From cde3d878b15043fb67964a11c2ed4ed0860d7615 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Fri, 5 Apr 2024 18:36:32 +0900
Subject: [PATCH 09/13] Fix block overview graph on contrast theme

---
 .../block-overview-graph.component.ts         | 25 ++++++--
 .../block-overview-graph/block-scene.ts       |  6 +-
 .../block-overview-graph/tx-view.ts           | 28 +--------
 .../components/block-overview-graph/utils.ts  | 25 +++++++-
 frontend/src/app/services/theme.service.ts    | 59 +------------------
 5 files changed, 48 insertions(+), 95 deletions(-)

diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
index 7ab147345..15e084dec 100644
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
+++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
@@ -9,7 +9,7 @@ import { Price } from '../../services/price.service';
 import { StateService } from '../../services/state.service';
 import { ThemeService } from 'src/app/services/theme.service';
 import { Subscription } from 'rxjs';
-import { defaultColorFunction, setOpacity, defaultFeeColors, defaultAuditFeeColors, defaultMarginalFeeColors, defaultAuditColors } from './utils';
+import { defaultColorFunction, setOpacity, defaultFeeColors, defaultAuditFeeColors, defaultMarginalFeeColors, defaultAuditColors, contrastFeeColors, contrastAuditFeeColors, contrastMarginalFeeColors, contrastAuditColors, contrastColorFunction } from './utils';
 import { ActiveFilter, FilterMode, toFlags } from '../../shared/filters.utils';
 import { detectWebGL } from '../../shared/graphs.utils';
 
@@ -24,6 +24,16 @@ const unmatchedAuditColors = {
   prioritized: setOpacity(defaultAuditColors.prioritized, unmatchedOpacity),
   accelerated: setOpacity(defaultAuditColors.accelerated, unmatchedOpacity),
 };
+const unmatchedContrastFeeColors = contrastFeeColors.map(c => setOpacity(c, unmatchedOpacity));
+const unmatchedContrastAuditFeeColors = contrastAuditFeeColors.map(c => setOpacity(c, unmatchedOpacity));
+const unmatchedContrastMarginalFeeColors = contrastMarginalFeeColors.map(c => setOpacity(c, 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',
@@ -108,8 +118,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
         this.initCanvas();
         this.resizeCanvas();
         this.themeChangedSubscription = this.themeService.themeChanged$.subscribe(() => {
-          // force full re-render
-          this.resizeCanvas();
+          this.scene.setColorFunction(this.getColorFunction());
         });
       }
     }
@@ -567,9 +576,15 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
   getFilterColorFunction(flags: bigint): ((tx: TxView) => Color) {
     return (tx: TxView) => {
       if ((this.filterMode === 'and' && (tx.bigintFlags & flags) === flags) || (this.filterMode === 'or' && (flags === 0n || (tx.bigintFlags & flags) > 0n))) {
-        return defaultColorFunction(tx);
+        return this.themeService.theme !== 'default' ? contrastColorFunction(tx) : defaultColorFunction(tx);
       } else {
-        return defaultColorFunction(
+        return this.themeService.theme !== 'default' ? contrastColorFunction(
+          tx,
+          unmatchedContrastFeeColors,
+          unmatchedContrastAuditFeeColors,
+          unmatchedContrastMarginalFeeColors,
+          unmatchedContrastAuditColors
+        ) : defaultColorFunction(
           tx,
           unmatchedFeeColors,
           unmatchedAuditFeeColors,
diff --git a/frontend/src/app/components/block-overview-graph/block-scene.ts b/frontend/src/app/components/block-overview-graph/block-scene.ts
index 853301ee7..840a8b662 100644
--- a/frontend/src/app/components/block-overview-graph/block-scene.ts
+++ b/frontend/src/app/components/block-overview-graph/block-scene.ts
@@ -2,7 +2,7 @@ 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 'src/app/services/theme.service';
 
 export default class BlockScene {
@@ -69,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.dirty = true;
     if (this.initialised && this.scene) {
       this.updateColors(performance.now(), 50);
@@ -241,7 +241,7 @@ 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 = {
diff --git a/frontend/src/app/components/block-overview-graph/tx-view.ts b/frontend/src/app/components/block-overview-graph/tx-view.ts
index 13de08aa6..0317d7cbf 100644
--- a/frontend/src/app/components/block-overview-graph/tx-view.ts
+++ b/frontend/src/app/components/block-overview-graph/tx-view.ts
@@ -145,7 +145,7 @@ export default class TxView implements TransactionStripped {
   setHover(hoverOn: boolean, color: Color | void): number {
     if (hoverOn) {
       this.hover = true;
-      this.hoverColor = color || this.theme.defaultHoverColor;
+      this.hoverColor = color || defaultHoverColor;
 
       this.sprite.update({
         ...this.hoverColor,
@@ -195,30 +195,4 @@ export default class TxView implements TransactionStripped {
     this.dirty = false;
     return performance.now() + hoverTransitionTime;
   }
-
-  getColor(): Color {
-    const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, this.feerate) < feeLvl) - 1;
-    const feeLevelColor = this.theme.feeColors[feeLevelIndex] || this.theme.feeColors[this.theme.mempoolFeeColors.length - 1];
-    // Block audit
-    switch(this.status) {
-      case 'censored':
-        return this.theme.auditColors.censored;
-      case 'missing':
-        return this.theme.auditColors.missing;
-      case 'fresh':
-        return this.theme.auditColors.missing;
-      case 'added':
-        return this.theme.auditColors.added;
-      case 'selected':
-        return this.theme.auditColors.selected;
-      case 'found':
-        if (this.context === 'projected') {
-          return this.theme.auditFeeColors[feeLevelIndex] || this.theme.auditFeeColors[this.theme.mempoolFeeColors.length - 1];
-        } else {
-          return feeLevelColor;
-        }
-      default:
-        return feeLevelColor;
-    }
-  }
 }
diff --git a/frontend/src/app/components/block-overview-graph/utils.ts b/frontend/src/app/components/block-overview-graph/utils.ts
index 2f23d4cb9..ba4415e1c 100644
--- a/frontend/src/app/components/block-overview-graph/utils.ts
+++ b/frontend/src/app/components/block-overview-graph/utils.ts
@@ -1,4 +1,4 @@
-import { feeLevels, defaultMempoolFeeColors } from '../../app.constants';
+import { feeLevels, defaultMempoolFeeColors, contrastMempoolFeeColors } from '../../app.constants';
 import { Color } from './sprite-types';
 import TxView from './tx-view';
 
@@ -46,7 +46,18 @@ 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'),
+};
+
+export const contrastFeeColors = contrastMempoolFeeColors.map(hexToColor);
+export const contrastAuditFeeColors = contrastFeeColors.map((color) => darken(desaturate(color, 0.3), 0.9));
+export const contrastMarginalFeeColors = contrastFeeColors.map((color) => darken(desaturate(color, 0.8), 1.1));
+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(
@@ -100,4 +111,14 @@ export function defaultColorFunction(
         return feeLevelColor;
       }
   }
+}
+
+export function contrastColorFunction(
+  tx: TxView,
+  feeColors: Color[] = contrastFeeColors,
+  auditFeeColors: Color[] = contrastAuditFeeColors,
+  marginalFeeColors: Color[] = contrastMarginalFeeColors,
+  auditColors: { [status: string]: Color } = contrastAuditColors
+): Color {
+  return defaultColorFunction(tx, feeColors, auditFeeColors, marginalFeeColors, auditColors);
 }
\ No newline at end of file
diff --git a/frontend/src/app/services/theme.service.ts b/frontend/src/app/services/theme.service.ts
index 58fdc6575..da374bf13 100644
--- a/frontend/src/app/services/theme.service.ts
+++ b/frontend/src/app/services/theme.service.ts
@@ -1,22 +1,8 @@
 import { Injectable } from '@angular/core';
-import { audit, Subject } from 'rxjs';
-import { Color } from '../components/block-overview-graph/sprite-types';
+import { Subject } from 'rxjs';
 import { defaultMempoolFeeColors, contrastMempoolFeeColors } from '../app.constants';
 import { StorageService } from './storage.service';
 
-const defaultAuditColors = {
-  censored: hexToColor('f344df'),
-  missing: darken(desaturate(hexToColor('f344df'), 0.3), 0.7),
-  added: hexToColor('0099ff'),
-  selected: darken(desaturate(hexToColor('0099ff'), 0.3), 0.7),
-};
-const contrastAuditColors = {
-  censored: hexToColor('ffa8ff'),
-  missing: darken(desaturate(hexToColor('ffa8ff'), 0.3), 0.7),
-  added: hexToColor('00bb98'),
-  selected: darken(desaturate(hexToColor('00bb98'), 0.3), 0.7),
-};
-
 @Injectable({
   providedIn: 'root'
 })
@@ -26,12 +12,6 @@ export class ThemeService {
   themeChanged$: Subject<string> = new Subject();
   mempoolFeeColors: string[] = defaultMempoolFeeColors;
 
-  /* block visualization colors */
-  defaultHoverColor: Color;
-  feeColors: Color[];
-  auditFeeColors: Color[];
-  auditColors: { [category: string]: Color } = defaultAuditColors;
-
   constructor(
     private storageService: StorageService,
   ) {
@@ -44,7 +24,6 @@ export class ThemeService {
     if (theme !== 'default') {
       if (theme === 'contrast') {
         this.mempoolFeeColors = contrastMempoolFeeColors;
-        this.auditColors = contrastAuditColors;
       }
       try {
         if (!this.style) {
@@ -60,48 +39,12 @@ export class ThemeService {
       }
     } else {
       this.mempoolFeeColors = defaultMempoolFeeColors;
-      this.auditColors = defaultAuditColors;
       if (this.style) {
         this.style.remove();
         this.style = null;
       }
     }
-    this.updateFeeColors();
     this.storageService.setValue('theme-preference', theme);
     this.themeChanged$.next(this.theme);
   }
-
-  updateFeeColors() {
-    this.defaultHoverColor = hexToColor('1bd8f4');
-    this.feeColors = this.mempoolFeeColors.map(hexToColor);
-    this.auditFeeColors = this.feeColors.map((color) => darken(desaturate(color, 0.3), 0.9));
-  }
-}
-
-export function hexToColor(hex: string): Color {
-  return {
-    r: parseInt(hex.slice(0, 2), 16) / 255,
-    g: parseInt(hex.slice(2, 4), 16) / 255,
-    b: parseInt(hex.slice(4, 6), 16) / 255,
-    a: 1
-  };
-}
-
-export function desaturate(color: Color, amount: number): Color {
-  const gray = (color.r + color.g + color.b) / 6;
-  return {
-    r: color.r + ((gray - color.r) * amount),
-    g: color.g + ((gray - color.g) * amount),
-    b: color.b + ((gray - color.b) * amount),
-    a: color.a,
-  };
-}
-
-export function darken(color: Color, amount: number): Color {
-  return {
-    r: color.r * amount,
-    g: color.g * amount,
-    b: color.b * amount,
-    a: color.a,
-  }
 }

From 7e920f4baed59b8f89fa93cb40a058b9b6a67c07 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Sat, 6 Apr 2024 15:48:35 +0900
Subject: [PATCH 10/13] Replace more hardcoded css

---
 .../about/about-sponsors.component.scss       |  2 +-
 .../accelerate-fee-graph.component.scss       |  4 ++--
 .../accelerate-preview.component.html         |  4 ++--
 .../accelerate-preview.component.scss         |  4 ++--
 .../acceleration-fees-graph.component.scss    |  2 +-
 .../acceleration-stats.component.scss         |  2 +-
 .../accelerations-list.component.scss         |  4 ++--
 .../accelerator-dashboard.component.html      |  4 ++--
 .../accelerator-dashboard.component.scss      |  6 +++---
 .../accelerator-dashboard.component.ts        |  7 +++++--
 .../pending-stats.component.scss              |  2 +-
 .../address/address-preview.component.scss    |  2 +-
 .../components/address/address.component.scss |  2 +-
 .../src/app/components/app/app.component.ts   |  2 --
 .../app/components/asset/asset.component.scss |  2 +-
 .../block-fee-rates-graph.component.scss      |  2 +-
 .../block-filters.component.scss              | 16 +++++++--------
 .../block-overview-tooltip.component.scss     | 14 ++++++-------
 .../app/components/block/block.component.scss |  2 +-
 .../blockchain-blocks.component.scss          |  2 +-
 .../blocks-list/blocks-list.component.scss    |  2 +-
 .../clock-face/clock-face.component.scss      |  4 ++--
 .../app/components/clock/clock.component.scss |  2 +-
 .../difficulty-mining.component.html          |  2 +-
 .../difficulty-mining.component.scss          |  6 +++---
 .../difficulty/difficulty.component.scss      | 10 +++++-----
 .../expired-utxos-stats.component.html        |  2 +-
 .../expired-utxos-stats.component.scss        |  2 +-
 .../federation-addresses-list.component.scss  |  2 +-
 .../federation-addresses-stats.component.html |  4 ++--
 .../federation-addresses-stats.component.scss |  2 +-
 .../federation-utxos-list.component.scss      |  2 +-
 .../recent-pegs-list.component.scss           |  2 +-
 .../recent-pegs-stats.component.html          |  4 ++--
 .../recent-pegs-stats.component.scss          |  2 +-
 .../reserves-ratio-stats.component.html       |  2 +-
 .../reserves-ratio-stats.component.scss       |  2 +-
 .../reserves-ratio.component.ts               |  2 +-
 .../reserves-supply-stats.component.scss      |  2 +-
 .../app/components/menu/menu.component.scss   | 10 +++++-----
 .../rbf-list/rbf-list.component.scss          |  2 +-
 .../rbf-timeline/rbf-timeline.component.scss  | 20 +++++++++----------
 .../app/components/start/start.component.scss |  2 +-
 .../transaction-preview.component.scss        |  2 +-
 .../transaction/transaction.component.scss    |  8 ++++----
 .../app/dashboard/dashboard.component.html    |  4 ++--
 .../app/dashboard/dashboard.component.scss    |  6 +++---
 .../docs/api-docs/api-docs-nav.component.scss |  6 +++---
 .../app/docs/api-docs/api-docs.component.scss | 14 ++++++-------
 .../channel-close-box.component.scss          | 20 +++++++++----------
 .../app/lightning/group/group.component.scss  |  2 +-
 .../app/lightning/node/node.component.scss    |  2 +-
 .../global-footer.component.html              |  2 +-
 .../global-footer.component.scss              | 10 +++++-----
 frontend/src/styles.scss                      |  1 +
 frontend/src/theme-contrast.scss              |  1 +
 56 files changed, 128 insertions(+), 125 deletions(-)

diff --git a/frontend/src/app/components/about/about-sponsors.component.scss b/frontend/src/app/components/about/about-sponsors.component.scss
index 7c01bb9a3..0ee27d1f5 100644
--- a/frontend/src/app/components/about/about-sponsors.component.scss
+++ b/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;
diff --git a/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss b/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss
index 8d36387f3..88d9f75ed 100644
--- a/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss
+++ b/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 {
diff --git a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html
index a848a645b..622da3744 100644
--- a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html
+++ b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html
@@ -179,10 +179,10 @@
               <ng-container>
                 <tr class="group-first">
                   <td class="item">
-                    <b style="background-color: #105fb0;" class="p-1 pl-0">Maximum acceleration cost</b>
+                    <b style="background-color: var(--primary);" class="p-1 pl-0">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>
diff --git a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss
index 2e2b19ee8..5275bec64 100644
--- a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss
+++ b/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;
 }
diff --git a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss
index 11b468a24..96273dead 100644
--- a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss
+++ b/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 {
diff --git a/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.scss b/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.scss
index fcc5564a8..e685d98af 100644
--- a/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.scss
+++ b/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;
diff --git a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss
index 85e655b25..d4579bcf6 100644
--- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss
+++ b/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;
diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html
index 147e07e69..0e1c65382 100644
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html
+++ b/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" i18n="dashboard.mempool-goggles-accelerations">Mempool Goggles: 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>
           <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>
diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
index c8755c94e..e14f53dfb 100644
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
+++ b/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 {
diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
index dda2b036b..44335f4b8 100644
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
@@ -8,12 +8,14 @@ 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, defaultMempoolFeeColors } from '../../../app.constants';
+import { feeLevels, defaultMempoolFeeColors, contrastMempoolFeeColors } from '../../../app.constants';
 import { ServicesApiServices } from '../../../services/services-api.service';
 import { detectWebGL } from '../../../shared/graphs.utils';
+import { ThemeService } from '../../../services/theme.service';
 
 const acceleratedColor: Color = hexToColor('8F5FF6');
 const normalColors = defaultMempoolFeeColors.map(hex => hexToColor(hex + '5F'));
+const contrastColors = contrastMempoolFeeColors.map(hex => hexToColor(hex + '5F'));
 
 interface AccelerationBlock extends BlockExtended {
   accelerationCount: number,
@@ -34,6 +36,7 @@ export class AcceleratorDashboardComponent implements OnInit {
   webGlEnabled = true;
 
   graphHeight: number = 300;
+  theme: ThemeService;
 
   constructor(
     private seoService: SeoService,
@@ -128,7 +131,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[defaultMempoolFeeColors.length - 1];
+      return this.theme.theme === 'contrast' ? contrastColors[feeLevelIndex] || contrastColors[contrastColors.length - 1] : normalColors[feeLevelIndex] || normalColors[normalColors.length - 1];
     }
   }
 
diff --git a/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.scss b/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.scss
index fcc5564a8..e685d98af 100644
--- a/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.scss
+++ b/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;
diff --git a/frontend/src/app/components/address/address-preview.component.scss b/frontend/src/app/components/address/address-preview.component.scss
index 21e7faab5..623d72db2 100644
--- a/frontend/src/app/components/address/address-preview.component.scss
+++ b/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;
diff --git a/frontend/src/app/components/address/address.component.scss b/frontend/src/app/components/address/address.component.scss
index fe0729b94..7107c73f2 100644
--- a/frontend/src/app/components/address/address.component.scss
+++ b/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;
diff --git a/frontend/src/app/components/app/app.component.ts b/frontend/src/app/components/app/app.component.ts
index 49eb691c7..ace0122f0 100644
--- a/frontend/src/app/components/app/app.component.ts
+++ b/frontend/src/app/components/app/app.component.ts
@@ -4,7 +4,6 @@ import { Router, NavigationEnd } from '@angular/router';
 import { StateService } from '../../services/state.service';
 import { OpenGraphService } from '../../services/opengraph.service';
 import { NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap';
-import { ThemeService } from 'src/app/services/theme.service';
 
 @Component({
   selector: 'app-root',
@@ -20,7 +19,6 @@ export class AppComponent implements OnInit {
     private stateService: StateService,
     private openGraphService: OpenGraphService,
     private location: Location,
-    private theme: ThemeService,
     tooltipConfig: NgbTooltipConfig,
     @Inject(LOCALE_ID) private locale: string,
   ) {
diff --git a/frontend/src/app/components/asset/asset.component.scss b/frontend/src/app/components/asset/asset.component.scss
index 45e68042d..6f8bc0915 100644
--- a/frontend/src/app/components/asset/asset.component.scss
+++ b/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;
diff --git a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss
index 21dd458b5..d38bb4843 100644
--- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss
+++ b/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;
diff --git a/frontend/src/app/components/block-filters/block-filters.component.scss b/frontend/src/app/components/block-filters/block-filters.component.scss
index 1009efd72..d5f1d5968 100644
--- a/frontend/src/app/components/block-filters/block-filters.component.scss
+++ b/frontend/src/app/components/block-filters/block-filters.component.scss
@@ -64,7 +64,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;
@@ -73,15 +73,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);
       }
     }
   }
@@ -107,15 +107,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);
       }
     }
   }
diff --git a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss
index 135f1cfe6..df34ce346 100644
--- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss
+++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss
@@ -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; }
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/block/block.component.scss b/frontend/src/app/components/block/block.component.scss
index a7ebafbe5..70f388e73 100644
--- a/frontend/src/app/components/block/block.component.scss
+++ b/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;
diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
index 0cbadf01b..59082d5c5 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
@@ -144,7 +144,7 @@
 }
 
 .loading .bitcoin-block.mined-block {
-  background: #2d3348;
+  background: var(--secondary);
 }
 
 @keyframes opacityPulse {
diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.scss b/frontend/src/app/components/blocks-list/blocks-list.component.scss
index 6dba7441f..2315844ae 100644
--- a/frontend/src/app/components/blocks-list/blocks-list.component.scss
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.scss
@@ -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;
diff --git a/frontend/src/app/components/clock-face/clock-face.component.scss b/frontend/src/app/components/clock-face/clock-face.component.scss
index 1ca2ce914..904de9d96 100644
--- a/frontend/src/app/components/clock-face/clock-face.component.scss
+++ b/frontend/src/app/components/clock-face/clock-face.component.scss
@@ -29,8 +29,8 @@
     }
 
     &.hour {
-      fill: #105fb0;
-      stroke: #105fb0;
+      fill: var(--primary);
+      stroke: var(--primary);
       stroke-width: 6px;
     }
   }
diff --git a/frontend/src/app/components/clock/clock.component.scss b/frontend/src/app/components/clock/clock.component.scss
index 34aadcd74..7423c1d8f 100644
--- a/frontend/src/app/components/clock/clock.component.scss
+++ b/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);
     }
diff --git a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html
index 0865708af..4d135dfbe 100644
--- a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html
+++ b/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">
diff --git a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss
index 69e2892ee..7965ff5d6 100644
--- a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss
+++ b/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;
 }
diff --git a/frontend/src/app/components/difficulty/difficulty.component.scss b/frontend/src/app/components/difficulty/difficulty.component.scss
index eda486966..697a6f534 100644
--- a/frontend/src/app/components/difficulty/difficulty.component.scss
+++ b/frontend/src/app/components/difficulty/difficulty.component.scss
@@ -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 {
diff --git a/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.html
index 44dfedd26..fb68a530d 100644
--- a/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.html
+++ b/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>
diff --git a/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.scss b/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.scss
index d2044f6de..1a2fd6864 100644
--- a/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.scss
+++ b/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;
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss
index b711f659b..5fbab9cc5 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss
+++ b/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 {
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html
index 9240cf228..5017ad4b2 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.html
+++ b/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>
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.scss b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.scss
index 4ddce6501..aa345fbfd 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.scss
+++ b/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;
diff --git a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss
index 6a2353f0c..cdd5a5ed9 100644
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss
+++ b/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 {
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
index 7a3d9e49f..3af119fad 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
+++ b/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 {
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html
index 6f012e84e..44b801a30 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.html
+++ b/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>
diff --git a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss
index 4cfef8e7a..9a7e6f0ea 100644
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss
+++ b/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;
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.html b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.html
index dede76b3f..49ba80d0c 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.html
+++ b/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">
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.scss b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.scss
index 13123431e..fd7197a88 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.scss
+++ b/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;
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts
index 13f948fcd..04429d2ac 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts
+++ b/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,
           },
diff --git a/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.scss b/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.scss
index 6ffb900ed..47d29eb45 100644
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.scss
+++ b/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;
diff --git a/frontend/src/app/components/menu/menu.component.scss b/frontend/src/app/components/menu/menu.component.scss
index 8a2e55c20..ec7e7250f 100644
--- a/frontend/src/app/components/menu/menu.component.scss
+++ b/frontend/src/app/components/menu/menu.component.scss
@@ -28,7 +28,7 @@
 .sidenav.open {
   left: 0px;
   display: block;
-  background-color: #1d1f31;
+  background-color: var(--bg);
 }
 
 .sidenav a, button{
@@ -42,7 +42,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;
@@ -61,7 +61,7 @@
 }
 
 .badge-og {
-  background-color: #4a68b9;
+  background-color: var(--title-fg);
 }
 
 .badge-pleb {
@@ -73,7 +73,7 @@
 }
 
 .badge-whale {
-  background-color: #653b9c;
+  background-color: var(--tertiary);
 }
 
 .badge-silver {
@@ -85,5 +85,5 @@
 }
 
 .badge-platinum {
-  background-color: #653b9c;
+  background-color: var(--tertiary);
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/rbf-list/rbf-list.component.scss b/frontend/src/app/components/rbf-list/rbf-list.component.scss
index 792bb8836..ff4dcf9b7 100644
--- a/frontend/src/app/components/rbf-list/rbf-list.component.scss
+++ b/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 {
diff --git a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
index 23c252190..6803e82ae 100644
--- a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
+++ b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
@@ -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);
         }
       }
     }
diff --git a/frontend/src/app/components/start/start.component.scss b/frontend/src/app/components/start/start.component.scss
index e321b8d6f..50e520cc5 100644
--- a/frontend/src/app/components/start/start.component.scss
+++ b/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;
diff --git a/frontend/src/app/components/transaction/transaction-preview.component.scss b/frontend/src/app/components/transaction/transaction-preview.component.scss
index 0b26e539a..986ee7d8e 100644
--- a/frontend/src/app/components/transaction/transaction-preview.component.scss
+++ b/frontend/src/app/components/transaction/transaction-preview.component.scss
@@ -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;
 
diff --git a/frontend/src/app/components/transaction/transaction.component.scss b/frontend/src/app/components/transaction/transaction.component.scss
index a30454225..80caa6003 100644
--- a/frontend/src/app/components/transaction/transaction.component.scss
+++ b/frontend/src/app/components/transaction/transaction.component.scss
@@ -61,7 +61,7 @@
 }
 
 .badge.badge-accelerated {
-  background-color: #653b9c;
+  background-color: var(--tertiary);
   color: white;
 }
 
@@ -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;
   }
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index a6b67384b..4ffae4dc4 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/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 i18n="dashboard.mempool-goggles">Mempool Goggles</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">
@@ -97,7 +97,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>
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss
index 08d77beeb..3acfbf9bb 100644
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@@ -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;
diff --git a/frontend/src/app/docs/api-docs/api-docs-nav.component.scss b/frontend/src/app/docs/api-docs/api-docs-nav.component.scss
index c22d95ed2..4609ed2fd 100644
--- a/frontend/src/app/docs/api-docs/api-docs-nav.component.scss
+++ b/frontend/src/app/docs/api-docs/api-docs-nav.component.scss
@@ -6,7 +6,7 @@ p {
 }
 
 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;
 }
 
diff --git a/frontend/src/app/docs/api-docs/api-docs.component.scss b/frontend/src/app/docs/api-docs/api-docs.component.scss
index 9a4ec8dc9..ce8c37121 100644
--- a/frontend/src/app/docs/api-docs/api-docs.component.scss
+++ b/frontend/src/app/docs/api-docs/api-docs.component.scss
@@ -211,7 +211,7 @@ h3 {
 }
 
 .endpoint-container .section-header span {
-  color: #fff;
+  color: var(--fg);
   background-color: var(--tertiary);
   font-size: 12px;
   text-transform: uppercase;
@@ -254,7 +254,7 @@ h3 {
 #doc-nav-mobile button {
   width: 100%;
   background-color: var(--primary);
-  color: #fff;
+  color: var(--fg);
   border-color: var(--primary);
   border-radius: 0.5rem 0.5rem 0 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;
-  border-color: #2d3348;
+  background-color: var(--secondary);
+  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;
   }
diff --git a/frontend/src/app/lightning/channel/channel-close-box/channel-close-box.component.scss b/frontend/src/app/lightning/channel/channel-close-box/channel-close-box.component.scss
index f55550eb3..12a8cb53c 100644
--- a/frontend/src/app/lightning/channel/channel-close-box/channel-close-box.component.scss
+++ b/frontend/src/app/lightning/channel/channel-close-box/channel-close-box.component.scss
@@ -60,19 +60,19 @@
     justify-content: center;
 
     &.left {
-      background: #105fb0;
+      background: var(--primary);
     }
     &.center {
       background: repeating-linear-gradient(
         60deg,
-        #105fb0 0,
-        #105fb0 12px,
-        #1a9436 12px,
-        #1a9436 24px
+        var(--primary) 0,
+        var(--primary) 12px,
+        var(--success) 12px,
+        var(--success) 24px
       );
     }
     &.right {
-      background: #1a9436;
+      background: var(--success);
     }
 
     .value {
@@ -93,10 +93,10 @@
     .bar.center {
       background: repeating-linear-gradient(
         60deg,
-        #105fb0 0,
-        #105fb0 8px,
-        #1a9436 8px,
-        #1a9436 16px
+        var(--primary) 0,
+        var(--primary) 8px,
+        var(--success) 8px,
+        var(--success) 16px
       )
     }
 	}
diff --git a/frontend/src/app/lightning/group/group.component.scss b/frontend/src/app/lightning/group/group.component.scss
index 6deb4ca14..61bc87ca8 100644
--- a/frontend/src/app/lightning/group/group.component.scss
+++ b/frontend/src/app/lightning/group/group.component.scss
@@ -12,7 +12,7 @@ h1 {
 }
 
 .qr-wrapper {
-  background-color: #FFF;
+  background-color: var(--fg);
   padding: 10px;
   padding-bottom: 5px;
   display: inline-block;
diff --git a/frontend/src/app/lightning/node/node.component.scss b/frontend/src/app/lightning/node/node.component.scss
index dcbac7fa7..9d70bae30 100644
--- a/frontend/src/app/lightning/node/node.component.scss
+++ b/frontend/src/app/lightning/node/node.component.scss
@@ -14,7 +14,7 @@
 }
 
 .qr-wrapper {
-  background-color: #FFF;
+  background-color: var(--fg);
   padding: 10px;
   padding-bottom: 5px;
   display: inline-block;
diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.html b/frontend/src/app/shared/components/global-footer/global-footer.component.html
index eee4756a9..635cf8d42 100644
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.html
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.html
@@ -93,7 +93,7 @@
         <a href="https://mempool.chat" target="_blank"><svg fill="#fff" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Matrix</title><path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"/></svg></a>
       </div>
     </div>
-    <div class="row version" [style]="{'background-color': isServicesPage ? '#1d1f31' : ''}">
+    <div class="row version" [style]="{'background-color': isServicesPage ? 'var(--bg)' : ''}">
       <div class="col-sm-12">
         <p *ngIf="officialMempoolSpace">
           <span>{{ (backendInfo$ | async)?.hostname }} (v{{ (backendInfo$ | async )?.version }}) [<a target="_blank" href="https://github.com/mempool/mempool/commit/{{ (backendInfo$ | async )?.gitCommit | slice:0:8 }}">{{ (backendInfo$ | async )?.gitCommit | slice:0:8 }}</a>]</span>
diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.scss b/frontend/src/app/shared/components/global-footer/global-footer.component.scss
index 5467f09c1..2db64e976 100644
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.scss
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.scss
@@ -1,5 +1,5 @@
 footer {
-  background-color: #1d1f31;
+  background-color: var(--bg);
   margin-top: 30px;
   &.services {
     @media (min-width: 768px) {
@@ -34,11 +34,11 @@ footer .row.main .branding > p {
 
 footer .row.main .branding .btn {
   display: inline-block;
-  color: #fff !important;
+  color: var(--fg) !important;
 }
 
 footer .row.main .branding button.account {
-  background-color: #2d3348;
+  background-color: var(--secondary);
 }
 
 footer .row.main .branding .cta {
@@ -59,7 +59,7 @@ footer .row.main .links > div:first-child {
 }
 
 footer .links .category {
-  color: #4a68b9;
+  color: var(--title-fg);
   font-weight: 700;
 }
 
@@ -114,7 +114,7 @@ footer .row.social-links svg {
 footer .row.version {
   padding-top: 20px !important;
   padding-bottom: 20px !important;
-  background-color: #1d1f31;
+  background-color: var(--bg);
 }
 
 footer .row.version p {
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 88f664982..93cdda7fe 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -76,6 +76,7 @@ $dropdown-link-active-bg: $active-bg;
   --box-bg: #24273e;
   --stat-box-bg: #181b2d;
   --alert-bg: #3a1c61;
+  --navbar-bg: #212121;
   --transparent-fg: #ffffff66;
   --fade-out-box-bg-start: rgba(36, 39, 62, 0);
   --fade-out-box-bg-end: rgba(36, 39, 62, 1);
diff --git a/frontend/src/theme-contrast.scss b/frontend/src/theme-contrast.scss
index 3e85adf2a..24d365789 100644
--- a/frontend/src/theme-contrast.scss
+++ b/frontend/src/theme-contrast.scss
@@ -75,6 +75,7 @@ $dropdown-link-active-bg: $active-bg;
   --box-bg: #171c2a;
   --stat-box-bg: #0b1018;
   --alert-bg: #3a1c61;
+  --navbar-bg: #212121;
   --transparent-fg: #ffffffbb;
   --fade-out-box-bg-start: rgba(23, 28, 42, 0);
   --fade-out-box-bg-end: rgba(23, 28, 42, 1);

From 99e189079575d4b3829c901ad45950260ba69038 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Sat, 6 Apr 2024 18:31:31 +0900
Subject: [PATCH 11/13] Fix footer to fit with theme selector

---
 .../components/global-footer/global-footer.component.html    | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.html b/frontend/src/app/shared/components/global-footer/global-footer.component.html
index 635cf8d42..1a93729d7 100644
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.html
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.html
@@ -21,7 +21,7 @@
           <div class="selector">
             <app-rate-unit-selector></app-rate-unit-selector>
           </div>
-          <div class="selector">
+          <div class="selector d-none d-sm-flex">
             <app-theme-selector></app-theme-selector>
           </div>
           <a *ngIf="stateService.isMempoolSpaceBuild" class="btn btn-purple sponsor d-none d-sm-flex justify-content-center" [routerLink]="['/login' | relativeUrl]">
@@ -29,6 +29,9 @@
             <span *ngIf="!loggedIn" i18n="shared.sign-in">Sign In</span>
           </a>
         </div>
+        <div class="selector d-flex d-sm-none justify-content-center ml-auto mr-auto mt-0">
+          <app-theme-selector></app-theme-selector>
+        </div>
         <a *ngIf="stateService.isMempoolSpaceBuild" class="btn btn-purple sponsor d-flex d-sm-none justify-content-center ml-auto mr-auto mt-0 mb-2" [routerLink]="['/login' | relativeUrl]">
           <span *ngIf="loggedIn" i18n="shared.my-account">My Account</span>
           <span *ngIf="!loggedIn" i18n="shared.sign-in">Sign In</span>

From d68904fec061c9c11812ae953aafcdd4f8896e8c Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Mon, 8 Apr 2024 15:01:38 +0900
Subject: [PATCH 12/13] More contrast theme fixes

---
 frontend/src/app/app.constants.ts             |   16 +-
 .../block-overview-graph.component.ts         |   32 +-
 .../block-overview-graph/block-scene.ts       |   14 +-
 .../block-overview-graph/tx-view.ts           |   10 +-
 .../components/block-overview-graph/utils.ts  |   82 +-
 .../clock-face/clock-face.component.scss      |    2 +-
 .../lbtc-pegs-graph.component.ts              |    8 +-
 frontend/src/theme-contrast.scss              | 1151 -----------------
 8 files changed, 106 insertions(+), 1209 deletions(-)

diff --git a/frontend/src/app/app.constants.ts b/frontend/src/app/app.constants.ts
index a8ba96ed4..bd81d02c0 100644
--- a/frontend/src/app/app.constants.ts
+++ b/frontend/src/app/app.constants.ts
@@ -70,14 +70,14 @@ export const contrastMempoolFeeColors = [
   'edac31',
   'f6ad2b',
   'ffaf24',
-  'ffaf24',
-  'ffaf24',
-  'ffaf24',
-  'ffaf24',
-  'ffaf24',
-  'ffaf24',
-  'ffaf24',
-  'ffaf24',
+  'ffb01e',
+  'ffb118',
+  'ffb212',
+  'ffb30c',
+  'ffb406',
+  'ffb500',
+  'ffb600',
+  'ffb700',
  ];
 
 export const chartColors = [
diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
index f6847c93a..d8b57e72d 100644
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
+++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
@@ -9,7 +9,7 @@ import { Price } from '../../services/price.service';
 import { StateService } from '../../services/state.service';
 import { ThemeService } from 'src/app/services/theme.service';
 import { Subscription } from 'rxjs';
-import { defaultColorFunction, setOpacity, defaultFeeColors, defaultAuditFeeColors, defaultMarginalFeeColors, defaultAuditColors } 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';
 
@@ -21,9 +21,6 @@ const unmatchedAuditColors = {
   prioritized: setOpacity(defaultAuditColors.prioritized, unmatchedOpacity),
   accelerated: setOpacity(defaultAuditColors.accelerated, unmatchedOpacity),
 };
-const unmatchedContrastFeeColors = contrastFeeColors.map(c => setOpacity(c, unmatchedOpacity));
-const unmatchedContrastAuditFeeColors = contrastAuditFeeColors.map(c => setOpacity(c, unmatchedOpacity));
-const unmatchedContrastMarginalFeeColors = contrastMarginalFeeColors.map(c => setOpacity(c, unmatchedOpacity));
 const unmatchedContrastAuditColors = {
   censored: setOpacity(contrastAuditColors.censored, unmatchedOpacity),
   missing: setOpacity(contrastAuditColors.missing, unmatchedOpacity),
@@ -580,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))) {
-        return defaultColorFunction(tx);
+        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 {
-        return defaultColorFunction(
-          tx,
-          defaultColors.unmatchedfee,
-          unmatchedAuditColors,
-          this.relativeTime || (Date.now() / 1000)
-        );
+        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)
+          );
+        }
       }
     };
   }
diff --git a/frontend/src/app/components/block-overview-graph/block-scene.ts b/frontend/src/app/components/block-overview-graph/block-scene.ts
index 4651cea34..05abddb03 100644
--- a/frontend/src/app/components/block-overview-graph/block-scene.ts
+++ b/frontend/src/app/components/block-overview-graph/block-scene.ts
@@ -69,7 +69,11 @@ 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();
+  }
+
+  updateAllColors(): void {
     this.dirty = true;
     if (this.initialised && this.scene) {
       this.updateColors(performance.now(), 50);
@@ -92,7 +96,7 @@ export default class BlockScene {
     });
     this.layout = new BlockLayout({ width: this.gridWidth, height: this.gridHeight });
     txs.forEach(tx => {
-      const txView = new TxView(tx, this, this.theme);
+      const txView = new TxView(tx, this);
       this.txs[tx.txid] = txView;
       this.place(txView);
       this.saveGridToScreenPosition(txView);
@@ -138,7 +142,7 @@ export default class BlockScene {
     });
     txs.forEach(tx => {
       if (!this.txs[tx.txid]) {
-        this.txs[tx.txid] = new TxView(tx, this, this.theme);
+        this.txs[tx.txid] = new TxView(tx, this);
       }
     });
 
@@ -180,7 +184,7 @@ export default class BlockScene {
     if (resetLayout) {
       add.forEach(tx => {
         if (!this.txs[tx.txid]) {
-          this.txs[tx.txid] = new TxView(tx, this, this.theme);
+          this.txs[tx.txid] = new TxView(tx, this);
         }
       });
       this.layout = new BlockLayout({ width: this.gridWidth, height: this.gridHeight });
@@ -200,7 +204,7 @@ export default class BlockScene {
 
       // try to insert new txs directly
       const remaining = [];
-      add.map(tx => new TxView(tx, this, this.theme)).sort(feeRateDescending).forEach(tx => {
+      add.map(tx => new TxView(tx, this)).sort(feeRateDescending).forEach(tx => {
         if (!this.tryInsertByFee(tx)) {
           remaining.push(tx);
         }
diff --git a/frontend/src/app/components/block-overview-graph/tx-view.ts b/frontend/src/app/components/block-overview-graph/tx-view.ts
index 0317d7cbf..742c305f5 100644
--- a/frontend/src/app/components/block-overview-graph/tx-view.ts
+++ b/frontend/src/app/components/block-overview-graph/tx-view.ts
@@ -5,8 +5,6 @@ import { hexToColor } from './utils';
 import BlockScene from './block-scene';
 import { TransactionStripped } from '../../interfaces/node-api.interface';
 import { TransactionFlags } from '../../shared/filters.utils';
-import { feeLevels } from '../../app.constants';
-import { ThemeService } from 'src/app/services/theme.service';
 
 const hoverTransitionTime = 300;
 const defaultHoverColor = hexToColor('1bd8f4');
@@ -38,7 +36,6 @@ export default class TxView implements TransactionStripped {
   status?: 'found' | 'missing' | 'sigop' | 'fresh' | 'freshcpfp' | 'added' | 'prioritized' | 'censored' | 'selected' | 'rbf' | 'accelerated';
   context?: 'projected' | 'actual';
   scene?: BlockScene;
-  theme: ThemeService;
 
   initialised: boolean;
   vertexArray: FastVertexArray;
@@ -53,7 +50,7 @@ export default class TxView implements TransactionStripped {
 
   dirty: boolean;
 
-  constructor(tx: TransactionStripped, scene: BlockScene, theme: ThemeService) {
+  constructor(tx: TransactionStripped, scene: BlockScene) {
     this.scene = scene;
     this.context = tx.context;
     this.txid = tx.txid;
@@ -69,7 +66,6 @@ export default class TxView implements TransactionStripped {
     this.bigintFlags = tx.flags ? (BigInt(tx.flags) | (this.acc ? TransactionFlags.acceleration : 0n)): 0n;
     this.initialised = false;
     this.vertexArray = scene.vertexArray;
-    this.theme = theme;
 
     this.hover = false;
 
@@ -142,10 +138,10 @@ export default class TxView implements TransactionStripped {
 
   // Temporarily override the tx color
   // returns minimum transition end time
-  setHover(hoverOn: boolean, color: Color | void): number {
+  setHover(hoverOn: boolean, color: Color | void = defaultHoverColor): number {
     if (hoverOn) {
       this.hover = true;
-      this.hoverColor = color || defaultHoverColor;
+      this.hoverColor = color;
 
       this.sprite.update({
         ...this.hoverColor,
diff --git a/frontend/src/app/components/block-overview-graph/utils.ts b/frontend/src/app/components/block-overview-graph/utils.ts
index 62fbe5e8e..ec6181853 100644
--- a/frontend/src/app/components/block-overview-graph/utils.ts
+++ b/frontend/src/app/components/block-overview-graph/utils.ts
@@ -45,9 +45,28 @@ interface ColorPalette {
 }
 
 // precomputed colors
-export const defaultFeeColors = mempoolFeeColors.map(hexToColor);
-export const defaultAuditFeeColors = defaultFeeColors.map((color) => darken(desaturate(color, 0.3), 0.9));
-export const defaultMarginalFeeColors = defaultFeeColors.map((color) => darken(desaturate(color, 0.8), 1.1));
+const defaultColors: { [key: string]: ColorPalette } = {
+  fee: {
+    base: defaultMempoolFeeColors.map(hexToColor),
+    audit: [],
+    marginal: [],
+    baseLevel: (tx: TxView, rate: number) => feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1
+  },
+}
+for (const key in defaultColors) {
+  const base = defaultColors[key].base;
+  defaultColors[key].audit = base.map((color) => darken(desaturate(color, 0.3), 0.9));
+  defaultColors[key].marginal = base.map((color) => darken(desaturate(color, 0.8), 1.1));
+  defaultColors['unmatched' + key] = {
+    base: defaultColors[key].base.map(c => setOpacity(c, 0.2)),
+    audit: defaultColors[key].audit.map(c => setOpacity(c, 0.2)),
+    marginal: defaultColors[key].marginal.map(c => setOpacity(c, 0.2)),
+    baseLevel: defaultColors[key].baseLevel,
+  };
+}
+
+export { defaultColors as defaultColors };
+
 export const defaultAuditColors = {
   censored: hexToColor('f344df'),
   missing: darken(desaturate(hexToColor('f344df'), 0.3), 0.7),
@@ -56,9 +75,28 @@ export const defaultAuditColors = {
   accelerated: hexToColor('8f5ff6'),
 };
 
-export const contrastFeeColors = contrastMempoolFeeColors.map(hexToColor);
-export const contrastAuditFeeColors = contrastFeeColors.map((color) => darken(desaturate(color, 0.3), 0.9));
-export const contrastMarginalFeeColors = contrastFeeColors.map((color) => darken(desaturate(color, 0.8), 1.1));
+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),
@@ -74,8 +112,8 @@ export function defaultColorFunction(
   relativeTime?: number,
 ): Color {
   const rate = tx.fee / tx.vsize; // color by simple single-tx fee rate
-  const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1;
-  const feeLevelColor = feeColors[feeLevelIndex] || feeColors[mempoolFeeColors.length - 1];
+  const levelIndex = colors.baseLevel(tx, rate, relativeTime || (Date.now() / 1000));
+  const levelColor = colors.base[levelIndex] || colors.base[defaultMempoolFeeColors.length - 1];
   // Normal mode
   if (!tx.scene?.highlightingEnabled) {
     if (tx.acc) {
@@ -92,7 +130,7 @@ export function defaultColorFunction(
     case 'missing':
     case 'sigop':
     case 'rbf':
-      return marginalFeeColors[feeLevelIndex] || marginalFeeColors[mempoolFeeColors.length - 1];
+      return colors.marginal[levelIndex] || colors.marginal[defaultMempoolFeeColors.length - 1];
     case 'fresh':
     case 'freshcpfp':
       return auditColors.missing;
@@ -101,12 +139,12 @@ export function defaultColorFunction(
     case 'prioritized':
       return auditColors.prioritized;
     case 'selected':
-      return marginalFeeColors[feeLevelIndex] || marginalFeeColors[mempoolFeeColors.length - 1];
+      return colors.marginal[levelIndex] || colors.marginal[defaultMempoolFeeColors.length - 1];
     case 'accelerated':
       return auditColors.accelerated;
     case 'found':
       if (tx.context === 'projected') {
-        return auditFeeColors[feeLevelIndex] || auditFeeColors[mempoolFeeColors.length - 1];
+        return colors.audit[levelIndex] || colors.audit[defaultMempoolFeeColors.length - 1];
       } else {
         return levelColor;
       }
@@ -119,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 {
@@ -139,13 +187,3 @@ export function ageColorFunction(
     a: color.a * (1 - ageLevel)
   };
 }
-
-export function contrastColorFunction(
-  tx: TxView,
-  feeColors: Color[] = contrastFeeColors,
-  auditFeeColors: Color[] = contrastAuditFeeColors,
-  marginalFeeColors: Color[] = contrastMarginalFeeColors,
-  auditColors: { [status: string]: Color } = contrastAuditColors
-): Color {
-  return defaultColorFunction(tx, feeColors, auditFeeColors, marginalFeeColors, auditColors);
-}
\ No newline at end of file
diff --git a/frontend/src/app/components/clock-face/clock-face.component.scss b/frontend/src/app/components/clock-face/clock-face.component.scss
index 904de9d96..e2bb215d4 100644
--- a/frontend/src/app/components/clock-face/clock-face.component.scss
+++ b/frontend/src/app/components/clock-face/clock-face.component.scss
@@ -14,7 +14,7 @@
     height: 100%;
 
     .face {
-      fill: #11131f;
+      fill: var(--active-bg);
     }
   }
 
diff --git a/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts b/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
index f6ecb950e..4359d8fa3 100644
--- a/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
+++ b/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
@@ -104,7 +104,7 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges {
           type: 'line',
         },
         formatter: (params: any) => {
-          const colorSpan = (color: string) => `<span class="indicator" style="background-color: var(--liquid);"></span>`;
+          const colorSpan = (color: string) => `<span class="indicator" style="background-color: ${color};"></span>`;
           let itemFormatted = '<div class="title">' + params[0].axisValue + '</div>';
           for (let index = params.length - 1; index >= 0; index--) {
             const item = params[index];
@@ -137,7 +137,7 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges {
         splitLine: {
           lineStyle: {
             type: 'dotted',
-            color: 'var(--transparent-fg)',
+            color: '#ffffff66',
             opacity: 0.25,
           }
         }
@@ -153,11 +153,11 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges {
           showSymbol: false,
           areaStyle: {
             opacity: 0.2,
-            color: 'var(--liquid)',
+            color: '#116761',
           },
           lineStyle: {
             width: 2,
-            color: 'var(--liquid)',
+            color: '#116761',
           },
         },
         {
diff --git a/frontend/src/theme-contrast.scss b/frontend/src/theme-contrast.scss
index 24d365789..6c5023466 100644
--- a/frontend/src/theme-contrast.scss
+++ b/frontend/src/theme-contrast.scss
@@ -56,8 +56,6 @@ $dropdown-link-hover-bg: $active-bg;
 $dropdown-link-active-color: $fg;
 $dropdown-link-active-bg: $active-bg;
 
-@import "bootstrap/scss/bootstrap";
-
 :root {
   --bg: #{$bg};
   --active-bg: #{$active-bg};
@@ -100,1152 +98,3 @@ $dropdown-link-active-bg: $active-bg;
   --grey: #7e7e7e;
   --tooltip-grey: #b1b1b1;
 }
-
-html, body {
-  height: 100%;
-}
-
-body {
-  background-color: var(--active-bg);
-  min-width: 375px;
-  padding-bottom: 60px;
-}
-
-.container {
-  position: relative;
-}
-
-main {
-  margin-top: 24px;
-}
-
-.full-height {
-  @media (max-width: 767.98px) {
-    min-height: 100vh;
-  }
-}
-
-:focus {
-  outline: none !important;
-}
-
-.box {
-  min-height: 1px;
-  padding: 1.25rem;
-  position: relative;
-  min-width: 0;
-  word-wrap: break-word;
-  background-color: var(--box-bg);
-  background-clip: border-box;
-  border: 1px solid rgba(0,0,0,.125);
-  box-shadow: 0.125rem 0.125rem 0.25rem rgba(0,0,0,0.075);
-}
-
-.preview-box {
-  min-height: 520px;
-  padding: 1rem 3rem 1.5rem;
-}
-
-@media (max-width: 767.98px) {
-  .box {
-    padding: 0.75rem;
-  }
-}
-
-.navbar-nav.liquid > .active {
-  background-color: var(--liquid) !important;
-}
-
-.navbar-nav.testnet > .active {
-  background-color: var(--testnet) !important;
-}
-
-.navbar-nav.signet > .active {
-  background-color: var(--signet) !important;
-}
-
-.navbar-nav.liquidtestnet > .active {
-  background-color: var(--liquidtestnet) !important;
-}
-
-.form-control {
-  color: #fff;
-  background-color: var(--secondary);
-  border: 1px solid rgba(17, 19, 31, 0.2);
-}
-
-.form-control:focus {
-  color: #fff;
-  background-color: var(--secondary);
-}
-
-.btn-purple {
-  background-color: var(--tertiary);
-  border-color: var(--tertiary);
-}
-
-.btn-purple:not(:disabled):not(.disabled):active, .btn-purple:not(:disabled):not(.disabled).active, .show > .btn-purple.dropdown-toggle {
-  color: #fff;
-  background-color: #4d2d77;
-  border-color: #472a6e;
-}
-
-.btn-purple:focus, .btn-purple.focus {
-  color: #fff;
-  background-color: #533180;
-  border-color: #4d2d77;
-  box-shadow: 0 0 0 0.2rem rgb(124 88 171 / 50%);
-}
-
-.btn-purple:hover {
-  color: #fff;
-  background-color: #533180;
-  border-color: #4d2d77;
-}
-
-.form-control.form-control-secondary {
-  color: var(--fg);
-  background-color: var(--secondary);
-  border: 1px solid var(--secondary);
-}
-.form-control.form-control-secondary:focus {
-  color: var(--fg);
-}
-
-.h2-match-table {
-  padding-left: .65rem;
-}
-
-.skeleton-loader {
-  box-sizing: border-box;
-  /**
-  * `overflow` and `position` are required steps to make sure
-  * the component respects the specified dimensions
-  * given via `theme` object @Input attribute
-  */
-  overflow: hidden;
-  position: relative;
-
-  animation: progress 2s ease-in-out infinite;
-  background: #2e324e no-repeat;
-  background-image: linear-gradient(
-    90deg,
-    rgba(255, 255, 255, 0),
-    #5d6182,
-    rgba(255, 255, 255, 0)
-  );
-  background-size: 200px 100%;
-  border-radius: 4px;
-  width: 100%;
-  height: 14px;
-  display: inline-block;
-
-  &:after,
-  &:before {
-    box-sizing: border-box;
-  }
-
-  &.circle {
-    width: 40px;
-    height: 40px;
-    margin: 5px;
-    border-radius: 50%;
-  }
-}
-
-@keyframes progress {
-  0% {
-    background-position: -200px 0;
-  }
-  100% {
-    background-position: calc(200px + 100%) 0;
-  }
-}
-
-.symbol {
-	color: var(--transparent-fg);
-	font-size: 12px;
-}
-
-.progress-text {
-  span {
-    color: var(--fg) !important;
-  }
-}
-
-.block-size, .blocks-container {
-  .symbol {
-    font-size: 16px;
-    color: var(--fg) !important;
-  }
-}
-
-.break-all {
-  white-space: normal;
-  word-break: break-all;
-}
-
-.title-block {
-  color: var(--fg);
-  padding-top: 20px;
-  padding-bottom: 10px;
-  border-top: 3px solid var(--fg);
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.title-address, .title-asset {
-  color: var(--fg);
-  padding-bottom: 10px;
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 7px;
-  @media (min-width: 576px) {
-    flex-direction: row;
-    margin-bottom: 0px;
-  }
-  h1 {
-    line-height: 1;
-  }
-}
-
-.smaller-text {
-  font-size: 14px;
-}
-
-.nowrap {
-  white-space: nowrap;
-}
-
-.table-xs th, .table-xs td {
-  padding: 0.1rem;
-}
-
-.table {
-  margin-bottom: 0;
-  font-size: 0.9rem;
-  @media (min-width: 576px) {
-    font-size: 1rem;
-  }
-}
-
-.table-fixed {
-  table-layout: fixed;
-}
-
-.close {
-  color: var(--fg);
-}
-
-.close:hover {
-  color: var(--fg);
-}
-
-.white-color {
-  color: white;
-}
-
-.green-color {
-  color: var(--green);
-}
-
-.red-color {
-  color: var(--red);
-}
-
-.yellow-color {
-  color: var(--yellow);
-}
-
-.table-striped tbody tr:nth-of-type(odd) {
-  background-color: var(--stat-box-bg);
-}
-
-.bordertop {
-  border-top: 1px solid #4c4c4c;
-}
-
-.smaller-text {
-  font-size: 14px;
-}
-
-html:lang(ru) .card-title {
-  font-size: 0.9rem;
-}
-
-/* MEMPOOL CHARTS - start */
-
-.mempool-wrapper-tooltip-chart {
-  height: 250px;
-}
-
-.echarts {
-  height: 100%;
-  min-height: 180px;
-}
-
-.tx-wrapper-tooltip-chart,
-.fees-wrapper-tooltip-chart {
-  background: rgba($active-bg, 0.95);
-  border-radius: 4px;
-  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
-  color: var(--tooltip-grey);
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding: 10px 15px;
-  text-align: left;
-  width: 200px;
-  thead {
-    th {
-      font-size: 9px;
-      color: var(--tooltip-grey);
-      text-align: right;
-      &:first-child {
-        text-align: left;
-        left: -1px;
-        position: relative;
-      }
-      &:nth-child(4) {
-        display: none;
-      }
-    }
-  }
-  .title {
-    font-size: 12px;
-    font-weight: 700;
-    margin-bottom: 2px;
-    color: var(--fg);
-    .total-value {
-      float: right;
-    }
-  }
-  .active {
-    color: yellow !important;
-    .value,
-    .total-partial {
-      color: yellow !important;
-      .symbol {
-        color: yellow !important;
-      }
-    }
-  }
-  .item {
-    line-height: 0.8;
-    .indicator-container {
-      .indicator {
-        display: inline-block;
-        margin-right: 5px;
-        border-radius: 2px;
-        margin-top: 5px;
-        width: 9px;
-        height: 9px;
-      }
-    }
-    .value {
-      text-align: right;
-      .symbol {
-        color: #7e7e7e;
-        font-size: 9px !important;
-      }
-    }
-    .symbol {
-      font-size: 9px;
-    }
-    .total-partial {
-      font-size: 10px;
-      width: 58px;
-      text-align: right;
-    }
-    .total-percentage-bar {
-      padding-left: 8px;
-    }
-    .total-progress-percentage {
-      width: 45px;
-      height: 5px;
-      text-align: right;
-      display: none;
-    }
-    .total-progress-sum {
-      width: 58px;
-      text-align: right;
-    }
-  }
-  .total-label {
-    width: 100%;
-    text-align: left;
-    color: var(--fg);
-    margin-top: 5px;
-    font-size: 14px;
-    span {
-      float: right;
-    }
-    .symbol {
-      margin-left: 3px;
-      font-size: 9px;
-      position: relative;
-      top: 2px;
-    }
-  }
-  thead {
-    th {
-      font-size: 9px;
-      color: var(--tooltip-grey);
-      text-align: right;
-      &:first-child {
-        text-align: left;
-        left: -1px;
-        position: relative;
-      }
-      &:nth-child(4) {
-        display: none;
-      }
-      &:nth-child(5) {
-        display: none;
-      }
-    }
-  }
-  .total-percentage-bar {
-    margin: auto;
-    width: 35px;
-    position: relative;
-    span {
-      display: block;
-      background: #282d47;
-      height: 5px;
-      border-radius: 2px;
-    }
-  }
-  .total-parcial-active {
-    text-align: right;
-    margin: 5px auto 5px;
-    padding-left: 0px;
-    span {
-      font-size: 10px;
-    }
-    .symbol {
-      font-size: 9px;
-    }
-    .total-percentage-bar {
-      width: 100%;
-      span {
-        transition: 1000 all ease-in-out;
-      }
-    }
-    .progress-percentage {
-      float: left;
-    }
-  }
-}
-
-.tx-wrapper-tooltip-chart {
-  width: 115px;
-  .item {
-    display: flex;
-  }
-  .value {
-    margin-top: 5px;
-  }
-  .indicator-container {
-    border-radius: 2px;
-  }
-}
-
-.fee-distribution-chart {
-  height: 265px;
-}
-
-.fees-wrapper-tooltip-chart {
-  .item {
-    font-size: 9px;
-    line-height: 0.8;
-    margin: 0px;
-  }
-  .indicator {
-    margin-right: 5px !important;
-    border-radius: 1px !important;
-    margin-top: 0px !important;
-  }
-}
-
-.fees-wrapper-tooltip-chart-advanced,
-.tx-wrapper-tooltip-chart-advanced {
-  width: 300px;
-  background: rgba($bg, 0.98);
-
-  thead {
-    th {
-      &:nth-child(4) {
-        display: table-cell;
-      }
-      &:nth-child(5) {
-        display: table-cell;
-      }
-    }
-  }
-  .title {
-    font-size: 15px;
-    margin-bottom: 5px;
-  }
-  .item {
-    line-height: 1.25;
-    font-size: 11px;
-    .value {
-      width: 60px;
-      .symbol {
-        font-size: 9px !important;
-      }
-    }
-    .total-partial {
-      font-size: 10px;
-      width: 58px;
-      text-align: right;
-    }
-    .total-progress-percentage {
-      width: 65px;
-      height: 4px;
-      padding: 0px 5px;
-      display: table-cell !important;
-      border-radius: 4px;
-    }
-    .total-progress-sum {
-      width: 65px;
-      height: 4px;
-      padding: 0px 5px;
-      border-radius: 4px;
-    }
-    .total-progress-percentage-bar,
-    .total-progress-sum-bar {
-      width: 35px;
-      height: 4px;
-      div {
-        width: 100%;
-        border-radius: 4px;
-        display: block;
-        background: #29324c94;
-      }
-      span {
-        height: 4px;
-        border-radius: 4px;
-        display: block;
-      }
-    }
-  }
-  .total-label {
-    margin-top: 5px;
-    font-size: 14px;
-    span {
-      float: right;
-    }
-  }
-  .total-parcial-active {
-    text-align: right;
-    margin: 5px auto 5px;
-    span {
-      font-size: 10px;
-    }
-    .total-percentage-bar {
-      width: 100%;
-      left: 0;
-      span {
-        transition: 1000 all ease-in-out;
-      }
-    }
-  }
-  .total-percentage-bar-background {
-    background-color: #282d47;
-  }
-}
-
-.tx-wrapper-tooltip-chart-advanced {
-  .indicator-container {
-    .indicator {
-      margin-right: 5px;
-      border-radius: 0px;
-      margin-top: 5px;
-      width: 9px;
-      height: 9px;
-    }
-  }
-}
-
-
-/* MEMPOOL CHARTS - end */
-
-.grow {
-  flex-grow: 1;
-}
-
-hr {
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-tr {
-  white-space: nowrap;
-}
-
-h1, h2, h3 {
-  margin-bottom: 1rem;
-}
-
-@media (max-width: 767.98px) {
-  h1 {
-    font-size: 2rem;
-  }
-  h2 {
-    font-size: 1.50rem;
-  }
-}
-
-@media (min-width: 992px) {
-  .lg-inline {
-    display: inline-block;
-  }
-}
-
-@media (min-width: 768px) {
-  .d-md-inline {
-    display: inline-block;
-  }
-}
-
-.header-bg {
-  font-size: 14px;
-}
-
-.progress {
-  position: relative;
-}
-
-.progress-text {
-  position: absolute;
-  top: 8.5px;
-  width: 100%;
-  text-align: center;
-}
-
-.progress-mempool {
-  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, var(--mainnet-alt) 100%);
-}
-
-.progress-mempool.testnet {
-  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--testnet) 0%, var(--testnet-alt) 100%);
-}
-
-.progress-mempool.signet {
-  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--signet) 0%, var(--signet-alt) 100%);
-}
-
-.progress-mempool.liquid {
-  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--liquid) 0%, var(--testnet-alt) 100%);
-}
-
-.progress-dark {
-  background-color: var(--stat-box-bg);
-}
-
-.progress-darklight {
-  background-color: var(--box-bg);
-}
-
-.progress-light {
-  background-color: #2e324e;
-}
-
-.progress.progress-health {
-  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, $success 100%);
-  justify-content: flex-end;
-}
-
-.progress-bar.progress-bar-health {
-  background: var(--secondary);
-}
-
-.mt-2-5, .my-2-5 {
-  margin-top: 0.75rem !important;
-}
-
-.alert-mempool {
-  color: var(--fg);
-  background-color: var(--tertiary);
-  border-color: var(--alert-bg);
-  width: 100%;
-  display: inline-flex;
-  flex-direction: column;
-  justify-content: space-between;
-  @media (min-width: 676px){
-    flex-direction: row;
-  }
-}
-
-.flex {
-	display: flex;
-}
-
-th {
-  white-space: nowrap;
-}
-
-// ASM opcode colors
-
-.constants { color: #ff8c00 }
-.control { color: #87ceeb }
-.stack { color: #ffa500 }
-.splice { color: #46b5e2 }
-.logic { color: #46b5e2 }
-.arithmetic { color: #cae8d0 }
-.crypto { color: #fa3d3d }
-.locktime { color: #ff8c00 }
-.reserved { color: #ff8c00 }
-
-.shortable-address {
-  font-family: monospace;
-}
-
-.full-container .card-header .formRadioGroup {
-  margin-top: 6px;
-  display: flex;
-  flex-direction: column;
-  @media (min-width: 991px) {
-    position: relative;
-    top: -100px;
-  }
-  @media (min-width: 830px) and (max-width: 991px) {
-    position: relative;
-    top: 0px;
-  }
-  @media (min-width: 830px) {
-    flex-direction: row;
-    float: right;
-    margin-top: 0px;
-  }
-  .btn-sm {
-    font-size: 9px;
-    @media (min-width: 830px) {
-      font-size: 14px;
-    }
-  }
-}
-
-.direction-ltr {
-  direction: ltr;
-}
-
-.rtl-layout {
-  text-align: start;
-
-  .navbar-brand {
-    margin-right: 0px;
-    text-align: right;
-  }
-
-  .nav-pills {
-    @extend .nav-pills;
-    display: inline-block;
-  }
-
-  .description {
-    direction: rtl;
-  }
-
-  .dropdown {
-    margin-right: 1rem;
-    margin-left: 0;
-    @media (min-width: 576px) {
-      margin-left: 1rem;
-    }
-    @media (min-width: 768px) {
-      margin-left: 0;
-    }
-  }
-  .dropdown-menu-right {
-    left: 0px;
-    right: auto;
-  }
-  .fa-circle-right {
-    @extend .fa-circle-right;
-    -webkit-transform: scaleX(-1);
-    transform: scaleX(-1);
-  }
-
-  .btn.ml-2 {
-    margin-right: 0.5rem !important;
-  }
-
-  .pool-name {
-    @extend .pool-name;
-    padding-right: 10px;
-  }
-
-  .endpoint-container {
-    @extend .endpoint-container;
-    .section-header {
-      @extend .section-header;
-      text-align: left;
-    }
-  }
-
-  .table td {
-    text-align: right;
-    .fiat {
-      @extend .fiat;
-      margin-left: 0px !important;
-      margin-right: 15px;
-    }
-  }
-
-  .table th {
-    text-align: right;
-  }
-
-  .title-block {
-    text-align: right;
-  }
-
-  .mr-3 {
-    @extend .ml-3;
-    margin-right: 0 !important;
-  }
-
-  .mr-1 {
-      @extend .ml-1;
-  }
-
-  .float-left {
-    float: right !important;
-  }
-
-  .float-right {
-    float: left !important;
-  }
-
-  .text-left {
-    text-align: right !important;
-  }
-
-  .text-right {
-    text-align: left !important;
-  }
-
-  .bitcoin-block {
-    direction: rtl;
-  }
-
-  .next-previous-blocks {
-    @extend .next-previous-blocks;
-    direction: ltr;
-  }
-
-  .tx-link {
-    @extend .tx-link;
-    margin-left: 0px;
-    margin-right: 10px;
-  }
-
-  .pagination-container {
-    @extend .pagination-container;
-    ul {
-      @extend ul;
-      padding-left: 0px;
-      padding-right: 5px;
-    }
-  }
-
-  .search-box-container {
-    @extend .search-box-container;
-    margin-right: 0 !important;
-    margin-left: 0.5rem !important;
-  }
-
-  .code {
-    @extend .code;
-    text-align: left !important;
-    direction: ltr;
-    .subtitle {
-      @extend .subtitle;
-      direction: rtl;
-      text-align: right !important;
-    }
-  }
-
-  .chart {
-    direction: ltr;
-  }
-
-  .formRadioGroup {
-    @media (min-width: 830px) {
-      float: left;
-    }
-  }
-
-  .container-graph, .full-container, .toggle-holder {
-    @extend .container-graph;
-    .formRadioGroup {
-      @extend .formRadioGroup;
-      direction: ltr;
-    }
-
-    .card-header, h1, h2, h3 {
-      direction: rtl;
-    }
-  }
-
-  .fee-progress-bar {
-    @extend .fee-progress-bar;
-    &.priority {
-      @media (767px < width < 992px), (width < 576px) {
-        width: 100%;
-      }
-      width: 75%;
-      border-radius: 10px 0px 0px 10px !important;
-    }
-  }
-
-  .fees-wrapper-tooltip-chart {
-    @extend .fees-wrapper-tooltip-chart;
-    .title {
-      direction: rtl;
-    }
-  }
-
-  .btn-link {
-    padding: 0.1rem 0.5rem 0.25rem 0 !important;
-  }
-
-  .shortable-address {
-    direction: ltr;
-    font-family: monospace;
-  }
-
-  .lastest-blocks-table {
-    @extend .lastest-blocks-table;
-    .table-cell-mined {
-      @extend .table-cell-mined;
-      text-align: right !important;
-    }
-  }
-
-  .mempool-graph {
-    @extend .mempool-graph;
-    direction: ltr;
-  }
-  .title-block {
-    .title {
-      float: right;
-    }
-  }
-  .container-buttons {
-    float: left !important;
-    width: auto !important;
-  }
-  .tx-link {
-    margin-right: 0px;
-    @media (min-width: 768px) {
-      margin-right: 10px;
-    }
-  }
-
-  .btn-audit {
-    margin-left: .5em;
-  }
-
-  .sidenav {
-    @extend .sidenav;
-    margin-left: 0px !important;
-    margin-right: -250px;
-  }
-
-  .sidenav.open {
-    margin-right: 0px;
-  }
-
-  .profile_image_container {
-    @extend .profile_image_container;
-    margin-right: 0px !important;
-    margin-left: 15px;
-  }
-
-  #blockchain-container.with-menu {
-    width: calc(100% + 120px);
-    left: 120px;
-  }
-}
-
-.scriptmessage {
-	overflow: hidden;
-	display: inline-block;
-	text-overflow: ellipsis;
-	vertical-align: middle;
-	max-width: 50px;
-	width: auto;
-  text-align: left;
-	@media (min-width: 376px) {
-		max-width: 90px;
-	}
-	@media (min-width: 476px) {
-		max-width: 180px;
-	}
-	@media (min-width: 576px) {
-		max-width: 260px;
-	}
-	@media (min-width: 768px) {
-    max-width: 400px;
-	}
-	@media (min-width: 850px) {
-    max-width: 522px;
-	}
-	@media (min-width: 992px) {
-		max-width: 190px;
-	}
-	@media (min-width: 1200px) {
-		max-width: 250px;
-	}
-}
-
-.scriptmessage.longer {
-	max-width: 230px;
-	@media (min-width: 376px) {
-		max-width: 290px;
-	}
-	@media (min-width: 476px) {
-		max-width: 380px;
-	}
-	@media (min-width: 576px) {
-		max-width: 470px;
-	}
-	@media (min-width: 768px) {
-    max-width: 850px;
-	}
-	@media (min-width: 992px) {
-		max-width: 410px;
-	}
-	@media (min-width: 1200px) {
-		max-width: 480px;
-	}
-}
-
-.tab-pane {
-  .card {
-    background-color: transparent;
-    padding: 0;
-
-    button {
-      text-align: left;
-      display: block;
-      width: 100%;
-      padding: 1rem 2rem;
-      color: var(--fg);
-      font-weight: bold;
-      &:focus, &:hover, &:active {
-        text-decoration: none;
-        outline: none;
-        box-shadow: none;
-      }
-    }
-
-    .card-header {
-      padding: 0;
-    }
-
-    .collapsed {
-      background-color: var(--secondary);
-      color: var(--info);
-    }
-  }
-
-  .subtitle {
-    font-weight: bold;
-    margin-bottom: 3px;
-    button {
-      padding: 0px !important;
-    }
-  }
-}
-
-
-.pagination-container {
-  display: inline-block;
-  width: 100%;
-  justify-content: space-between;
-  background: var(--bg);
-  margin: 0;
-  @media (min-width: 550px) {
-    width: auto;
-  }
-  ul {
-    justify-content: space-evenly !important;
-    margin: 0;
-    @media (min-width: 400px) {
-      width: auto;
-      padding-left: 5px;
-    }
-  }
-}
-
-.fee-estimation-wrapper {
-  .tooltip.show {
-    width: 220px;
-  }
-}
-
-
-
-// Blinking block
-@keyframes shadowyBackground {
-  0% {
-    box-shadow: -10px -15px 75px rgba($taproot, 1);
-  }
-  50% {
-    box-shadow: -10px -15px 75px rgba($taproot, .3);
-  }
-  100% {
-    box-shadow: -10px -15px 75px rgba($taproot, 1);
-  }
-}
-
-.blink-bg {
-  color: var(--fg);
-  background: repeating-linear-gradient($taproot-dark, $taproot-dark 0.163525%, $taproot-light 100%) !important;
-  animation: shadowyBackground 1s infinite;
-  box-shadow: -10px -15px 75px rgba($taproot, 1);
-  transition: 100ms all ease-in;
-}
-
-.page-item {
-  font-family: monospace;
-}
-
-#divider {
-  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='104%25' height='100%25' fill='none' stroke='white' stroke-width='4' stroke-dasharray='10%2c17' stroke-dashoffset='18' stroke-linecap='square'/%3e%3c/svg%3e");
-}
-
-.visually-hidden {
-  display: none;
-}
-
-app-master-page, app-liquid-master-page {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  padding-bottom: 60px;
-  @media (min-width: 992px) {
-    padding-bottom: 0px;
-  }
-}
-
-app-global-footer {
-  margin-top: auto;
-}
-
-.btn-xs {
-  padding: 0.25rem 0.5rem;
-  font-size: 0.875rem;
-  line-height: 0.5;
-  border-radius: 0.2rem;
-}
-
-.info-link fa-icon {
-  color: rgba(255, 255, 255, 0.4);
-  margin-left: 5px;
-}

From 279201638314b4121a90c937db34d9e1e871df16 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Tue, 9 Apr 2024 14:24:34 +0900
Subject: [PATCH 13/13] Fix relative imports

---
 .../block-overview-graph/block-overview-graph.component.ts      | 2 +-
 frontend/src/app/components/block-overview-graph/block-scene.ts | 2 +-
 frontend/src/app/components/fees-box/fees-box.component.ts      | 2 +-
 .../app/components/mempool-blocks/mempool-blocks.component.ts   | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
index d8b57e72d..3fee3f901 100644
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
+++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
@@ -7,7 +7,7 @@ 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 'src/app/services/theme.service';
+import { ThemeService } from '../../services/theme.service';
 import { Subscription } from 'rxjs';
 import { defaultColorFunction, setOpacity, defaultAuditColors, defaultColors, ageColorFunction, contrastColorFunction, contrastAuditColors, contrastColors } from './utils';
 import { ActiveFilter, FilterMode, toFlags } from '../../shared/filters.utils';
diff --git a/frontend/src/app/components/block-overview-graph/block-scene.ts b/frontend/src/app/components/block-overview-graph/block-scene.ts
index cb26fab02..6f420a1da 100644
--- a/frontend/src/app/components/block-overview-graph/block-scene.ts
+++ b/frontend/src/app/components/block-overview-graph/block-scene.ts
@@ -3,7 +3,7 @@ import TxView from './tx-view';
 import { TransactionStripped } from '../../interfaces/node-api.interface';
 import { Color, Position, Square, ViewUpdateParams } from './sprite-types';
 import { defaultColorFunction, contrastColorFunction } from './utils';
-import { ThemeService } from 'src/app/services/theme.service';
+import { ThemeService } from '../../services/theme.service';
 
 export default class BlockScene {
   scene: { count: number, offset: { x: number, y: number}};
diff --git a/frontend/src/app/components/fees-box/fees-box.component.ts b/frontend/src/app/components/fees-box/fees-box.component.ts
index d3a1f19b9..e923b26e9 100644
--- a/frontend/src/app/components/fees-box/fees-box.component.ts
+++ b/frontend/src/app/components/fees-box/fees-box.component.ts
@@ -4,7 +4,7 @@ import { Observable, combineLatest, Subscription } from 'rxjs';
 import { Recommendedfees } from '../../interfaces/websocket.interface';
 import { feeLevels } from '../../app.constants';
 import { map, startWith, tap } from 'rxjs/operators';
-import { ThemeService } from 'src/app/services/theme.service';
+import { ThemeService } from '../../services/theme.service';
 
 @Component({
   selector: 'app-fees-box',
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
index 0614bfec0..80d77427b 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
@@ -10,7 +10,7 @@ import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pi
 import { Location } from '@angular/common';
 import { DifficultyAdjustment, MempoolPosition } from '../../interfaces/node-api.interface';
 import { animate, style, transition, trigger } from '@angular/animations';
-import { ThemeService } from 'src/app/services/theme.service';
+import { ThemeService } from '../../services/theme.service';
 
 @Component({
   selector: 'app-mempool-blocks',