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