convert to CSS variables

2024-04-04 15:36:24 +09:00
parent b74fbee069
commit ee92f6639a
84 changed files with 317 additions and 225 deletions
--- 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);
 }
--- 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,
  ) {
--- 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;
--- 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;
--- 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,
--- 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,
--- 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,
--- 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;
--- 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,
--- 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,
--- 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 {
--- 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;
 }
--- 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)",
    };
  }

--- 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;
 }
--- 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 {
--- 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">
--- 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;
 }
--- 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);
--- 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,
          }
        },
--- 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;
    }
--- 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;
 }

--- 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;
      }
    }
--- 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,
--- 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,
--- 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,
--- 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)',
          },
        },
        {
--- 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 {
--- 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;
  }
--- 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 {
--- 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;
 }
--- 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;
 }
--- 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,
--- 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 {
--- 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;
      }
    }
--- 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,
--- 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;
--- 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 {
--- 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;
    }
--- 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;
--- 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;

--- 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;
 }
--- 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 {
--- 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>
--- 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);
      }
    }
  }