diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 6ed7c43f9..f09e66821 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -15,6 +15,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 { ShortenStringPipe } from './shared/pipes/shorten-string-pipe/shorten-string.pipe';
 import { CapAddressPipe } from './shared/pipes/cap-address-pipe/cap-address-pipe';
@@ -30,6 +31,7 @@ const providers = [
   StorageService,
   EnterpriseService,
   LanguageService,
+  ThemeService,
   ShortenStringPipe,
   FiatShortenerPipe,
   CapAddressPipe,
diff --git a/frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.scss b/frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.scss
index 4eeeee64e..a7714ed49 100644
--- a/frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.scss
+++ b/frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.scss
@@ -61,13 +61,13 @@
 }
 
 .big-fiat {
-  color: #3bcc49;
+  color: var(--green);
   font-size: 26px;
 }
 
 
   .card {
-    background-color: #1d1f31;
+    background-color: var(--bg);
     height: 100%;
   }
 
@@ -85,7 +85,7 @@
   .progress {
     display: inline-flex;
     width: 100%;
-    background-color: #2d3348;
+    background-color: var(--secondary);
     height: 1.1rem;
   }
 
diff --git a/frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.scss b/frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.scss
index f73dfea53..eb24ecee3 100644
--- a/frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.scss
+++ b/frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.scss
@@ -3,7 +3,7 @@
 		width: 150px;
 	}
 	.mobile-even tr:nth-of-type(even) {
-		background-color: #181b2d;
+		background-color: var(--stat-box-bg);
 	}
 	.mobile-even tr:nth-of-type(odd) {
 		background-color: inherit;
diff --git a/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.scss b/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.scss
index bffd646d8..499c1b179 100644
--- a/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.scss
+++ b/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.scss
@@ -16,7 +16,7 @@
 }
 
 .red {
-  	color:#dc3545;
+  	color:var(--red);
 }
 
 .grey {
diff --git a/frontend/src/app/bisq/bsq-amount/bsq-amount.component.scss b/frontend/src/app/bisq/bsq-amount/bsq-amount.component.scss
index 843bd58b6..c00988e71 100644
--- a/frontend/src/app/bisq/bsq-amount/bsq-amount.component.scss
+++ b/frontend/src/app/bisq/bsq-amount/bsq-amount.component.scss
@@ -1,3 +1,3 @@
 .green-color {
-  color: #3bcc49;
+  color: var(--green);
 }
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 d9d6f77d6..bf2844c60 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 0ff049d16..98307bc30 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/bisq-master-page/bisq-master-page.component.scss b/frontend/src/app/components/bisq-master-page/bisq-master-page.component.scss
index fabb9e0e9..4c852039c 100644
--- a/frontend/src/app/components/bisq-master-page/bisq-master-page.component.scss
+++ b/frontend/src/app/components/bisq-master-page/bisq-master-page.component.scss
@@ -1,5 +1,5 @@
 li.nav-item.active {
-  background-color: #653b9c;
+  background-color: var(--tertiary);
 }
 
 fa-icon {
@@ -95,23 +95,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/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 762e49c74..4499a69fc 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
@@ -238,7 +238,7 @@ export class BlockFeeRatesGraphComponent implements OnInit {
         splitLine: {
           lineStyle: {
             type: 'dotted',
-            color: '#ffffff66',
+            color: 'var(--transparent-fg)',
             opacity: 0.25,
           }
         },
@@ -305,7 +305,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 0c2f228b8..d3fc3f915 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
@@ -205,7 +205,7 @@ export class BlockFeesGraphComponent implements OnInit {
           splitLine: {
             lineStyle: {
               type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 0.25,
             }
           },
@@ -296,7 +296,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-overview-graph/block-overview-graph.component.scss b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss
index 58b53aebf..4f693e6c7 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-prediction-graph/block-prediction-graph.component.ts b/frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.ts
index e04565751..97756b2fe 100644
--- a/frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.ts
+++ b/frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.ts
@@ -177,7 +177,7 @@ export class BlockPredictionGraphComponent implements OnInit {
           splitLine: {
             lineStyle: {
               type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 0.25,
             }
           },
@@ -289,7 +289,7 @@ export class BlockPredictionGraphComponent 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-rewards-graph/block-rewards-graph.component.ts b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts
index fe80b0c97..b8f36950b 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
@@ -211,7 +211,7 @@ export class BlockRewardsGraphComponent implements OnInit {
           splitLine: {
             lineStyle: {
               type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 0.25,
             }
           },
@@ -307,7 +307,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 bc3c642db..c846317cd 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
@@ -214,7 +214,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit {
           splitLine: {
             lineStyle: {
               type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 0.25,
             }
           },
@@ -236,7 +236,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit {
             symbol: 'none',
             lineStyle: {
               type: 'solid',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 1,
               width: 1,
             },
@@ -314,7 +314,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 69002de79..a3634de87 100644
--- a/frontend/src/app/components/block/block.component.scss
+++ b/frontend/src/app/components/block/block.component.scss
@@ -196,7 +196,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 adde4a945..7cbc3456b 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
@@ -97,7 +97,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 8ac925eaf..e7944f88b 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
@@ -37,12 +37,12 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
   timeLtr: boolean;
 
   gradientColors = {
-    '': ['#9339f4', '#105fb0'],
-    bisq: ['#9339f4', '#105fb0'],
-    liquid: ['#116761', '#183550'],
-    'liquidtestnet': ['#494a4a', '#272e46'],
-    testnet: ['#1d486f', '#183550'],
-    signet: ['#6f1d5d', '#471850'],
+    '': ['var(--mainnet-alt)', 'var(--primary)'],
+    bisq: ['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(
@@ -181,7 +181,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
       left: addLeft + 155 * this.blocks.indexOf(block) + '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%
       )`,
@@ -198,7 +198,7 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
 
     return {
       left: addLeft + 155 * 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 df609ff40..c5a3d43b7 100644
--- a/frontend/src/app/components/blockchain/blockchain.component.scss
+++ b/frontend/src/app/components/blockchain/blockchain.component.scss
@@ -67,7 +67,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 713e59640..b68e8a6b2 100644
--- a/frontend/src/app/components/blocks-list/blocks-list.component.scss
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.scss
@@ -36,7 +36,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 e030f74fa..1cc5fb191 100644
--- a/frontend/src/app/components/difficulty/difficulty.component.html
+++ b/frontend/src/app/components/difficulty/difficulty.component.html
@@ -43,7 +43,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/difficulty.component.scss b/frontend/src/app/components/difficulty/difficulty.component.scss
index c5cd2dc5e..088276d06 100644
--- a/frontend/src/app/components/difficulty/difficulty.component.scss
+++ b/frontend/src/app/components/difficulty/difficulty.component.scss
@@ -4,7 +4,7 @@
   justify-content: space-around;
   height: 76px;
   .shared-block {
-    color: #ffffff66;
+    color: var(--transparent-fg);
     font-size: 12px;
   }
   .item {
@@ -77,7 +77,7 @@
 }
 
 .card {
-  background-color: #1d1f31;
+  background-color: var(--bg);
   height: 100%;
 }
 
@@ -89,7 +89,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 76a996acc..d3c09a1c9 100644
--- a/frontend/src/app/components/difficulty/difficulty.component.ts
+++ b/frontend/src/app/components/difficulty/difficulty.component.ts
@@ -43,24 +43,24 @@ export class DifficultyComponent implements OnInit {
     ])
     .pipe(
       map(([block, da]) => {
-        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 - (block.height % 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 8c90036fd..48fd2d23a 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
@@ -45,7 +45,7 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges {
         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 700d8f39e..c7d1f703d 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;
 }
@@ -55,7 +55,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 3021cf689..cfbbd0b22 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
@@ -120,7 +120,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 53bb33be3..87f85a543 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
@@ -325,7 +325,7 @@ export class HashrateChartComponent implements OnInit {
           splitLine: {
             lineStyle: {
               type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 0.25,
             }
           },
@@ -436,7 +436,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 ed3683e9b..3b4002196 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
@@ -271,7 +271,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 d721469b7..9bd747bdd 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
@@ -151,7 +151,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
         splitLine: {
           lineStyle: {
             type: 'dotted',
-            color: '#ffffff66',
+            color: 'var(--transparent-fg)',
             opacity: 0.25,
           }
         }
@@ -239,7 +239,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
     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 e4aa95492..18f377562 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
@@ -99,7 +99,7 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges {
           type: 'line',
         },
         formatter: (params: any) => {
-          const colorSpan = (color: string) => `<span class="indicator" style="background-color: #116761;"></span>`;
+          const colorSpan = (color: string) => `<span class="indicator" style="background-color: var(--liquid);"></span>`;
           let itemFormatted = '<div class="title">' + params[0].axisValue + '</div>';
           params.map((item: any, index: number) => {
             if (index < 26) {
@@ -131,7 +131,7 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges {
         splitLine: {
           lineStyle: {
             type: 'dotted',
-            color: '#ffffff66',
+            color: 'var(--transparent-fg)',
             opacity: 0.25,
           }
         }
@@ -145,11 +145,11 @@ export class LbtcPegsGraphComponent implements OnInit, OnChanges {
           showSymbol: false,
           areaStyle: {
             opacity: 0.2,
-            color: '#116761',
+            color: 'var(--liquid)',
           },
           lineStyle: {
             width: 3,
-            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 fefa1dd95..bd4ef1546 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
@@ -1,5 +1,5 @@
 li.nav-item.active {
-  background-color: #653b9c;
+  background-color: var(--tertiary);
 }
 
 fa-icon {
@@ -95,23 +95,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 7f44ade2c..4906bc76d 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 95f05245e..c16c3649b 100644
--- a/frontend/src/app/components/master-page/master-page.component.scss
+++ b/frontend/src/app/components/master-page/master-page.component.scss
@@ -1,5 +1,5 @@
 li.nav-item.active {
-  background-color: #653b9c;
+  background-color: var(--tertiary);
 }
 
 fa-icon {
@@ -110,23 +110,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 565d4b302..8a41f3450 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
@@ -101,7 +101,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 989fa141e..ed5cb7e1e 100644
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
+++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
@@ -347,7 +347,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
         splitLine: {
           lineStyle: {
             type: 'dotted',
-            color: '#ffffff66',
+            color: 'var(--transparent-fg)',
             opacity: 0.25,
           }
         }
@@ -396,7 +396,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 303591974..09c9d7b66 100644
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
@@ -11,7 +11,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 8cb82d92d..0aad4df35 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
@@ -126,7 +126,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 3460470ce..1223a2663 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
@@ -301,7 +301,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 9103f38f5..071582358 100644
--- a/frontend/src/app/components/pool/pool.component.scss
+++ b/frontend/src/app/components/pool/pool.component.scss
@@ -82,7 +82,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 d05790019..084ca16c5 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 619cac89a..07a0e9313 100644
--- a/frontend/src/app/components/transaction/transaction.component.scss
+++ b/frontend/src/app/components/transaction/transaction.component.scss
@@ -55,11 +55,11 @@
 }
 
 .arrow-green {
-	color: #1a9436;
+	color: var(--success);
 }
 
 .arrow-red {
-	color: #dc3545;
+	color: var(--red);
 }
 
 .container-xl {
@@ -85,7 +85,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 11e013e23..807216be1 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 {
@@ -56,7 +56,7 @@
 		text-align: right;
 	}
 	.sats {
-		color: #ffffff66;
+		color: var(--transparent-fg);
 		font-size: 11px;
 	}
 }
@@ -95,7 +95,7 @@
 		padding: 0.75rem;
 		font-size: 12px;
 		&:first-child {
-			color: #ffffff66;
+			color: var(--transparent-fg);
 			white-space: pre-wrap;
 			@media (min-width: 476px) {
 				white-space: nowrap;
@@ -123,7 +123,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 9360899e6..4425a6561 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
@@ -69,12 +69,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 a7e21ba94..452ee1175 100644
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@@ -11,7 +11,7 @@
 }
 
 .card {
-  background-color: #1d1f31;
+  background-color: var(--bg);
   height: 100%;
 }
 
@@ -29,7 +29,7 @@
 .progress {
   display: inline-flex;
   width: 100%;
-  background-color: #2d3348;
+  background-color: var(--secondary);
   height: 1.1rem;
   max-width: 180px;
 }
@@ -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/docs/api-docs/api-docs.component.scss b/frontend/src/app/docs/api-docs/api-docs.component.scss
index 7392d1f55..8a40fdacc 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;
 }
 
@@ -47,7 +47,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);
   }
 }
 
@@ -65,7 +65,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;
@@ -110,17 +110,17 @@ li.nav-item {
   top: 20px;
   overflow-y: auto;
   height: calc(100vh - 50px);
-  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;
 }
@@ -148,8 +148,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;
@@ -163,7 +163,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;
@@ -195,7 +195,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;
@@ -204,9 +204,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;
 }
 
@@ -221,7 +221,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/fiat/fiat.component.scss b/frontend/src/app/fiat/fiat.component.scss
index 843bd58b6..c00988e71 100644
--- a/frontend/src/app/fiat/fiat.component.scss
+++ b/frontend/src/app/fiat/fiat.component.scss
@@ -1,3 +1,3 @@
 .green-color {
-  color: #3bcc49;
+  color: var(--green);
 }
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 23a874ee8..ba6df7b45 100644
--- a/frontend/src/app/lightning/channel/channel-preview.component.scss
+++ b/frontend/src/app/lightning/channel/channel-preview.component.scss
@@ -29,7 +29,7 @@
 }
 
 .row.nodes {
-  background: #181b2d;
+  background: var(--stat-box-bg);
   margin: 15px 0 0;
 }
 
@@ -48,7 +48,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 f52b85762..a63a139d5 100644
--- a/frontend/src/app/lightning/channel/channel.component.html
+++ b/frontend/src/app/lightning/channel/channel.component.html
@@ -1,5 +1,5 @@
 <div class="container-xl" *ngIf="(channel$ | async) as channel; else skeletonLoader">
-  <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">
@@ -114,7 +114,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 b460e8a51..99e2b7e7b 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 bedcc0ded..8a11ddbea 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>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>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 e97f0d0af..d9a04a5b6 100644
--- a/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss
+++ b/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss
@@ -54,7 +54,7 @@
       margin-bottom: 0;
     }
     .card-text span {
-      color: #ffffff66;
+      color: var(--transparent-fg);
       font-size: 12px;
       top: 0px;
     }
@@ -107,5 +107,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 541885cce..4b2106f96 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 303591974..09c9d7b66 100644
--- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
+++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
@@ -11,7 +11,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 f0370d3e1..44d7cf43f 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
@@ -196,7 +196,7 @@ export class NodeFeeChartComponent implements OnInit {
           splitLine: {
             lineStyle: {
               type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 0.25,
             }
           },
@@ -252,7 +252,7 @@ export class NodeFeeChartComponent implements OnInit {
     const prevBottom = this.chartOptions.grid.bottom;
     // @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/node-statistics-chart/node-statistics-chart.component.ts b/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts
index 91384b31b..430ffbb64 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
@@ -179,7 +179,7 @@ export class NodeStatisticsChartComponent implements OnInit {
           splitLine: {
             lineStyle: {
               type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 0.25,
             }
           },
@@ -215,7 +215,7 @@ export class NodeStatisticsChartComponent implements OnInit {
             symbol: 'none',
             lineStyle: {
               type: 'solid',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 1,
               width: 1,
             },
@@ -259,7 +259,7 @@ export class NodeStatisticsChartComponent 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/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 c1775dd52..5b8f842e7 100644
--- a/frontend/src/app/lightning/node/node-preview.component.scss
+++ b/frontend/src/app/lightning/node/node-preview.component.scss
@@ -27,7 +27,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 b5d472d2c..ac849a318 100644
--- a/frontend/src/app/lightning/node/node.component.html
+++ b/frontend/src/app/lightning/node/node.component.html
@@ -1,5 +1,5 @@
 <div class="container-xl" *ngIf="(node$ | async) as node; else skeletonLoader">
-  <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" *ngIf="!error">
     <h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
     <span class="tx-link">
@@ -255,7 +255,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 77b9cabb7..33ba47318 100644
--- a/frontend/src/app/lightning/node/node.component.scss
+++ b/frontend/src/app/lightning/node/node.component.scss
@@ -84,7 +84,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 b262f58fd..83d823a63 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
@@ -5,7 +5,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>
 
       <div class="chart" [class]="style" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
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 7fed096f5..4046797b8 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>
 
   <div *ngIf="observable$ | async" class="chart" [class]="widget ? 'widget' : ''" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
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 4ff4dbf3e..8b3153fe6 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
@@ -119,7 +119,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 abf104e2f..8e7a36904 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
@@ -340,7 +340,7 @@ export class NodesNetworksChartComponent implements OnInit {
           splitLine: {
             lineStyle: {
               type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 0.25,
             },
           },
@@ -363,7 +363,7 @@ export class NodesNetworksChartComponent implements OnInit {
           splitLine: {
             lineStyle: {
               type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 0.25,
             },
           },
@@ -437,7 +437,7 @@ export class NodesNetworksChartComponent 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/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 9928d57a8..bf1e0f2dc 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 bottom-padding">
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 97a3e76f6..49c356457 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 681688842..3ec5c2635 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
@@ -218,7 +218,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 e2c4553b8..6d617ef08 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 25e4cf7f3..bb91c369e 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 60f5ca9d4..5424a2523 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 54055de36..b801c3e97 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
@@ -127,7 +127,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 caaa350d6..3889cc269 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
@@ -268,7 +268,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 6e402e945..2a6c0773f 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 b829c5b59..9bee7aea8 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 c9b835054..f0313321c 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
@@ -119,7 +119,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 916483781..6fca05b36 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
@@ -228,7 +228,7 @@ export class LightningStatisticsChartComponent implements OnInit {
           splitLine: {
             lineStyle: {
               type: 'dotted',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 0.25,
             }
           },
@@ -269,7 +269,7 @@ export class LightningStatisticsChartComponent implements OnInit {
             symbol: 'none',
             lineStyle: {
               type: 'solid',
-              color: '#ffffff66',
+              color: 'var(--transparent-fg)',
               opacity: 1,
               width: 1,
             },
@@ -337,7 +337,7 @@ export class LightningStatisticsChartComponent 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/index.bisq.html b/frontend/src/index.bisq.html
index 43c85b404..3ca418d94 100644
--- a/frontend/src/index.bisq.html
+++ b/frontend/src/index.bisq.html
@@ -23,7 +23,7 @@
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <meta name="msapplication-TileColor" content="#000000">
   <meta name="msapplication-config" content="/resources/bisq/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">
 
diff --git a/frontend/src/index.liquid.html b/frontend/src/index.liquid.html
index 630f6a2ab..97ef201e4 100644
--- a/frontend/src/index.liquid.html
+++ b/frontend/src/index.liquid.html
@@ -31,7 +31,7 @@
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <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 60f1b4421..2dca09712 100644
--- a/frontend/src/index.mempool.html
+++ b/frontend/src/index.mempool.html
@@ -30,7 +30,7 @@
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <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 d3d16d12e..68aa00a42 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;
 }
@@ -81,7 +128,7 @@ body {
   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);
@@ -99,19 +146,19 @@ body {
 }
 
 .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 {
@@ -122,12 +169,12 @@ body {
 }
 
 .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 {
@@ -181,20 +228,20 @@ body {
 }
 
 .symbol {
-	color: #ffffff66;
+	color: var(--transparent-fg);
 	font-size: 12px;
 }
 
 .progress-text {
   span {
-    color: #fff !important;
+    color: var(--fg) !important;
   }
 }
 
 .block-size, .blocks-container {
   span {
     font-size: 16px;
-    color: #fff !important;
+    color: var(--fg) !important;
   }
 }
 
@@ -204,17 +251,17 @@ body {
 }
 
 .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;
@@ -253,27 +300,27 @@ body {
 }
 
 .close {
-  color: #fff;
+  color: var(--fg);
 }
 
 .close:hover {
-  color: #fff;
+  color: var(--fg);
 }
 
 .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 {
@@ -301,7 +348,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;
@@ -330,7 +377,7 @@ html:lang(ru) .card-title {
     font-size: 12px;
     font-weight: 700;
     margin-bottom: 2px;
-    color: #fff;
+    color: var(--fg);
     .total-value {
       float: right;
     }
@@ -389,7 +436,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 {
@@ -485,7 +532,7 @@ html:lang(ru) .card-title {
 
 .fees-wrapper-tooltip-chart-advanced,
 .tx-wrapper-tooltip-chart-advanced {
-  background: rgba(#1d1f31, 0.98);
+  background: rgba($bg, 0.98);
   width: 275px;
 
   thead {
@@ -641,27 +688,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 {
@@ -669,12 +716,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 {
@@ -682,9 +729,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;
@@ -989,7 +1036,7 @@ th {
       display: block;
       width: 100%;
       padding: 1rem 2rem;
-      color: #fff;
+      color: var(--fg);
       font-weight: bold;
       &:focus, &:hover, &:active {
         text-decoration: none;
@@ -1003,8 +1050,8 @@ th {
     }
 
     .collapsed {
-      background-color: #2d3348;
-      color: #1bd8f4;
+      background-color: var(--secondary);
+      color: var(--info);
     }
   }
 
@@ -1022,7 +1069,7 @@ th {
   display: inline-block;
   width: 100%;
   justify-content: space-between;
-  background: #1d1f31;
+  background: var(--bg);
   margin: 0;
   @media (min-width: 550px) {
     width: auto;
@@ -1048,21 +1095,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;
 }