Replace more hardcoded css

2025-02-24 06:47:52 +01:00 · 2024-04-06 15:48:35 +09:00 · 2024-04-06 15:48:35 +09:00 · 7e920f4bae
commit 7e920f4bae
parent cde3d878b1
56 changed files with 128 additions and 125 deletions
--- a/frontend/src/app/components/about/about-sponsors.component.scss
+++ b/frontend/src/app/components/about/about-sponsors.component.scss
@ -14,7 +14,7 @@
 }

 .become-sponsor {
-  background-color: #1d1f31;
+  background-color: var(--bg);
  border-radius: 16px;
  padding: 12px 20px;
  width: 400px;
--- a/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss
+++ b/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss
@ -92,7 +92,7 @@

      &.target {
        .fill {
-          background: #653b9c;
+          background: var(--tertiary);
        }
        .fee {
          position: absolute;
@ -114,7 +114,7 @@
        }
        &.active, &:hover {
          .fill {
-            background: #105fb0;
+            background: var(--primary);
          }
          .line {
            .fee-rate .label {
--- a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html
+++ b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html
@ -179,10 +179,10 @@
              <ng-container>
                <tr class="group-first">
                  <td class="item">
-                    <b style="background-color: #105fb0;" class="p-1 pl-0">Maximum acceleration cost</b>
+                    <b style="background-color: var(--primary);" class="p-1 pl-0">Maximum acceleration cost</b>
                  </td>
                  <td class="amt">
-                    <span style="background-color: #105fb0" class="p-1 pl-0">
+                    <span style="background-color: var(--primary)" class="p-1 pl-0">
                      {{ maxCost | number }}
                    </span>
                  </td>
--- a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss
+++ b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss
@ -1,6 +1,6 @@
 .fee-card {
  padding: 15px;
-  background-color: #1d1f31;
+  background-color: var(--bg);

  .feerate {
    display: flex;
@ -23,7 +23,7 @@
 }

 .feerate.active {
-  background-color: #105fb0 !important;
+  background-color: var(--primary) !important;
  opacity: 1;
  border: 1px solid #007fff !important;
 }
--- a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss
+++ b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss
@ -62,7 +62,7 @@ h5 {

 .card-title {
  font-size: 1rem;
-  color: #4a68b9;
+  color: var(--title-fg);
 }

 .disabled {
--- a/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.scss
+++ b/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.scss
@ -1,5 +1,5 @@
 .card-title {
-  color: #4a68b9;
+  color: var(--title-fg);
  font-size: 10px;
  margin-bottom: 4px;  
  font-size: 1rem;
--- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss
+++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss
@ -59,7 +59,7 @@ tr, td, th {
 }

 .progress {
-  background-color: #2d3348;
+  background-color: var(--secondary);
 }

 .txid {
@ -148,7 +148,7 @@ tr, td, th {

 .tooltip-custom .tooltiptext {
  visibility: hidden;
-  color: #fff;
+  color: var(--fg);
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html
@ -40,7 +40,7 @@
          <a class="title-link" href="" [routerLink]="['/mempool-block/0' | relativeUrl]">
            <h5 class="card-title d-inline" i18n="dashboard.mempool-goggles-accelerations">Mempool Goggles: Accelerations</h5>
            <span>&nbsp;</span>
-            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: #4a68b9"></fa-icon>
+            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: var(--title-fg)"></fa-icon>
          </a>
          <div class="mempool-block-wrapper" *ngIf="webGlEnabled">
            <app-mempool-block-overview [index]="0" [overrideColors]="getAcceleratorColor"></app-mempool-block-overview>
@ -85,7 +85,7 @@
          <a class="title-link" href="" [routerLink]="['/acceleration/list' | relativeUrl]">
            <h5 class="card-title d-inline" i18n="dashboard.recent-accelerations">Recent Accelerations</h5>
            <span>&nbsp;</span>
-            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: #4a68b9"></fa-icon>
+            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: var(--title-fg)"></fa-icon>
          </a>
          <app-accelerations-list [attr.data-cy]="'recent-accelerations'" [widget]=true [accelerations$]="minedAccelerations$"></app-accelerations-list>
        </div>
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
@ -7,7 +7,7 @@
 }

 .card {
-  background-color: #1d1f31;
+  background-color: var(--bg);
 }

 .graph-card {
@ -29,10 +29,10 @@

 .card-title {
  font-size: 1rem;
-  color: #4a68b9;
+  color: var(--title-fg);
 }
 .card-title > a {
-  color: #4a68b9;
+  color: var(--title-fg);
 }

 .card-body.pool-ranking {
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
@ -8,12 +8,14 @@ import { Observable, catchError, combineLatest, distinctUntilChanged, interval,
 import { Color } from '../../block-overview-graph/sprite-types';
 import { hexToColor } from '../../block-overview-graph/utils';
 import TxView from '../../block-overview-graph/tx-view';
-import { feeLevels, defaultMempoolFeeColors } from '../../../app.constants';
+import { feeLevels, defaultMempoolFeeColors, contrastMempoolFeeColors } from '../../../app.constants';
 import { ServicesApiServices } from '../../../services/services-api.service';
 import { detectWebGL } from '../../../shared/graphs.utils';
+import { ThemeService } from '../../../services/theme.service';

 const acceleratedColor: Color = hexToColor('8F5FF6');
 const normalColors = defaultMempoolFeeColors.map(hex => hexToColor(hex + '5F'));
+const contrastColors = contrastMempoolFeeColors.map(hex => hexToColor(hex + '5F'));

 interface AccelerationBlock extends BlockExtended {
  accelerationCount: number,
@ -34,6 +36,7 @@ export class AcceleratorDashboardComponent implements OnInit {
  webGlEnabled = true;

  graphHeight: number = 300;
+  theme: ThemeService;

  constructor(
    private seoService: SeoService,
@ -128,7 +131,7 @@ export class AcceleratorDashboardComponent implements OnInit {
    } else {
      const rate = tx.fee / tx.vsize; // color by simple single-tx fee rate
      const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1;
-      return normalColors[feeLevelIndex] || normalColors[defaultMempoolFeeColors.length - 1];
+      return this.theme.theme === 'contrast' ? contrastColors[feeLevelIndex] || contrastColors[contrastColors.length - 1] : normalColors[feeLevelIndex] || normalColors[normalColors.length - 1];
    }
  }

--- a/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.scss
+++ b/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.scss
@ -1,5 +1,5 @@
 .card-title {
-  color: #4a68b9;
+  color: var(--title-fg);
  font-size: 10px;
  margin-bottom: 4px;  
  font-size: 1rem;
--- a/frontend/src/app/components/address/address-preview.component.scss
+++ b/frontend/src/app/components/address/address-preview.component.scss
@ -3,7 +3,7 @@
 }

 .qr-wrapper {
-  background-color: #FFF;
+  background-color: var(--fg);
  padding: 10px;
  padding-bottom: 5px;
  display: inline-block;
--- a/frontend/src/app/components/address/address.component.scss
+++ b/frontend/src/app/components/address/address.component.scss
@ -1,5 +1,5 @@
 .qr-wrapper {
-  background-color: #FFF;
+  background-color: var(--fg);
  padding: 10px;
  padding-bottom: 5px;
  display: inline-block;
--- a/frontend/src/app/components/app/app.component.ts
+++ b/frontend/src/app/components/app/app.component.ts
@ -4,7 +4,6 @@ import { Router, NavigationEnd } from '@angular/router';
 import { StateService } from '../../services/state.service';
 import { OpenGraphService } from '../../services/opengraph.service';
 import { NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap';
-import { ThemeService } from 'src/app/services/theme.service';

@Component({
  selector: 'app-root',
@ -20,7 +19,6 @@ export class AppComponent implements OnInit {
    private stateService: StateService,
    private openGraphService: OpenGraphService,
    private location: Location,
-    private theme: ThemeService,
    tooltipConfig: NgbTooltipConfig,
    @Inject(LOCALE_ID) private locale: string,
  ) {
--- a/frontend/src/app/components/asset/asset.component.scss
+++ b/frontend/src/app/components/asset/asset.component.scss
@ -1,5 +1,5 @@
 .qr-wrapper {
-  background-color: #FFF;
+  background-color: var(--fg);
  padding: 10px;
  padding-bottom: 5px;
  display: inline-block;
--- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss
+++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss
@ -95,7 +95,7 @@
    }
    .card-title {
      font-size: 1rem;
-      color: #4a68b9;
+      color: var(--title-fg);
    }
    .card-text {
      font-size: 18px;
--- a/frontend/src/app/components/block-filters/block-filters.component.scss
+++ b/frontend/src/app/components/block-filters/block-filters.component.scss
@ -64,7 +64,7 @@
  .filter-tag {
    font-size: 0.9em;
    background: #181b2daf;
-    border: solid 1px #105fb0;
+    border: solid 1px var(--primary);
    color: white;
    border-radius: 0.2rem;
    padding: 0.2em 0.5em;
@ -73,15 +73,15 @@
    pointer-events: all;

    &.selected {
-      background-color: #105fb0;
+      background-color: var(--primary);
    }
  }

  &.any-mode {
    .filter-tag {
-      border: solid 1px #1a9436;
+      border: solid 1px var(--success);
      &.selected {
-        background-color: #1a9436;
+        background-color: var(--success);
      }
    }
  }
@ -107,15 +107,15 @@
    }

    &.blue {
-      border: solid 1px #105fb0;
+      border: solid 1px var(--primary);
      &.active {
-        background: #105fb0;
+        background: var(--primary);
      }
    }
    &.green {
-      border: solid 1px #1a9436;
+      border: solid 1px var(--success);
      &.active {
-        background: #1a9436;
+        background: var(--success);
      }
    }
  }
--- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss
+++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss
@ -30,7 +30,7 @@ th, td {
 }

 .badge.badge-accelerated {
-  background-color: #653b9c;
+  background-color: var(--tertiary);
  box-shadow: #ad7de57f 0px 0px 12px -2px;
  color: white;
  animation: acceleratePulse 1s infinite;
@ -51,27 +51,27 @@ th, td {

  .filter-tag {
    background: #181b2daf;
-    border: solid 1px #105fb0;
+    border: solid 1px var(--primary);
    color: white;
    transition: background-color 300ms;

    &.matching {
-      background-color: #105fb0;
+      background-color: var(--primary);
    }
  }

  &.any-mode {
    .filter-tag {
-      border: solid 1px #1a9436;
+      border: solid 1px var(--success);
      &.matching {
-        background-color: #1a9436;
+        background-color: var(--success);
      }
    }
  }
 }

@keyframes acceleratePulse {
-  0% { background-color: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; }
+  0% { background-color: var(--tertiary); box-shadow: #ad7de57f 0px 0px 12px -2px; }
  50% { background-color: #8457bb; box-shadow: #ad7de5 0px 0px 18px -2px;}
-  100% { background-color: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; }
+  100% { background-color: var(--tertiary); box-shadow: #ad7de57f 0px 0px 12px -2px; }
 }
--- a/frontend/src/app/components/block/block.component.scss
+++ b/frontend/src/app/components/block/block.component.scss
@ -22,7 +22,7 @@
 }

 .qr-wrapper {
-  background-color: #FFF;
+  background-color: var(--fg);
  padding: 10px;
  padding-bottom: 5px;
  display: inline-block;
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
@ -144,7 +144,7 @@
 }

 .loading .bitcoin-block.mined-block {
-  background: #2d3348;
+  background: var(--secondary);
 }

@keyframes opacityPulse {
--- a/frontend/src/app/components/blocks-list/blocks-list.component.scss
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.scss
@ -266,7 +266,7 @@ tr, td, th {

 .tooltip-custom .tooltiptext {
  visibility: hidden;
-  color: #fff;
+  color: var(--fg);
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
--- a/frontend/src/app/components/clock-face/clock-face.component.scss
+++ b/frontend/src/app/components/clock-face/clock-face.component.scss
@ -29,8 +29,8 @@
    }

    &.hour {
-      fill: #105fb0;
-      stroke: #105fb0;
+      fill: var(--primary);
+      stroke: var(--primary);
      stroke-width: 6px;
    }
  }
--- a/frontend/src/app/components/clock/clock.component.scss
+++ b/frontend/src/app/components/clock/clock.component.scss
@ -161,7 +161,7 @@
    }

    .side.bottom {
-      background: #105fb0;
+      background: var(--primary);
      transform: rotateX(-90deg); 
      margin-top: var(--half-side);
    }
--- a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html
+++ b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html
@ -40,7 +40,7 @@
          <h5 class="card-title" i18n="difficulty-box.current-period">Current Period</h5>
          <div class="card-text">{{ epochData.progress | number: '1.2-2' }} <span class="symbol">%</span></div>
          <div class="progress small-bar">
-            <div class="progress-bar" role="progressbar" style="width: 15%; background-color: #105fb0" [ngStyle]="{'width': epochData.base}">&nbsp;</div>
+            <div class="progress-bar" role="progressbar" style="width: 15%; background-color: var(--primary)" [ngStyle]="{'width': epochData.base}">&nbsp;</div>
          </div>
        </div>
        <div class="item" *ngIf="showHalving">
--- a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss
+++ b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss
@ -79,12 +79,12 @@
 }

 .card {
-  background-color: #1d1f31;
+  background-color: var(--bg);
  height: 100%;
 }

 .card-title {
-  color: #4a68b9;
+  color: var(--title-fg);
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
@ -94,7 +94,7 @@
 .progress {
  display: inline-flex;
  width: 100%;
-  background-color: #2d3348;
+  background-color: var(--secondary);
  height: 1.1rem;
  max-width: 180px;
 }
--- a/frontend/src/app/components/difficulty/difficulty.component.scss
+++ b/frontend/src/app/components/difficulty/difficulty.component.scss
@ -177,10 +177,10 @@
 .epoch-blocks {
  display: block;
  width: 100%;
-  background: #2d3348;
+  background: var(--secondary);

  .rect {
-    fill: #2d3348;
+    fill: var(--secondary);

    &.behind {
      fill: #D81B60;
@ -189,7 +189,7 @@
      fill: url(#diff-gradient);
    }
    &.ahead {
-      fill: #1a9436;
+      fill: var(--success);
    }

    &.hover {
@ -223,12 +223,12 @@
    height: 100%;
  }
  .background {
-    background: linear-gradient(to right, #105fb0, #9339f4);
+    background: linear-gradient(to right, var(--primary), #9339f4);
    left: 0;
    right: 0;
  }
  .remaining {
-    background: #2d3348;
+    background: var(--secondary);
    right: 0;
  }
  .label {
--- a/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/expired-utxos-stats/expired-utxos-stats.component.html
@ -9,7 +9,7 @@

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

    .card-title {
-      color: #4a68b9;
+      color: var(--title-fg);
      font-size: 10px;
      margin-bottom: 4px;  
      font-size: 1rem;
--- a/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss
@ -33,7 +33,7 @@ tr, td, th {
 }

 .progress {
-  background-color: #2d3348;
+  background-color: var(--secondary);
 }

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

    .card-title {
      margin: 0;
-      color: #4a68b9;
+      color: var(--title-fg);
      font-size: 10px;
      font-size: 1rem;
      white-space: nowrap;
--- a/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.scss
@ -24,7 +24,7 @@ tr, td, th {
 }

 .progress {
-  background-color: #2d3348;
+  background-color: var(--secondary);
 }

 .txid {
--- a/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss
@ -27,7 +27,7 @@ tr, td, th {
 }

 .progress {
-  background-color: #2d3348;
+  background-color: var(--secondary);
 }

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

    .card-title {
      margin: 0;
-      color: #4a68b9;
+      color: var(--title-fg);
      font-size: 10px;
      font-size: 1rem;
      white-space: nowrap;
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.html
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio-stats/reserves-ratio-stats.component.html
@ -23,7 +23,7 @@

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

    .card-title {
      margin-bottom: 4px;
-      color: #4a68b9;
+      color: var(--title-fg);
      font-size: 10px;
      font-size: 1rem;
      white-space: nowrap;
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts
@ -141,7 +141,7 @@ export class ReservesRatioComponent implements OnInit, OnChanges {
            show: true,
            offsetCenter: [0, '-127%'],
            fontSize: 18,
-            color: '#4a68b9',
+            color: 'var(--title-fg)',
            fontFamily: 'inherit',
            fontWeight: 500,
          },
--- a/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.scss
+++ b/frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.scss
@ -13,7 +13,7 @@
    }

    .card-title {
-      color: #4a68b9;
+      color: var(--title-fg);
      font-size: 10px;
      margin-bottom: 4px;  
      font-size: 1rem;
--- a/frontend/src/app/components/menu/menu.component.scss
+++ b/frontend/src/app/components/menu/menu.component.scss
@ -28,7 +28,7 @@
 .sidenav.open {
  left: 0px;
  display: block;
-  background-color: #1d1f31;
+  background-color: var(--bg);
 }

 .sidenav a, button{
@ -42,7 +42,7 @@
 .sidenav nav {
  width: 100%;
  height: calc(100vh - 65px);
-  background-color: #1d1f31;
+  background-color: var(--bg);
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
@ -61,7 +61,7 @@
 }

 .badge-og {
-  background-color: #4a68b9;
+  background-color: var(--title-fg);
 }

 .badge-pleb {
@ -73,7 +73,7 @@
 }

 .badge-whale {
-  background-color: #653b9c;
+  background-color: var(--tertiary);
 }

 .badge-silver {
@ -85,5 +85,5 @@
 }

 .badge-platinum {
-  background-color: #653b9c;
+  background-color: var(--tertiary);
 }
--- a/frontend/src/app/components/rbf-list/rbf-list.component.scss
+++ b/frontend/src/app/components/rbf-list/rbf-list.component.scss
@ -25,7 +25,7 @@
  }

  .timeline-wrapper.mined {
-    border: solid 4px #1a9436;
+    border: solid 4px var(--success);
  }

  .no-replacements {
--- a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
+++ b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
@ -101,7 +101,7 @@
      right: -5px;
      top: 0;
      transform: translateY(-50%);
-      background: #105fb0;
+      background: var(--primary);
      border-radius: 5px;

      &.left {
@ -112,7 +112,7 @@
      }

      &.fullrbf {
-        background: #1bd8f4;
+        background: var(--info);
      }
    }
    &.first-node {
@ -165,20 +165,20 @@

      &.mined {
        .shape-border {
-          background: #1a9436;
+          background: var(--success);
        }
      }

      .shape-border:hover {
        padding: 0px;
        .shape {
-          background: #1bd8f4;
+          background: var(--info);
        }
      }

      &.selected.mined {
        .shape-border {
-          background: #1a9436;
+          background: var(--success);
          height: calc(1em + 16px);
          width: calc(1em + 16px);

@ -190,7 +190,7 @@
            padding: 4px;
            .shape {
              border-width: 1px;
-              border-color: #1bd8f4
+              border-color: var(--info)
            }
          }
        }
@ -207,9 +207,9 @@
        width: 20px;
        height: 108px;
        bottom: 50%;
-        border-right: solid 10px #105fb0;
+        border-right: solid 10px var(--primary);
        &.fullrbf {
-          border-right: solid 10px #1bd8f4;
+          border-right: solid 10px var(--info);
        }
        &.last-pipe {
          height: 150px;
@ -218,10 +218,10 @@
      }

      .corner {
-        border-bottom: solid 10px #105fb0;
+        border-bottom: solid 10px var(--primary);
        border-bottom-right-radius: 10px;
        &.fullrbf {
-          border-bottom: solid 10px #1bd8f4;
+          border-bottom: solid 10px var(--info);
        }
      }
    }
--- a/frontend/src/app/components/start/start.component.scss
+++ b/frontend/src/app/components/start/start.component.scss
@ -32,7 +32,7 @@
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 500ms;
-    background: radial-gradient(#1d1f31 0%, transparent 50%);
+    background: radial-gradient(var(--bg) 0%, transparent 50%);

    &:hover {
      opacity: 1;
--- a/frontend/src/app/components/transaction/transaction-preview.component.scss
+++ b/frontend/src/app/components/transaction/transaction-preview.component.scss
@ -113,7 +113,7 @@
      max-width: 100%;
      margin: auto;
      table-layout: auto;
-      background: #2d3348af;
+      background: var(--secondary)af;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;

--- a/frontend/src/app/components/transaction/transaction.component.scss
+++ b/frontend/src/app/components/transaction/transaction.component.scss
@ -61,7 +61,7 @@
 }

 .badge.badge-accelerated {
-  background-color: #653b9c;
+  background-color: var(--tertiary);
  color: white;
 }

@ -256,7 +256,7 @@
 }

 .blink-bg {
-  color: #fff;
+  color: var(--fg);
  background: repeating-linear-gradient(#daad0a 0%, #daad0a 5%, #987805 100%) !important;
  animation: shadowyBackground 1s infinite;
  box-shadow: 0px 0px 20px rgba(#eba814, 1);
@ -279,7 +279,7 @@
  display: flex !important;
  align-self: auto;
  margin-left: auto;
-  background-color: #653b9c;
+  background-color: var(--tertiary);
  @media (max-width: 849px) {
    margin-left: 5px;
  }
@ -302,7 +302,7 @@
  align-self: auto;
  margin-top: 3px;
  margin-left: auto;
-  background-color: #653b9c;
+  background-color: var(--tertiary);
  @media (max-width: 995px) {
    margin-left: 0px;
  }
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@ -20,7 +20,7 @@
          <a class="title-link mb-0" style="margin-top: -2px" href="" [routerLink]="['/mempool-block/0' | relativeUrl]">
            <h5 class="card-title d-inline"><span i18n="dashboard.mempool-goggles">Mempool Goggles</span>: {{ goggleCycle[goggleIndex].name }}</h5>
            <span>&nbsp;</span>
-            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
+            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
          </a>
          <div class="quick-filter">
            <div class="btn-group btn-group-toggle">
@ -97,7 +97,7 @@
            <a class="title-link" href="" [routerLink]="['/blocks' | relativeUrl]">
              <h5 class="card-title d-inline" i18n="dashboard.recent-blocks">Recent Blocks</h5>
              <span>&nbsp;</span>
-              <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
+              <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
            </a>
            <table class="table lastest-blocks-table">
              <thead>
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@ -399,11 +399,11 @@
 .goggle-badge {
  margin: 6px 5px 8px;
  background: none;
-  border: solid 2px #105fb0;
+  border: solid 2px var(--primary);
  cursor: pointer;

  &.active {
-    background: #105fb0;
+    background: var(--primary);
  }
 }

@ -418,7 +418,7 @@
 }

 .card-liquid {
-  background-color: #1d1f31;
+  background-color: var(--bg);
  height: 418px;
  @media (min-width: 992px) {
    height: 512px;
--- a/frontend/src/app/docs/api-docs/api-docs-nav.component.scss
+++ b/frontend/src/app/docs/api-docs/api-docs-nav.component.scss
@ -6,7 +6,7 @@ p {
 }

 a {
-  color: #fff;
+  color: var(--fg);
  text-decoration: none;
  display: block;
  margin: 5px 0;
@ -17,13 +17,13 @@ a {
  text-align: center;
  padding: 20px;
  margin: 20px 20px 20px 0;
-  background-color: #1d1f31;
+  background-color: var(--bg);
  border-radius: 12px;
 }

 #enterprise-cta-desktop p {
  margin: 0 auto 16px auto;
-  color: #fff;
+  color: var(--fg);
  font-weight: 400;
 }

--- a/frontend/src/app/docs/api-docs/api-docs.component.scss
+++ b/frontend/src/app/docs/api-docs/api-docs.component.scss
@ -211,7 +211,7 @@ h3 {
 }

 .endpoint-container .section-header span {
-  color: #fff;
+  color: var(--fg);
  background-color: var(--tertiary);
  font-size: 12px;
  text-transform: uppercase;
@ -254,7 +254,7 @@ h3 {
 #doc-nav-mobile button {
  width: 100%;
  background-color: var(--primary);
-  color: #fff;
+  color: var(--fg);
  border-color: var(--primary);
  border-radius: 0.5rem 0.5rem 0 0;
 }
@ -318,7 +318,7 @@ h3 {

 #enterprise-cta-mobile {
  padding: 20px;
-  background-color: #1d1f31;
+  background-color: var(--bg);
  border-radius: 0.25rem;
  text-align: center;
  position: fixed;
@ -343,8 +343,8 @@ h3 {
 }

 #enterprise-cta-mobile .btn-secondary:hover {
-  background-color: #2d3348;
-  border-color: #2d3348;
+  background-color: var(--secondary);
+  border-color: var(--secondary);
 }

 #enterprise-cta-mobile .no-line-break {
@ -438,7 +438,7 @@ dl {

 dt {
  font-weight: bold;
-  color: #4a68b9;
+  color: var(--title-fg);
  padding: 5px 0;
 }

@ -447,7 +447,7 @@ dd {

  & > dl {
    padding-left: 1em;
-    border-left: 2px solid #4a68b9;
+    border-left: 2px solid var(--title-fg);
    margin-left: 1em;
    margin-top: 5px;
  }
--- a/frontend/src/app/lightning/channel/channel-close-box/channel-close-box.component.scss
+++ b/frontend/src/app/lightning/channel/channel-close-box/channel-close-box.component.scss
@ -60,19 +60,19 @@
    justify-content: center;

    &.left {
-      background: #105fb0;
+      background: var(--primary);
    }
    &.center {
      background: repeating-linear-gradient(
        60deg,
-        #105fb0 0,
-        #105fb0 12px,
-        #1a9436 12px,
-        #1a9436 24px
+        var(--primary) 0,
+        var(--primary) 12px,
+        var(--success) 12px,
+        var(--success) 24px
      );
    }
    &.right {
-      background: #1a9436;
+      background: var(--success);
    }

    .value {
@ -93,10 +93,10 @@
    .bar.center {
      background: repeating-linear-gradient(
        60deg,
-        #105fb0 0,
-        #105fb0 8px,
-        #1a9436 8px,
-        #1a9436 16px
+        var(--primary) 0,
+        var(--primary) 8px,
+        var(--success) 8px,
+        var(--success) 16px
      )
    }
 	}
--- a/frontend/src/app/lightning/group/group.component.scss
+++ b/frontend/src/app/lightning/group/group.component.scss
@ -12,7 +12,7 @@ h1 {
 }

 .qr-wrapper {
-  background-color: #FFF;
+  background-color: var(--fg);
  padding: 10px;
  padding-bottom: 5px;
  display: inline-block;
--- a/frontend/src/app/lightning/node/node.component.scss
+++ b/frontend/src/app/lightning/node/node.component.scss
@ -14,7 +14,7 @@
 }

 .qr-wrapper {
-  background-color: #FFF;
+  background-color: var(--fg);
  padding: 10px;
  padding-bottom: 5px;
  display: inline-block;
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.html
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.html
@ -93,7 +93,7 @@
        <a href="https://mempool.chat" target="_blank"><svg fill="#fff" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Matrix</title><path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"/></svg></a>
      </div>
    </div>
-    <div class="row version" [style]="{'background-color': isServicesPage ? '#1d1f31' : ''}">
+    <div class="row version" [style]="{'background-color': isServicesPage ? 'var(--bg)' : ''}">
      <div class="col-sm-12">
        <p *ngIf="officialMempoolSpace">
          <span>{{ (backendInfo$ | async)?.hostname }} (v{{ (backendInfo$ | async )?.version }}) [<a target="_blank" href="https://github.com/mempool/mempool/commit/{{ (backendInfo$ | async )?.gitCommit | slice:0:8 }}">{{ (backendInfo$ | async )?.gitCommit | slice:0:8 }}</a>]</span>
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.scss
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.scss
@ -1,5 +1,5 @@
 footer {
-  background-color: #1d1f31;
+  background-color: var(--bg);
  margin-top: 30px;
  &.services {
    @media (min-width: 768px) {
@ -34,11 +34,11 @@ footer .row.main .branding > p {

 footer .row.main .branding .btn {
  display: inline-block;
-  color: #fff !important;
+  color: var(--fg) !important;
 }

 footer .row.main .branding button.account {
-  background-color: #2d3348;
+  background-color: var(--secondary);
 }

 footer .row.main .branding .cta {
@ -59,7 +59,7 @@ footer .row.main .links > div:first-child {
 }

 footer .links .category {
-  color: #4a68b9;
+  color: var(--title-fg);
  font-weight: 700;
 }

@ -114,7 +114,7 @@ footer .row.social-links svg {
 footer .row.version {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
-  background-color: #1d1f31;
+  background-color: var(--bg);
 }

 footer .row.version p {
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@ -76,6 +76,7 @@ $dropdown-link-active-bg: $active-bg;
  --box-bg: #24273e;
  --stat-box-bg: #181b2d;
  --alert-bg: #3a1c61;
+  --navbar-bg: #212121;
  --transparent-fg: #ffffff66;
  --fade-out-box-bg-start: rgba(36, 39, 62, 0);
  --fade-out-box-bg-end: rgba(36, 39, 62, 1);
--- a/frontend/src/theme-contrast.scss
+++ b/frontend/src/theme-contrast.scss
@ -75,6 +75,7 @@ $dropdown-link-active-bg: $active-bg;
  --box-bg: #171c2a;
  --stat-box-bg: #0b1018;
  --alert-bg: #3a1c61;
+  --navbar-bg: #212121;
  --transparent-fg: #ffffffbb;
  --fade-out-box-bg-start: rgba(23, 28, 42, 0);
  --fade-out-box-bg-end: rgba(23, 28, 42, 1);