add high contrast theme

2023-01-03 05:24:14 -06:00 · 2023-01-03 05:24:14 -06:00 · 79dd263fb1
commit 79dd263fb1
parent 1ca05a029a
54 changed files with 446 additions and 149 deletions
--- a/frontend/angular.json
+++ b/frontend/angular.json
@ -170,6 +170,11 @@
            ],
            "styles": [
              "src/styles.scss",
+              {
+                "input": "src/theme-contrast.scss",
+                "bundleName": "contrast",
+                "inject": false
+              },
              "node_modules/@fortawesome/fontawesome-svg-core/styles.css"
            ],
            "vendorChunk": true,
--- a/frontend/src/app/app.constants.ts
+++ b/frontend/src/app/app.constants.ts
@ -40,45 +40,45 @@ export const defaultMempoolFeeColors = [
 ];

 export const contrastMempoolFeeColors = [
-  '83fd00',
-  '83f609',
-  '83ef12',
-  '83e71a',
-  '83e023',
-  '83d92c',
-  '83d235',
-  '83cb3e',
-  '83c446',
-  '83bc4f',
-  '83b558',
-  '83ae61',
-  '83a76a',
-  '83a072',
-  '83997b',
-  '839184',
-  '838a8d',
-  '838395',
-  '837c9e',
-  '8375a7',
-  '836eb0',
-  '8366b9',
-  '835fc1',
-  '8358ca',
-  '8351d3',
-  '834adc',
-  '8343e5',
-  '833bed',
-  '8334f6',
-  '832dff',
-  '832dff',
-  '832dff',
-  '832dff',
-  '832dff',
-  '832dff',
-  '832dff',
-  '832dff',
-  '832dff',
-];
+  '0082e6',
+  '0984df',
+  '1285d9',
+  '1a87d2',
+  '2388cb',
+  '2c8ac5',
+  '358bbe',
+  '3e8db7',
+  '468eb0',
+  '4f90aa',
+  '5892a3',
+  '61939c',
+  '6a9596',
+  '72968f',
+  '7b9888',
+  '849982',
+  '8d9b7b',
+  '959c74',
+  '9e9e6e',
+  'a79f67',
+  'b0a160',
+  'b9a35a',
+  'c1a453',
+  'caa64c',
+  'd3a745',
+  'dca93f',
+  'e5aa38',
+  'edac31',
+  'f6ad2b',
+  'ffaf24',
+  'ffaf24',
+  'ffaf24',
+  'ffaf24',
+  'ffaf24',
+  'ffaf24',
+  'ffaf24',
+  'ffaf24',
+  'ffaf24',
+ ];

 export const chartColors = [
  "#D81B60",
--- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts
+++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts
@ -233,7 +233,7 @@ export class BlockFeeRatesGraphComponent implements OnInit {
        borderRadius: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
          align: 'left',
        },
        borderColor: '#000',
--- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts
+++ b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts
@ -151,7 +151,7 @@ export class BlockFeesGraphComponent implements OnInit {
        borderRadius: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
          align: 'left',
        },
        borderColor: '#000',
--- a/frontend/src/app/components/block-health-graph/block-health-graph.component.ts
+++ b/frontend/src/app/components/block-health-graph/block-health-graph.component.ts
@ -131,7 +131,7 @@ export class BlockHealthGraphComponent implements OnInit {
        borderRadius: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
          align: 'left',
        },
        borderColor: '#000',
--- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss
+++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss
@ -3,7 +3,7 @@
  background: rgba(#11131f, 0.95);
  border-radius: 4px;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
-  color: #b1b1b1;
+  color: var(--tooltip-grey);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
--- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts
+++ b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts
@ -150,7 +150,7 @@ export class BlockRewardsGraphComponent implements OnInit {
        borderRadius: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
          align: 'left',
        },
        borderColor: '#000',
--- a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts
+++ b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts
@ -146,7 +146,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit {
        borderRadius: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
          align: 'left',
        },
        borderColor: '#000',
--- a/frontend/src/app/components/block/block.component.scss
+++ b/frontend/src/app/components/block/block.component.scss
@ -175,9 +175,7 @@ h1 {
  }

  a {
-    color: #1ad8f4;
    &:hover, &:focus {
-      color: #09a3ba;
      display: inline-block;
    }
  }
--- a/frontend/src/app/components/difficulty/difficulty.component.scss
+++ b/frontend/src/app/components/difficulty/difficulty.component.scss
@ -96,7 +96,7 @@
 }

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

--- a/frontend/src/app/components/fees-box/fees-box.component.scss
+++ b/frontend/src/app/components/fees-box/fees-box.component.scss
@ -1,5 +1,5 @@
 .card-title {
-  color: #4a68b9;
+  color: var(--title-fg);
  font-size: 10px;
  margin-bottom: 4px;
  font-size: 1rem;
@ -79,6 +79,7 @@
  display: flex;
  flex-direction: row;
  transition: background-color 1s;
+  color: var(--color-fg);
  &.priority {
    @media (767px < width < 992px), (width < 576px) {
      width: 100%;
--- a/frontend/src/app/components/fees-box/fees-box.component.ts
+++ b/frontend/src/app/components/fees-box/fees-box.component.ts
@ -1,6 +1,6 @@
-import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy, OnDestroy, ChangeDetectorRef } from '@angular/core';
 import { StateService } from '../../services/state.service';
-import { Observable, combineLatest } from 'rxjs';
+import { Observable, combineLatest, Subscription } from 'rxjs';
 import { Recommendedfees } from '../../interfaces/websocket.interface';
 import { feeLevels } from '../../app.constants';
 import { map, startWith, tap } from 'rxjs/operators';
@ -12,15 +12,18 @@ import { ThemeService } from 'src/app/services/theme.service';
  styleUrls: ['./fees-box.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FeesBoxComponent implements OnInit {
+export class FeesBoxComponent implements OnInit, OnDestroy {
  isLoading$: Observable<boolean>;
  recommendedFees$: Observable<Recommendedfees>;
+  themeSubscription: Subscription;
  gradient = 'linear-gradient(to right, #2e324e, #2e324e)';
  noPriority = '#2e324e';
+  fees: Recommendedfees;

  constructor(
    private stateService: StateService,
    private themeService: ThemeService,
+    private cd: ChangeDetectorRef,
  ) { }

  ngOnInit(): void {
@ -33,18 +36,32 @@ export class FeesBoxComponent implements OnInit {
    this.recommendedFees$ = this.stateService.recommendedFees$
      .pipe(
        tap((fees) => {
-          let feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => fees.minimumFee >= feeLvl);
-          feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex;
-          const startColor = '#' + (this.themeService.mempoolFeeColors[feeLevelIndex - 1] || this.themeService.mempoolFeeColors[this.themeService.mempoolFeeColors.length - 1]);
-
-          feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => fees.fastestFee >= feeLvl);
-          feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex;
-          const endColor = '#' + (this.themeService.mempoolFeeColors[feeLevelIndex - 1] || this.themeService.mempoolFeeColors[this.themeService.mempoolFeeColors.length - 1]);
-
-          this.gradient = `linear-gradient(to right, ${startColor}, ${endColor})`;
-          this.noPriority = startColor;
+          this.fees = fees;
+          this.setFeeGradient();
        }
      )
    );
+    this.themeSubscription = this.themeService.themeChanged$.subscribe(() => {
+      this.setFeeGradient();
+    })
+  }
+
+  setFeeGradient() {
+    let feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => this.fees.minimumFee >= feeLvl);
+    feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex;
+    const startColor = '#' + (this.themeService.mempoolFeeColors[feeLevelIndex - 1] || this.themeService.mempoolFeeColors[this.themeService.mempoolFeeColors.length - 1]);
+
+    feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => this.fees.fastestFee >= feeLvl);
+    feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex;
+    const endColor = '#' + (this.themeService.mempoolFeeColors[feeLevelIndex - 1] || this.themeService.mempoolFeeColors[this.themeService.mempoolFeeColors.length - 1]);
+
+    this.gradient = `linear-gradient(to right, ${startColor}, ${endColor})`;
+    this.noPriority = startColor;
+
+    this.cd.markForCheck();
+  }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
  }
 }
--- a/frontend/src/app/components/footer/footer.component.scss
+++ b/frontend/src/app/components/footer/footer.component.scss
@ -40,16 +40,8 @@
  }
 }

-.txPerSecond {
-  color: #4a9ff4;
-}
-
 .mempoolSize {
-  color: #4a68b9;
-}
-
-.unconfirmedTx {
-  color: #f14d80;
+  color: var(--title-fg);
 }

 .info-block {
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
@ -94,7 +94,7 @@
    }
    .card-title {
      font-size: 1rem;
-      color: #4a68b9;
+      color: var(--title-fg);
    }
    .card-text {
      font-size: 18px;
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
@ -242,7 +242,7 @@ export class HashrateChartComponent implements OnInit {
        borderRadius: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
          align: 'left',
        },
        borderColor: '#000',
--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
+++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
@ -225,7 +225,7 @@ export class HashrateChartPoolsComponent implements OnInit {
        borderRadius: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
          align: 'left',
        },
        borderColor: '#000',
--- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss
+++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss
@ -47,7 +47,7 @@ li.nav-item {
 }

 .navbar-nav {
-  background: #212121;
+  background: var(--navbar-bg);
  bottom: 0;
  box-shadow: 0px 0px 15px 0px #000;
  flex-direction: row;
--- a/frontend/src/app/components/master-page/master-page.component.scss
+++ b/frontend/src/app/components/master-page/master-page.component.scss
@ -58,7 +58,7 @@ li.nav-item {
 }

 .navbar-nav {
-  background: #212121;
+  background: var(--navbar-bg);
  bottom: 0;
  box-shadow: 0px 0px 15px 0px #000;
  flex-direction: row;
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
@ -55,7 +55,7 @@
          <a class="title-link" href="" [routerLink]="['/blocks' | relativeUrl]">
            <h5 class="card-title d-inline" i18n="dashboard.recent-blocks">Recent Blocks</h5>
            <span>&nbsp;</span>
-            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
+            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
          </a>
          <app-blocks-list [attr.data-cy]="'latest-blocks'" [widget]=true></app-blocks-list>
        </div>
@ -69,7 +69,7 @@
          <a class="title-link" href="" [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]">
            <h5 class="card-title d-inline" i18n="dashboard.adjustments">Adjustments</h5>
            <span>&nbsp;</span>
-            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
+            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
          </a>
          <app-difficulty-adjustments-table [attr.data-cy]="'difficulty-adjustments-table'"></app-difficulty-adjustments-table>
        </div>
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
@ -32,10 +32,10 @@

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

 .card-body.pool-ranking {
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
@ -99,7 +99,7 @@
    }
    .card-title {
      font-size: 1rem;
-      color: #4a68b9;
+      color: var(--title-fg);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
@ -146,7 +146,7 @@ export class PoolRankingComponent implements OnInit {
        name: pool.name + ((isMobile() || this.widget) ? `` : ` (${pool.share}%)`),
        label: {
          overflow: 'none',
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
          alignTo: 'edge',
          edgeDistance: edgeDistance,
        },
@ -156,7 +156,7 @@ export class PoolRankingComponent implements OnInit {
          borderRadius: 4,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          textStyle: {
-            color: '#b1b1b1',
+            color: 'var(--tooltip-grey)',
          },
          borderColor: '#000',
          formatter: () => {
@ -184,7 +184,7 @@ export class PoolRankingComponent implements OnInit {
      name: 'Other' + (isMobile() ? `` : ` (${totalShareOther.toFixed(2)}%)`),
      label: {
        overflow: 'none',
-        color: '#b1b1b1',
+        color: 'var(--tooltip-grey)',
        alignTo: 'edge',
        edgeDistance: edgeDistance
      },
@ -193,7 +193,7 @@ export class PoolRankingComponent implements OnInit {
        borderRadius: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
        },
        borderColor: '#000',
        formatter: () => {
--- a/frontend/src/app/components/pool/pool.component.scss
+++ b/frontend/src/app/components/pool/pool.component.scss
@ -190,7 +190,7 @@ div.scrollable {
 }

 .data-title {
-  color: #4a68b9;
+  color: var(--title-fg);
  font-size: 14px;
 }

--- a/frontend/src/app/components/pool/pool.component.ts
+++ b/frontend/src/app/components/pool/pool.component.ts
@ -175,7 +175,7 @@ export class PoolComponent implements OnInit {
        borderRadius: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
          align: 'left',
        },
        borderColor: '#000',
--- a/frontend/src/app/components/reward-stats/reward-stats.component.scss
+++ b/frontend/src/app/components/reward-stats/reward-stats.component.scss
@ -1,5 +1,5 @@
 .card-title {
-  color: #4a68b9;
+  color: var(--title-fg);
  font-size: 10px;
  margin-bottom: 4px;  
  font-size: 1rem;
--- a/frontend/src/app/components/search-form/search-results/search-results.component.scss
+++ b/frontend/src/app/components/search-form/search-results/search-results.component.scss
@ -1,5 +1,5 @@
 .card-title {
-  color: #4a68b9;
+  color: var(--title-fg);
  font-size: 10px;
  margin-bottom: 4px;
  font-size: 1rem;
--- a/frontend/src/app/components/transactions-list/transactions-list.component.scss
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.scss
@ -13,15 +13,15 @@
 	}
 }
 .green {
-  color:#28a745;
+  color: var(--green);
 }

 .red {
-  color:var(--red);
+  color: var(--red);
 }

 .grey {
-  color:#6c757d;
+  color: var(--grey);
 }

 .mobile-bottomcol {
@ -159,7 +159,7 @@ h2 {
 }

 .grey-info-text {
-	color:#6c757d;
+	color: var(--grey);
 	font-style: italic;
 	font-size: 12px;
 }
--- a/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.scss
+++ b/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.scss
@ -3,7 +3,7 @@
  background: rgba(#11131f, 0.95);
  border-radius: 4px;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
-  color: #b1b1b1;
+  color: var(--tooltip-grey);
  padding: 10px 15px;
  text-align: left;
  pointer-events: none;
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@ -63,7 +63,7 @@
          <a class="title-link" href="" [routerLink]="['/rbf' | relativeUrl]">
            <h5 class="card-title d-inline" i18n="dashboard.recent-rbf-replacements">Recent Replacements</h5>
            <span>&nbsp;</span>
-            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
+            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
          </a>
          <table class="table lastest-replacements-table">
            <thead>
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@ -12,7 +12,7 @@
 }

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

--- a/frontend/src/app/docs/api-docs/api-docs-nav.component.scss
+++ b/frontend/src/app/docs/api-docs/api-docs-nav.component.scss
@ -1,5 +1,5 @@
 p {
-  color: #4a68b9;
+  color: var(--title-fg);
  font-weight: 700;
  margin: 10px 0;
  margin: 15px 0 10px 0;
--- a/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss
+++ b/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss
@ -1,5 +1,5 @@
 .card-title {
-  color: #4a68b9;
+  color: var(--title-fg);
  font-size: 10px;
  margin-bottom: 4px;  
  font-size: 1rem;      
--- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html
+++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html
@ -65,7 +65,7 @@
          <a class="title-link" href="" [routerLink]="['/lightning/nodes/rankings/liquidity' | relativeUrl]">
            <h5 class="card-title d-inline" i18n="lightning.liquidity-ranking">Liquidity Ranking</h5>
            <span>&nbsp;</span>
-            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
+            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
          </a>
          <app-top-nodes-per-capacity [nodes$]="nodesRanking$" [statistics$]="statistics$" [widget]="true"></app-top-nodes-per-capacity>
        </div>
@ -79,7 +79,7 @@
          <a class="title-link" href="" [routerLink]="['/lightning/nodes/rankings/connectivity' | relativeUrl]">
            <h5 class="card-title d-inline" i18n="lightning.connectivity-ranking">Connectivity Ranking</h5>
            <span>&nbsp;</span>
-            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
+            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
          </a>
          <app-top-nodes-per-channels [nodes$]="nodesRanking$" [statistics$]="statistics$" [widget]="true"></app-top-nodes-per-channels>
        </div>
--- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
+++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
@ -35,10 +35,10 @@

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

 .card-body.pool-ranking {
--- a/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts
+++ b/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts
@ -142,7 +142,7 @@ export class NodeFeeChartComponent implements OnInit {
        borderRadius: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
          align: 'left',
        },
        borderColor: '#000',
--- a/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts
+++ b/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts
@ -112,7 +112,7 @@ export class NodeStatisticsChartComponent implements OnInit {
        borderRadius: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
          align: 'left',
        },
        borderColor: '#000',
--- a/frontend/src/app/lightning/node-statistics/node-statistics.component.scss
+++ b/frontend/src/app/lightning/node-statistics/node-statistics.component.scss
@ -1,5 +1,5 @@
 .card-title {
-  color: #4a68b9;
+  color: var(--title-fg);
  font-size: 10px;
  margin-bottom: 4px;  
  font-size: 1rem;
--- a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts
+++ b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts
@ -296,7 +296,7 @@ export class NodesChannelsMap implements OnInit {
            borderRadius: 4,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            textStyle: {
-              color: '#b1b1b1',
+              color: 'var(--tooltip-grey)',
              align: 'left',
            },
            borderColor: '#000',
--- a/frontend/src/app/lightning/nodes-channels/node-channels.component.ts
+++ b/frontend/src/app/lightning/nodes-channels/node-channels.component.ts
@ -96,7 +96,7 @@ export class NodeChannels implements OnChanges {
            borderRadius: 4,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            textStyle: {
-              color: '#b1b1b1',
+              color: 'var(--tooltip-grey)',
            },
            borderColor: '#000',
            formatter: (value): string => {
--- a/frontend/src/app/lightning/nodes-map/nodes-map.component.ts
+++ b/frontend/src/app/lightning/nodes-map/nodes-map.component.ts
@ -196,7 +196,7 @@ export class NodesMap implements OnInit, OnChanges {
            borderRadius: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            textStyle: {
-              color: '#b1b1b1',
+              color: 'var(--tooltip-grey)',
              align: 'left',
            },
            borderColor: '#000',
--- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
+++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
@ -93,7 +93,7 @@
    }
    .card-title {
      font-size: 1rem;
-      color: #4a68b9;
+      color: var(--title-fg);
    }
    .card-text {
      font-size: 18px;
--- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts
+++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts
@ -255,7 +255,7 @@ export class NodesNetworksChartComponent implements OnInit, OnChanges {
        borderRadius: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
          align: 'left',
        },
        borderColor: '#000',
--- a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts
+++ b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts
@ -85,7 +85,7 @@ export class NodesPerCountryChartComponent implements OnInit {
        name: country.name.en + (this.isMobile() ? `` : ` (${country.share}%)`),
        label: {
          overflow: 'truncate',
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
          alignTo: 'edge',
          edgeDistance: edgeDistance,
        },
@ -95,7 +95,7 @@ export class NodesPerCountryChartComponent implements OnInit {
          borderRadius: 4,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          textStyle: {
-            color: '#b1b1b1',
+            color: 'var(--tooltip-grey)',
          },
          borderColor: '#000',
          formatter: () => {
@ -119,7 +119,7 @@ export class NodesPerCountryChartComponent implements OnInit {
      name: $localize`Other (${totalShareOther.toFixed(2) + '%'})`,
      label: {
        overflow: 'truncate',
-        color: '#b1b1b1',
+        color: 'var(--tooltip-grey)',
        alignTo: 'edge',
        edgeDistance: edgeDistance
      },
@ -128,7 +128,7 @@ export class NodesPerCountryChartComponent implements OnInit {
        borderRadius: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
        },
        borderColor: '#000',
        formatter: () => {
--- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss
+++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss
@ -89,7 +89,7 @@
    }
    .card-title {
      font-size: 1rem;
-      color: #4a68b9;
+      color: var(--title-fg);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
--- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts
+++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts
@ -144,7 +144,7 @@ export class NodesPerISPChartComponent implements OnInit {
        label: {
          overflow: 'truncate',
          width: isMobile() ? 75 : this.widget ? 125 : 250,
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
          alignTo: 'edge',
          edgeDistance: edgeDistance,
        },
@ -154,7 +154,7 @@ export class NodesPerISPChartComponent implements OnInit {
          borderRadius: 4,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          textStyle: {
-            color: '#b1b1b1',
+            color: 'var(--tooltip-grey)',
          },
          borderColor: '#000',
          formatter: () => {
@ -178,7 +178,7 @@ export class NodesPerISPChartComponent implements OnInit {
      name: $localize`Other (${totalShareOther.toFixed(2) + '%'})`,
      label: {
        overflow: 'truncate',
-        color: '#b1b1b1',
+        color: 'var(--tooltip-grey)',
        alignTo: 'edge',
        edgeDistance: edgeDistance
      },
@ -187,7 +187,7 @@ export class NodesPerISPChartComponent implements OnInit {
        borderRadius: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
        },
        borderColor: '#000',
        formatter: () => {
--- a/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.html
+++ b/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.html
@ -8,7 +8,7 @@
            <h5 class="card-title d-inline" i18n="lightning.liquidity-ranking">Liquidity Ranking</h5>
            <span>&nbsp;</span>
            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true"
-              style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
+              style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
          </a>
          <app-top-nodes-per-capacity [nodes$]="nodesRanking$" [widget]="true"></app-top-nodes-per-capacity>
        </div>
@ -22,7 +22,7 @@
            <h5 class="card-title d-inline" i18n="lightning.connectivity-ranking">Connectivity Ranking</h5>
            <span>&nbsp;</span>
            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true"
-              style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
+              style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
          </a>
          <app-top-nodes-per-channels [nodes$]="nodesRanking$" [widget]="true"></app-top-nodes-per-channels>
        </div>
@ -36,7 +36,7 @@
            <h5 class="card-title d-inline" i18n="lightning.top-channels-age">Oldest nodes</h5>
            <span>&nbsp;</span>
            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true"
-              style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
+              style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
          </a>
          <app-oldest-nodes [widget]="true"></app-oldest-nodes>
        </div>
--- a/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.scss
+++ b/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.scss
@ -14,10 +14,10 @@

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

 .card-text {
--- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
+++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
@ -93,7 +93,7 @@
    }
    .card-title {
      font-size: 1rem;
-      color: #4a68b9;
+      color: var(--title-fg);
    }
    .card-text {
      font-size: 18px;
--- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts
+++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts
@ -164,7 +164,7 @@ export class LightningStatisticsChartComponent implements OnInit, OnChanges {
        borderRadius: 4,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        textStyle: {
-          color: '#b1b1b1',
+          color: 'var(--tooltip-grey)',
          align: 'left',
        },
        borderColor: '#000',
--- a/frontend/src/app/services/theme.service.ts
+++ b/frontend/src/app/services/theme.service.ts
@ -46,13 +46,17 @@ export class ThemeService {
        this.mempoolFeeColors = contrastMempoolFeeColors;
        this.auditColors = contrastAuditColors;
      }
-      if (!this.style) {
-        this.style = document.createElement('link');
-        this.style.rel = 'stylesheet';
-        this.style.href = `theme-${theme}.css`;
-        document.head.appendChild(this.style);
-      } else {
-        this.style.href = `theme-${theme}.css`;
+      try {
+        if (!this.style) {
+          this.style = document.createElement('link');
+          this.style.rel = 'stylesheet';
+          this.style.href = `${theme}.css`;
+          document.head.appendChild(this.style);
+        } else {
+          this.style.href = `${theme}.css`;
+        }
+      } catch (err) {
+        console.log('failed to apply theme stylesheet: ', err);
      }
    } else {
      this.mempoolFeeColors = defaultMempoolFeeColors;
--- a/frontend/src/index.liquid.html
+++ b/frontend/src/index.liquid.html
@ -33,7 +33,7 @@
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="msapplication-TileColor" content="#000000">
  <meta name="msapplication-config" content="/resources/liquid/favicons/browserconfig.xml">
-  <meta name="theme-color" content="var(--bg)">
+  <meta name="theme-color" content="#1d1f31">

  <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
--- a/frontend/src/index.mempool.html
+++ b/frontend/src/index.mempool.html
@ -32,7 +32,7 @@
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="msapplication-TileColor" content="#000000">
  <meta name="msapplication-config" content="/resources/favicons/browserconfig.xml">
-  <meta name="theme-color" content="var(--bg)">
+  <meta name="theme-color" content="#1d1f31">

  <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@ -3,13 +3,13 @@ $bg: #1d1f31;
 $active-bg: #11131f;
 $hover-bg: #12131e;
 $fg: #fff;
+$title-fg: #4a68b9;

 $taproot: #eba814;
 $taproot-light: #d5a90a;
 $taproot-dark: #9d7c05;

 /* Bootstrap */
-
 $body-bg: $bg;
 $body-color: $fg;
 $gray-800: $bg;
@ -64,6 +64,8 @@ $dropdown-link-active-bg: $active-bg;
  --active-bg: #{$active-bg};
  --hover-bg: #{$hover-bg};
  --fg: #{$fg};
+  --color-fg: #ffffff;
+  --title-fg: #{$title-fg};

  --primary: #{$primary};
  --secondary: #{$secondary};
@ -93,6 +95,8 @@ $dropdown-link-active-bg: $active-bg;
  --green: #3bcc49;
  --red: #dc3545;
  --yellow: #ffd800;
+  --grey: #6c757d;
+  --tooltip-grey: #b1b1b1;
 }

 html, body {
@ -384,7 +388,7 @@ html:lang(ru) .card-title {
  background: rgba($active-bg, 0.95);
  border-radius: 4px;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
-  color: #b1b1b1;
+  color: var(--tooltip-grey);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
@ -394,7 +398,7 @@ html:lang(ru) .card-title {
  thead {
    th {
      font-size: 9px;
-      color: #b1b1b1;
+      color: var(--tooltip-grey);
      text-align: right;
      &:first-child {
        text-align: left;
@ -485,7 +489,7 @@ html:lang(ru) .card-title {
  thead {
    th {
      font-size: 9px;
-      color: #b1b1b1;
+      color: var(--tooltip-grey);
      text-align: right;
      &:first-child {
        text-align: left;
--- a/frontend/src/theme-contrast.scss
+++ b/frontend/src/theme-contrast.scss
@ -1,8 +1,13 @@
 /* Theme */
-$bg: #ff1f31;
-$active-bg: #ff131f;
-$hover-bg: #ff131e;
-$fg: #ff0;
+$bg: #11131f;
+$active-bg: #000000;
+$hover-bg: #12131e;
+$fg: #fff;
+$title-fg: #2055e3;
+
+$taproot: #eba814;
+$taproot-light: #d5a90a;
+$taproot-dark: #9d7c05;

 /* Bootstrap */

@ -13,11 +18,11 @@ $gray-700: $fg;

 $nav-tabs-link-active-bg: $active-bg;

-$primary: #105fb0;
-$secondary: #2d3348;
-$tertiary: #653b9c;
-$success: #1a9436;
-$info: #1bd8f4;
+$primary: #007cfa;
+$secondary: #272f4e;
+$tertiary: #6225b2;
+$success: #0aab2f;
+$info: #10e0ff;

 $h5-font-size: 1.15rem !default;

@ -59,6 +64,8 @@ $dropdown-link-active-bg: $active-bg;
  --active-bg: #{$active-bg};
  --hover-bg: #{$hover-bg};
  --fg: #{$fg};
+  --color-fg: #fff;
+  --title-fg: #{$title-fg};

  --primary: #{$primary};
  --secondary: #{$secondary};
@ -66,5 +73,274 @@ $dropdown-link-active-bg: $active-bg;
  --success: #{$success};
  --info: #{$info};

-  --box-bg: var(--box-bg);
+  --transparent-fg: #ffffffbb;
+
+  --box-bg: #171c2a;
+  --stat-box-bg: #0b1018;
+  --green: #83fd00;
+}
+
+body {
+  background-color: var(--active-bg);
+}
+
+.box {
+  background-color: var(--box-bg);
+  border: 1px solid rgba(0,0,0,.125);
+  box-shadow: 0.125rem 0.125rem 0.25rem rgba(0,0,0,0.075);
+}
+
+.navbar-nav.liquid > .active {
+  background-color: var(--liquid) !important;
+}
+
+.navbar-nav.testnet > .active {
+  background-color: var(--testnet) !important;
+}
+
+.navbar-nav.signet > .active {
+  background-color: var(--signet) !important;
+}
+
+.navbar-nav.liquidtestnet > .active {
+  background-color: var(--liquidtestnet) !important;
+}
+
+.form-control {
+  color: #495057;
+}
+.form-control:focus {
+  color: #000;
+}
+
+.form-control.form-control-secondary {
+  color: var(--fg);
+  background-color: var(--secondary);
+  border: 1px solid var(--secondary);
+}
+.form-control.form-control-secondary:focus {
+  color: var(--fg);
+}
+
+.skeleton-loader {
+  background: #2e324e no-repeat;
+  background-image: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0),
+    #5d6182,
+    rgba(255, 255, 255, 0)
+  );
+}
+
+.symbol {
+	color: var(--transparent-fg);
+}
+
+.progress-text {
+  span {
+    color: var(--fg) !important;
+  }
+}
+
+.block-size, .blocks-container {
+  span {
+    color: var(--fg) !important;
+  }
+}
+
+.title-block {
+  color: var(--fg);
+  border-top: 3px solid var(--fg);
+}
+
+.title-address, .title-asset {
+  color: var(--fg);
+}
+
+.close {
+  color: var(--fg);
+}
+
+.close:hover {
+  color: var(--fg);
+}
+
+.green-color {
+  color: var(--green);
+}
+
+.red-color {
+  color: var(--red);
+}
+
+.yellow-color {
+  color: var(--yellow);
+}
+
+.table-striped tbody tr:nth-of-type(odd) {
+  background-color: var(--stat-box-bg);
+}
+
+.bordertop {
+  border-top: 1px solid #4c4c4c;
+}
+
+.tx-wrapper-tooltip-chart,
+.fees-wrapper-tooltip-chart {
+  background: rgba($active-bg, 0.95);
+  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
+  color: var(--tooltip-grey);
+  thead {
+    th {
+      color: var(--tooltip-grey);
+    }
+  }
+  .title {
+    color: var(--fg);
+  }
+  .active {
+    color: yellow !important;
+    .value,
+    .total-partial {
+      color: yellow !important;
+      .symbol {
+        color: yellow !important;
+      }
+    }
+  }
+  .item {
+    .value {
+      .symbol {
+        color: #7e7e7e;
+      }
+    }
+  }
+  .total-label {
+    color: var(--fg);
+  }
+  thead {
+    th {
+      color: var(--tooltip-grey);
+    }
+  }
+  .total-percentage-bar {
+    span {
+      background: #282d47;
+    }
+  }
+}
+
+
+.fees-wrapper-tooltip-chart-advanced,
+.tx-wrapper-tooltip-chart-advanced {
+  background: rgba($bg, 0.98);
+  thead {
+    .total-progress-percentage-bar,
+    .total-progress-sum-bar {
+      div {
+        background: #29324c94;
+      }
+    }
+  }
+  .total-percentage-bar-background {
+    background-color: #282d47;
+  }
+}
+
+hr {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.progress-mempool {
+  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, var(--mainnet-alt) 100%);
+}
+
+.progress-mempool.testnet {
+  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--testnet) 0%, var(--testnet-alt) 100%);
+}
+
+.progress-mempool.signet {
+  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--signet) 0%, var(--signet-alt) 100%);
+}
+
+.progress-mempool.liquid {
+  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--liquid) 0%, var(--testnet-alt) 100%);
+}
+
+.progress-dark {
+  background-color: var(--stat-box-bg);
+}
+
+.progress-darklight {
+  background-color: var(--box-bg);
+}
+
+.progress-light {
+  background-color: #2e324e;
+}
+
+.progress.progress-health {
+  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, $success 100%);
+}
+
+.progress-bar.progress-bar-health {
+  background: var(--secondary);
+}
+
+.alert-mempool {
+  color: var(--fg);
+  background-color: var(--tertiary);
+  border-color: var(--alert-bg);
+}
+
+// ASM opcode colors
+
+.constants { color: #ff8c00 }
+.control { color: #87ceeb }
+.stack { color: #ffa500 }
+.splice { color: #46b5e2 }
+.logic { color: #46b5e2 }
+.arithmetic { color: #cae8d0 }
+.crypto { color: #fa3d3d }
+.locktime { color: #ff8c00 }
+.reserved { color: #ff8c00 }
+
+.tab-pane {
+  .card {
+    button {
+      color: var(--fg);
+    }
+
+    .collapsed {
+      background-color: var(--secondary);
+      color: var(--info);
+    }
+  }
+}
+
+
+.pagination-container {
+  background: var(--bg);
+}
+
+
+// Blinking block
+@keyframes shadowyBackground {
+  0% {
+    box-shadow: -10px -15px 75px rgba($taproot, 1);
+  }
+  50% {
+    box-shadow: -10px -15px 75px rgba($taproot, .3);
+  }
+  100% {
+    box-shadow: -10px -15px 75px rgba($taproot, 1);
+  }
+}
+
+.blink-bg {
+  color: var(--fg);
+  background: repeating-linear-gradient($taproot-dark, $taproot-dark 0.163525%, $taproot-light 100%) !important;
+  animation: shadowyBackground 1s infinite;
+  box-shadow: -10px -15px 75px rgba($taproot, 1);
+  transition: 100ms all ease-in;
 }