diff --git a/frontend/angular.json b/frontend/angular.json index f55c59ae9..f631cce4d 100644 --- 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, diff --git a/frontend/src/app/app.constants.ts b/frontend/src/app/app.constants.ts index 17105d97e..bd81d02c0 100644 --- a/frontend/src/app/app.constants.ts +++ b/frontend/src/app/app.constants.ts @@ -1,4 +1,4 @@ -export const mempoolFeeColors = [ +export const defaultMempoolFeeColors = [ '557d00', '5d7d01', '637d02', @@ -39,6 +39,47 @@ export const mempoolFeeColors = [ 'ae005b', ]; +export const contrastMempoolFeeColors = [ + '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', + 'ffb01e', + 'ffb118', + 'ffb212', + 'ffb30c', + 'ffb406', + 'ffb500', + 'ffb600', + 'ffb700', + ]; + export const chartColors = [ "#D81B60", "#8E24AA", diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index e3f585a25..65d484520 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -19,6 +19,7 @@ import { SharedModule } from './shared/shared.module'; import { StorageService } from './services/storage.service'; import { HttpCacheInterceptor } from './services/http-cache.interceptor'; import { LanguageService } from './services/language.service'; +import { ThemeService } from './services/theme.service'; import { FiatShortenerPipe } from './shared/pipes/fiat-shortener.pipe'; import { FiatCurrencyPipe } from './shared/pipes/fiat-currency.pipe'; import { ShortenStringPipe } from './shared/pipes/shorten-string-pipe/shorten-string.pipe'; @@ -38,6 +39,7 @@ const providers = [ StorageService, EnterpriseService, LanguageService, + ThemeService, ShortenStringPipe, FiatShortenerPipe, FiatCurrencyPipe, diff --git a/frontend/src/app/components/about/about-sponsors.component.scss b/frontend/src/app/components/about/about-sponsors.component.scss index 7c01bb9a3..0ee27d1f5 100644 --- 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; diff --git a/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss b/frontend/src/app/components/accelerate-preview/accelerate-fee-graph.component.scss index 8d36387f3..88d9f75ed 100644 --- 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 { diff --git a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html index 65fea39a3..d303858a5 100644 --- a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html +++ b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html @@ -216,10 +216,10 @@ - Maximum acceleration cost + Maximum acceleration cost - + {{ maxCost | number }} diff --git a/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss b/frontend/src/app/components/accelerate-preview/accelerate-preview.component.scss index cb4b5922e..1f73ea9b2 100644 --- 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; } diff --git 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 index 11b468a24..96273dead 100644 --- 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 { diff --git a/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.scss b/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.scss index fcc5564a8..e685d98af 100644 --- 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; diff --git a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss index 85e655b25..d4579bcf6 100644 --- 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; diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html index 3488e1075..39abfa461 100644 --- 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 @@
Mempool Goggles™ : Accelerations
  - +
@@ -85,7 +85,7 @@
Recent Accelerations
  - +
diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss index c8755c94e..e14f53dfb 100644 --- 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 { diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts index 4ba401c37..acaff9170 100644 --- 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,13 +8,15 @@ 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, mempoolFeeColors } from '../../../app.constants'; +import { feeLevels, defaultMempoolFeeColors, contrastMempoolFeeColors } from '../../../app.constants'; import { ServicesApiServices } from '../../../services/services-api.service'; import { detectWebGL } from '../../../shared/graphs.utils'; import { AudioService } from '../../../services/audio.service'; +import { ThemeService } from '../../../services/theme.service'; const acceleratedColor: Color = hexToColor('8F5FF6'); -const normalColors = mempoolFeeColors.map(hex => hexToColor(hex.slice(0,6) + '5F')); +const normalColors = defaultMempoolFeeColors.map(hex => hexToColor(hex + '5F')); +const contrastColors = contrastMempoolFeeColors.map(hex => hexToColor(hex.slice(0,6) + '5F')); interface AccelerationBlock extends BlockExtended { accelerationCount: number, @@ -37,6 +39,7 @@ export class AcceleratorDashboardComponent implements OnInit { firstLoad = true; graphHeight: number = 300; + theme: ThemeService; constructor( private seoService: SeoService, @@ -141,7 +144,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[mempoolFeeColors.length - 1]; + return this.theme.theme === 'contrast' ? contrastColors[feeLevelIndex] || contrastColors[contrastColors.length - 1] : normalColors[feeLevelIndex] || normalColors[normalColors.length - 1]; } } diff --git a/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.scss b/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.scss index fcc5564a8..e685d98af 100644 --- 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; diff --git a/frontend/src/app/components/address/address-preview.component.scss b/frontend/src/app/components/address/address-preview.component.scss index 21e7faab5..623d72db2 100644 --- 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; diff --git a/frontend/src/app/components/address/address.component.scss b/frontend/src/app/components/address/address.component.scss index fe0729b94..7107c73f2 100644 --- 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; diff --git a/frontend/src/app/components/amount/amount.component.scss b/frontend/src/app/components/amount/amount.component.scss index b26429dcc..87f2fe6cd 100644 --- a/frontend/src/app/components/amount/amount.component.scss +++ b/frontend/src/app/components/amount/amount.component.scss @@ -1,3 +1,3 @@ .green-color { - color: #3bcc49; + color: var(--green); } \ No newline at end of file diff --git a/frontend/src/app/components/asset/asset.component.scss b/frontend/src/app/components/asset/asset.component.scss index 45e68042d..6f8bc0915 100644 --- 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; diff --git a/frontend/src/app/components/assets/asset-group/asset-group.component.scss b/frontend/src/app/components/assets/asset-group/asset-group.component.scss index c0b31f273..d434c16ef 100644 --- a/frontend/src/app/components/assets/asset-group/asset-group.component.scss +++ b/frontend/src/app/components/assets/asset-group/asset-group.component.scss @@ -19,7 +19,7 @@ } .card { - background-color: #1d1f31; + background-color: var(--bg); width: 200px; height: 200px; align-items: center; diff --git a/frontend/src/app/components/assets/assets-featured/assets-featured.component.scss b/frontend/src/app/components/assets/assets-featured/assets-featured.component.scss index 32c560af4..c80c3689d 100644 --- a/frontend/src/app/components/assets/assets-featured/assets-featured.component.scss +++ b/frontend/src/app/components/assets/assets-featured/assets-featured.component.scss @@ -7,7 +7,7 @@ } .card { - background-color: #1d1f31; + background-color: var(--bg); width: 200px; height: 200px; align-items: center; diff --git a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss index 21dd458b5..d38bb4843 100644 --- 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; diff --git a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts index 0abc55aa7..ba3489e17 100644 --- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts +++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts @@ -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', @@ -309,7 +309,7 @@ export class BlockFeeRatesGraphComponent implements OnInit { splitLine: { lineStyle: { type: 'dotted', - color: '#ffffff66', + color: 'var(--transparent-fg)', opacity: 0.25, } }, @@ -376,7 +376,7 @@ export class BlockFeeRatesGraphComponent implements OnInit { const now = new Date(); // @ts-ignore this.chartOptions.grid.bottom = 40; - this.chartOptions.backgroundColor = '#11131f'; + this.chartOptions.backgroundColor = 'var(--active-bg)'; this.chartInstance.setOption(this.chartOptions); download(this.chartInstance.getDataURL({ pixelRatio: 2, diff --git a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts index 895a6f33f..eb567c2a6 100644 --- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts +++ b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts @@ -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', @@ -214,7 +214,7 @@ export class BlockFeesGraphComponent implements OnInit { splitLine: { lineStyle: { type: 'dotted', - color: '#ffffff66', + color: 'var(--transparent-fg)', opacity: 0.25, } }, @@ -305,7 +305,7 @@ export class BlockFeesGraphComponent implements OnInit { const now = new Date(); // @ts-ignore this.chartOptions.grid.bottom = 40; - this.chartOptions.backgroundColor = '#11131f'; + this.chartOptions.backgroundColor = 'var(--active-bg)'; this.chartInstance.setOption(this.chartOptions); download(this.chartInstance.getDataURL({ pixelRatio: 2, diff --git a/frontend/src/app/components/block-filters/block-filters.component.scss b/frontend/src/app/components/block-filters/block-filters.component.scss index b1c4bce17..e6da842c0 100644 --- a/frontend/src/app/components/block-filters/block-filters.component.scss +++ b/frontend/src/app/components/block-filters/block-filters.component.scss @@ -71,7 +71,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; @@ -80,15 +80,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); } } } @@ -114,15 +114,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); } } &.yellow { diff --git a/frontend/src/app/components/block-health-graph/block-health-graph.component.ts b/frontend/src/app/components/block-health-graph/block-health-graph.component.ts index 8eef20d51..e48d5c091 100644 --- a/frontend/src/app/components/block-health-graph/block-health-graph.component.ts +++ b/frontend/src/app/components/block-health-graph/block-health-graph.component.ts @@ -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', @@ -178,7 +178,7 @@ export class BlockHealthGraphComponent implements OnInit { splitLine: { lineStyle: { type: 'dotted', - color: '#ffffff66', + color: 'var(--transparent-fg)', opacity: 0.25, } }, @@ -290,7 +290,7 @@ export class BlockHealthGraphComponent implements OnInit { const now = new Date(); // @ts-ignore this.chartOptions.grid.bottom = 40; - this.chartOptions.backgroundColor = '#11131f'; + this.chartOptions.backgroundColor = 'var(--active-bg)'; this.chartInstance.setOption(this.chartOptions); download(this.chartInstance.getDataURL({ pixelRatio: 2, diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss index c468cf792..af5135db7 100644 --- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss +++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss @@ -2,7 +2,7 @@ position: relative; width: 100%; padding-bottom: 100%; - background: #181b2d; + background: var(--stat-box-bg); display: flex; justify-content: center; align-items: center; diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts index a67b5d981..3fee3f901 100644 --- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts +++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts @@ -7,8 +7,9 @@ import TxView from './tx-view'; import { Color, Position } from './sprite-types'; import { Price } from '../../services/price.service'; import { StateService } from '../../services/state.service'; +import { ThemeService } from '../../services/theme.service'; import { Subscription } from 'rxjs'; -import { defaultColorFunction, setOpacity, defaultAuditColors, defaultColors, ageColorFunction } from './utils'; +import { defaultColorFunction, setOpacity, defaultAuditColors, defaultColors, ageColorFunction, contrastColorFunction, contrastAuditColors, contrastColors } from './utils'; import { ActiveFilter, FilterMode, toFlags } from '../../shared/filters.utils'; import { detectWebGL } from '../../shared/graphs.utils'; @@ -20,6 +21,13 @@ const unmatchedAuditColors = { prioritized: setOpacity(defaultAuditColors.prioritized, unmatchedOpacity), accelerated: setOpacity(defaultAuditColors.accelerated, unmatchedOpacity), }; +const unmatchedContrastAuditColors = { + censored: setOpacity(contrastAuditColors.censored, unmatchedOpacity), + missing: setOpacity(contrastAuditColors.missing, unmatchedOpacity), + added: setOpacity(contrastAuditColors.added, unmatchedOpacity), + prioritized: setOpacity(contrastAuditColors.prioritized, unmatchedOpacity), + accelerated: setOpacity(contrastAuditColors.accelerated, unmatchedOpacity), +}; @Component({ selector: 'app-block-overview-graph', @@ -53,6 +61,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On @ViewChild('blockCanvas') canvas: ElementRef; + themeChangedSubscription: Subscription; gl: WebGLRenderingContext; animationFrameRequest: number; @@ -84,6 +93,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On readonly ngZone: NgZone, readonly elRef: ElementRef, public stateService: StateService, + private themeService: ThemeService, ) { this.webGlEnabled = this.stateService.isBrowser && detectWebGL(); this.vertexArray = new FastVertexArray(512, TxSprite.dataSize); @@ -102,6 +112,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On if (this.gl) { this.initCanvas(); this.resizeCanvas(); + this.themeChangedSubscription = this.themeService.themeChanged$.subscribe(() => { + this.scene.setColorFunction(this.getColorFunction()); + }); } } } @@ -148,6 +161,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On if (this.canvas) { this.canvas.nativeElement.removeEventListener('webglcontextlost', this.handleContextLost); this.canvas.nativeElement.removeEventListener('webglcontextrestored', this.handleContextRestored); + this.themeChangedSubscription?.unsubscribe(); } } @@ -293,7 +307,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On this.start(); } else { this.scene = new BlockScene({ width: this.displayWidth, height: this.displayHeight, resolution: this.resolution, - blockLimit: this.blockLimit, orientation: this.orientation, flip: this.flip, vertexArray: this.vertexArray, + blockLimit: this.blockLimit, orientation: this.orientation, flip: this.flip, vertexArray: this.vertexArray, theme: this.themeService, highlighting: this.auditHighlighting, animationDuration: this.animationDuration, animationOffset: this.animationOffset, colorFunction: this.getColorFunction() }); this.start(); @@ -563,14 +577,27 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On getFilterColorFunction(flags: bigint, gradient: 'fee' | 'age'): ((tx: TxView) => Color) { return (tx: TxView) => { if ((this.filterMode === 'and' && (tx.bigintFlags & flags) === flags) || (this.filterMode === 'or' && (flags === 0n || (tx.bigintFlags & flags) > 0n))) { - return (gradient === 'age') ? ageColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000)) : defaultColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000)); + if (this.themeService.theme !== 'contrast') { + return (gradient === 'age') ? ageColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000)) : defaultColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000)); + } else { + return (gradient === 'age') ? ageColorFunction(tx, contrastColors.fee, contrastAuditColors, this.relativeTime || (Date.now() / 1000)) : contrastColorFunction(tx, contrastColors.fee, contrastAuditColors, this.relativeTime || (Date.now() / 1000)); + } } else { - return (gradient === 'age') ? { r: 1, g: 1, b: 1, a: 0.05 } : defaultColorFunction( - tx, - defaultColors.unmatchedfee, - unmatchedAuditColors, - this.relativeTime || (Date.now() / 1000) - ); + if (this.themeService.theme !== 'contrast') { + return (gradient === 'age') ? { r: 1, g: 1, b: 1, a: 0.05 } : defaultColorFunction( + tx, + defaultColors.unmatchedfee, + unmatchedAuditColors, + this.relativeTime || (Date.now() / 1000) + ); + } else { + return (gradient === 'age') ? { r: 1, g: 1, b: 1, a: 0.05 } : contrastColorFunction( + tx, + contrastColors.unmatchedfee, + unmatchedContrastAuditColors, + this.relativeTime || (Date.now() / 1000) + ); + } } }; } diff --git a/frontend/src/app/components/block-overview-graph/block-scene.ts b/frontend/src/app/components/block-overview-graph/block-scene.ts index 9fffaf7d9..6f420a1da 100644 --- a/frontend/src/app/components/block-overview-graph/block-scene.ts +++ b/frontend/src/app/components/block-overview-graph/block-scene.ts @@ -2,13 +2,15 @@ import { FastVertexArray } from './fast-vertex-array'; import TxView from './tx-view'; import { TransactionStripped } from '../../interfaces/node-api.interface'; import { Color, Position, Square, ViewUpdateParams } from './sprite-types'; -import { defaultColorFunction } from './utils'; +import { defaultColorFunction, contrastColorFunction } from './utils'; +import { ThemeService } from '../../services/theme.service'; export default class BlockScene { scene: { count: number, offset: { x: number, y: number}}; vertexArray: FastVertexArray; txs: { [key: string]: TxView }; getColor: ((tx: TxView) => Color) = defaultColorFunction; + theme: ThemeService; orientation: string; flip: boolean; animationDuration: number = 900; @@ -29,11 +31,11 @@ export default class BlockScene { animateUntil = 0; dirty: boolean; - constructor({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, highlighting, colorFunction }: + constructor({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction }: { width: number, height: number, resolution: number, blockLimit: number, animationDuration: number, animationOffset: number, - orientation: string, flip: boolean, vertexArray: FastVertexArray, highlighting: boolean, colorFunction: ((tx: TxView) => Color) | null } + orientation: string, flip: boolean, vertexArray: FastVertexArray, theme: ThemeService, highlighting: boolean, colorFunction: ((tx: TxView) => Color) | null } ) { - this.init({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, highlighting, colorFunction }); + this.init({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction }); } resize({ width = this.width, height = this.height, animate = true }: { width?: number, height?: number, animate: boolean }): void { @@ -67,7 +69,7 @@ export default class BlockScene { } setColorFunction(colorFunction: ((tx: TxView) => Color) | null): void { - this.getColor = colorFunction || defaultColorFunction; + this.theme.theme !== 'default' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction; this.updateAllColors(); } @@ -233,9 +235,9 @@ export default class BlockScene { this.animateUntil = Math.max(this.animateUntil, tx.setHighlight(value)); } - private init({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, highlighting, colorFunction }: + private init({ width, height, resolution, blockLimit, animationDuration, animationOffset, orientation, flip, vertexArray, theme, highlighting, colorFunction }: { width: number, height: number, resolution: number, blockLimit: number, animationDuration: number, animationOffset: number, - orientation: string, flip: boolean, vertexArray: FastVertexArray, highlighting: boolean, colorFunction: ((tx: TxView) => Color) | null } + orientation: string, flip: boolean, vertexArray: FastVertexArray, theme: ThemeService, highlighting: boolean, colorFunction: ((tx: TxView) => Color) | null } ): void { this.animationDuration = animationDuration || 1000; this.configAnimationOffset = animationOffset; @@ -244,7 +246,8 @@ export default class BlockScene { this.flip = flip; this.vertexArray = vertexArray; this.highlightingEnabled = highlighting; - this.getColor = colorFunction || defaultColorFunction; + theme.theme !== 'default' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction; + this.theme = theme; this.scene = { count: 0, diff --git a/frontend/src/app/components/block-overview-graph/utils.ts b/frontend/src/app/components/block-overview-graph/utils.ts index d15e87534..ec6181853 100644 --- a/frontend/src/app/components/block-overview-graph/utils.ts +++ b/frontend/src/app/components/block-overview-graph/utils.ts @@ -1,4 +1,4 @@ -import { feeLevels, mempoolFeeColors } from '../../app.constants'; +import { feeLevels, defaultMempoolFeeColors, contrastMempoolFeeColors } from '../../app.constants'; import { Color } from './sprite-types'; import TxView from './tx-view'; @@ -47,7 +47,7 @@ interface ColorPalette { // precomputed colors const defaultColors: { [key: string]: ColorPalette } = { fee: { - base: mempoolFeeColors.map(hexToColor), + base: defaultMempoolFeeColors.map(hexToColor), audit: [], marginal: [], baseLevel: (tx: TxView, rate: number) => feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1 @@ -72,7 +72,37 @@ export const defaultAuditColors = { missing: darken(desaturate(hexToColor('f344df'), 0.3), 0.7), added: hexToColor('0099ff'), prioritized: darken(desaturate(hexToColor('0099ff'), 0.3), 0.7), - accelerated: hexToColor('8F5FF6'), + accelerated: hexToColor('8f5ff6'), +}; + +const contrastColors: { [key: string]: ColorPalette } = { + fee: { + base: contrastMempoolFeeColors.map(hexToColor), + audit: [], + marginal: [], + baseLevel: (tx: TxView, rate: number) => feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1 + }, +} +for (const key in contrastColors) { + const base = contrastColors[key].base; + contrastColors[key].audit = base.map((color) => darken(desaturate(color, 0.3), 0.9)); + contrastColors[key].marginal = base.map((color) => darken(desaturate(color, 0.8), 1.1)); + contrastColors['unmatched' + key] = { + base: contrastColors[key].base.map(c => setOpacity(c, 0.2)), + audit: contrastColors[key].audit.map(c => setOpacity(c, 0.2)), + marginal: contrastColors[key].marginal.map(c => setOpacity(c, 0.2)), + baseLevel: contrastColors[key].baseLevel, + }; +} + +export { contrastColors as contrastColors }; + +export const contrastAuditColors = { + censored: hexToColor('ffa8ff'), + missing: darken(desaturate(hexToColor('ffa8ff'), 0.3), 0.7), + added: hexToColor('00bb98'), + prioritized: darken(desaturate(hexToColor('00bb98'), 0.3), 0.7), + accelerated: hexToColor('8f5ff6'), }; export function defaultColorFunction( @@ -83,7 +113,7 @@ export function defaultColorFunction( ): Color { const rate = tx.fee / tx.vsize; // color by simple single-tx fee rate const levelIndex = colors.baseLevel(tx, rate, relativeTime || (Date.now() / 1000)); - const levelColor = colors.base[levelIndex] || colors.base[mempoolFeeColors.length - 1]; + const levelColor = colors.base[levelIndex] || colors.base[defaultMempoolFeeColors.length - 1]; // Normal mode if (!tx.scene?.highlightingEnabled) { if (tx.acc) { @@ -100,7 +130,7 @@ export function defaultColorFunction( case 'missing': case 'sigop': case 'rbf': - return colors.marginal[levelIndex] || colors.marginal[mempoolFeeColors.length - 1]; + return colors.marginal[levelIndex] || colors.marginal[defaultMempoolFeeColors.length - 1]; case 'fresh': case 'freshcpfp': return auditColors.missing; @@ -109,12 +139,12 @@ export function defaultColorFunction( case 'prioritized': return auditColors.prioritized; case 'selected': - return colors.marginal[levelIndex] || colors.marginal[mempoolFeeColors.length - 1]; + return colors.marginal[levelIndex] || colors.marginal[defaultMempoolFeeColors.length - 1]; case 'accelerated': return auditColors.accelerated; case 'found': if (tx.context === 'projected') { - return colors.audit[levelIndex] || colors.audit[mempoolFeeColors.length - 1]; + return colors.audit[levelIndex] || colors.audit[defaultMempoolFeeColors.length - 1]; } else { return levelColor; } @@ -127,17 +157,27 @@ export function defaultColorFunction( } } +export function contrastColorFunction( + tx: TxView, + colors: { base: Color[], audit: Color[], marginal: Color[], baseLevel: (tx: TxView, rate: number, time: number) => number } = contrastColors.fee, + auditColors: { [status: string]: Color } = contrastAuditColors, + relativeTime?: number, +): Color { + return defaultColorFunction(tx, colors, auditColors, relativeTime); +} + export function ageColorFunction( tx: TxView, colors: { base: Color[], audit: Color[], marginal: Color[], baseLevel: (tx: TxView, rate: number, time: number) => number } = defaultColors.fee, auditColors: { [status: string]: Color } = defaultAuditColors, relativeTime?: number, + theme?: string, ): Color { if (tx.acc || tx.status === 'accelerated') { return auditColors.accelerated; } - const color = defaultColorFunction(tx, colors, auditColors, relativeTime); + const color = theme !== 'contrast' ? defaultColorFunction(tx, colors, auditColors, relativeTime) : contrastColorFunction(tx, colors, auditColors, relativeTime); const ageLevel = (!tx.time ? 0 : (0.8 * Math.tanh((1 / 15) * Math.log2((Math.max(1, 0.6 * ((relativeTime - tx.time) - 60))))))); return { @@ -146,4 +186,4 @@ export function ageColorFunction( b: color.b, a: color.a * (1 - ageLevel) }; -} \ No newline at end of file +} diff --git 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 index 51edee1e8..df34ce346 100644 --- 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; @@ -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; } } \ No newline at end of file diff --git a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts index fe8efa9c7..d0c154420 100644 --- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts +++ b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts @@ -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', @@ -219,7 +219,7 @@ export class BlockRewardsGraphComponent implements OnInit { splitLine: { lineStyle: { type: 'dotted', - color: '#ffffff66', + color: 'var(--transparent-fg)', opacity: 0.25, } }, @@ -315,7 +315,7 @@ export class BlockRewardsGraphComponent implements OnInit { const now = new Date(); // @ts-ignore this.chartOptions.grid.bottom = 40; - this.chartOptions.backgroundColor = '#11131f'; + this.chartOptions.backgroundColor = 'var(--active-bg)'; this.chartInstance.setOption(this.chartOptions); download(this.chartInstance.getDataURL({ pixelRatio: 2, diff --git a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts index 76d6e8216..bf591ad70 100644 --- a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts +++ b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.ts @@ -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', @@ -230,7 +230,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit { splitLine: { lineStyle: { type: 'dotted', - color: '#ffffff66', + color: 'var(--transparent-fg)', opacity: 0.25, } }, @@ -252,7 +252,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit { symbol: 'none', lineStyle: { type: 'solid', - color: '#ffffff66', + color: 'var(--transparent-fg)', opacity: 1, width: 1, }, @@ -342,7 +342,7 @@ export class BlockSizesWeightsGraphComponent implements OnInit { const now = new Date(); // @ts-ignore this.chartOptions.grid.bottom = 40; - this.chartOptions.backgroundColor = '#11131f'; + this.chartOptions.backgroundColor = 'var(--active-bg)'; this.chartInstance.setOption(this.chartOptions); download(this.chartInstance.getDataURL({ pixelRatio: 2, diff --git a/frontend/src/app/components/block/block.component.scss b/frontend/src/app/components/block/block.component.scss index bad8fa52e..70f388e73 100644 --- 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; @@ -175,9 +175,7 @@ h1 { } a { - color: #1ad8f4; &:hover, &:focus { - color: #09a3ba; display: inline-block; } } @@ -254,7 +252,7 @@ h1 { cursor: pointer; &.active { - background: #24273e; + background: var(--box-bg); } &.active, &:hover { diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss index c1cc6809d..59082d5c5 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss @@ -117,7 +117,7 @@ } .black-background { - background-color: #11131f; + background-color: var(--active-bg); z-index: 100; position: relative; } @@ -144,7 +144,7 @@ } .loading .bitcoin-block.mined-block { - background: #2d3348; + background: var(--secondary); } @keyframes opacityPulse { diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts index 5141f4de9..ca79b68a6 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts @@ -63,11 +63,11 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy { blockPadding: number = 30; gradientColors = { - '': ['#9339f4', '#105fb0'], - liquid: ['#116761', '#183550'], - 'liquidtestnet': ['#494a4a', '#272e46'], - testnet: ['#1d486f', '#183550'], - signet: ['#6f1d5d', '#471850'], + '': ['var(--mainnet-alt)', 'var(--primary)'], + liquid: ['var(--liquid)', 'var(--testnet-alt)'], + 'liquidtestnet': ['var(--liquidtestnet)', 'var(--liquidtestnet-alt)'], + testnet: ['var(--testnet)', 'var(--testnet-alt)'], + signet: ['var(--signet)', 'var(--signet-alt)'], }; constructor( @@ -330,7 +330,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy { left: addLeft + this.blockOffset * index + 'px', background: `repeating-linear-gradient( #2d3348, - #2d3348 ${greenBackgroundHeight}%, + var(--secondary) ${greenBackgroundHeight}%, ${this.gradientColors[this.network][0]} ${Math.max(greenBackgroundHeight, 0)}%, ${this.gradientColors[this.network][1]} 100% )`, @@ -366,7 +366,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy { return { left: addLeft + this.blockOffset * this.emptyBlocks.indexOf(block) + 'px', - background: "#2d3348", + background: "var(--secondary)", }; } diff --git a/frontend/src/app/components/blockchain/blockchain.component.scss b/frontend/src/app/components/blockchain/blockchain.component.scss index eacd16118..a8ecc6aba 100644 --- a/frontend/src/app/components/blockchain/blockchain.component.scss +++ b/frontend/src/app/components/blockchain/blockchain.component.scss @@ -30,7 +30,7 @@ } .black-background { - background-color: #11131f; + background-color: var(--active-bg); z-index: 100; position: relative; } diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.scss b/frontend/src/app/components/blocks-list/blocks-list.component.scss index 3d3169a69..2315844ae 100644 --- a/frontend/src/app/components/blocks-list/blocks-list.component.scss +++ b/frontend/src/app/components/blocks-list/blocks-list.component.scss @@ -46,7 +46,7 @@ tr, td, th { } .progress { - background-color: #2d3348; + background-color: var(--secondary); } .pool { @@ -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; diff --git a/frontend/src/app/components/clock-face/clock-face.component.scss b/frontend/src/app/components/clock-face/clock-face.component.scss index 1ca2ce914..e2bb215d4 100644 --- a/frontend/src/app/components/clock-face/clock-face.component.scss +++ b/frontend/src/app/components/clock-face/clock-face.component.scss @@ -14,7 +14,7 @@ height: 100%; .face { - fill: #11131f; + fill: var(--active-bg); } } @@ -29,8 +29,8 @@ } &.hour { - fill: #105fb0; - stroke: #105fb0; + fill: var(--primary); + stroke: var(--primary); stroke-width: 6px; } } diff --git a/frontend/src/app/components/clock/clock.component.scss b/frontend/src/app/components/clock/clock.component.scss index 34aadcd74..7423c1d8f 100644 --- 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); } diff --git a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html index 0865708af..4d135dfbe 100644 --- 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 @@
Current Period
{{ epochData.progress | number: '1.2-2' }} %
-
 
+
 
diff --git a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss index 69e2892ee..7965ff5d6 100644 --- 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; } diff --git a/frontend/src/app/components/difficulty/difficulty.component.scss b/frontend/src/app/components/difficulty/difficulty.component.scss index 3b591dc2d..697a6f534 100644 --- a/frontend/src/app/components/difficulty/difficulty.component.scss +++ b/frontend/src/app/components/difficulty/difficulty.component.scss @@ -10,7 +10,7 @@ justify-content: space-around; height: 50.5px; .shared-block { - color: #ffffff66; + color: var(--transparent-fg); font-size: 12px; } .item { @@ -91,19 +91,19 @@ } .card { - background-color: #1d1f31; + background-color: var(--bg); height: 100%; } .card-title { - color: #4a68b9; + color: var(--title-fg); font-size: 1rem; } .progress { display: inline-flex; width: 100%; - background-color: #2d3348; + background-color: var(--secondary); height: 1.1rem; max-width: 180px; } @@ -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 { diff --git a/frontend/src/app/components/difficulty/difficulty.component.ts b/frontend/src/app/components/difficulty/difficulty.component.ts index a58250653..579b49fc3 100644 --- a/frontend/src/app/components/difficulty/difficulty.component.ts +++ b/frontend/src/app/components/difficulty/difficulty.component.ts @@ -82,24 +82,24 @@ export class DifficultyComponent implements OnInit { .pipe( map(([blocks, da]) => { const maxHeight = blocks.reduce((max, block) => Math.max(max, block.height), 0); - let colorAdjustments = '#ffffff66'; + let colorAdjustments = 'var(--transparent-fg)'; if (da.difficultyChange > 0) { - colorAdjustments = '#3bcc49'; + colorAdjustments = 'var(--green)'; } if (da.difficultyChange < 0) { - colorAdjustments = '#dc3545'; + colorAdjustments = 'var(--red)'; } - let colorPreviousAdjustments = '#dc3545'; + let colorPreviousAdjustments = 'var(--red)'; if (da.previousRetarget) { if (da.previousRetarget >= 0) { - colorPreviousAdjustments = '#3bcc49'; + colorPreviousAdjustments = 'var(--green)'; } if (da.previousRetarget === 0) { - colorPreviousAdjustments = '#ffffff66'; + colorPreviousAdjustments = 'var(--transparent-fg)'; } } else { - colorPreviousAdjustments = '#ffffff66'; + colorPreviousAdjustments = 'var(--transparent-fg)'; } const blocksUntilHalving = 210000 - (maxHeight % 210000); diff --git a/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts b/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts index ca5b3f452..c26aae31a 100644 --- a/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts +++ b/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts @@ -128,7 +128,7 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges, OnDestr splitLine: { lineStyle: { type: 'dotted', - color: '#ffffff66', + color: 'var(--transparent-fg)', opacity: 0.25, } }, diff --git a/frontend/src/app/components/fees-box/fees-box.component.scss b/frontend/src/app/components/fees-box/fees-box.component.scss index ba68e2086..0272936ee 100644 --- 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; @@ -36,7 +36,7 @@ margin-bottom: 0; } .card-text span { - color: #ffffff66; + color: var(--transparent-fg); font-size: 12px; top: 0px; } @@ -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%; diff --git a/frontend/src/app/components/fees-box/fees-box.component.ts b/frontend/src/app/components/fees-box/fees-box.component.ts index 4f9772b22..e923b26e9 100644 --- a/frontend/src/app/components/fees-box/fees-box.component.ts +++ b/frontend/src/app/components/fees-box/fees-box.component.ts @@ -1,9 +1,10 @@ -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, mempoolFeeColors } from '../../app.constants'; +import { feeLevels } from '../../app.constants'; import { map, startWith, tap } from 'rxjs/operators'; +import { ThemeService } from '../../services/theme.service'; @Component({ selector: 'app-fees-box', @@ -11,14 +12,18 @@ import { map, startWith, tap } from 'rxjs/operators'; styleUrls: ['./fees-box.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class FeesBoxComponent implements OnInit { +export class FeesBoxComponent implements OnInit, OnDestroy { isLoading$: Observable; recommendedFees$: Observable; + themeSubscription: Subscription; gradient = 'linear-gradient(to right, #2e324e, #2e324e)'; noPriority = '#2e324e'; + fees: Recommendedfees; constructor( - private stateService: StateService + private stateService: StateService, + private themeService: ThemeService, + private cd: ChangeDetectorRef, ) { } ngOnInit(): void { @@ -31,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 = '#' + (mempoolFeeColors[feeLevelIndex - 1] || mempoolFeeColors[mempoolFeeColors.length - 1]); - - feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => fees.fastestFee >= feeLvl); - feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex; - const endColor = '#' + (mempoolFeeColors[feeLevelIndex - 1] || mempoolFeeColors[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(); } } diff --git a/frontend/src/app/components/footer/footer.component.scss b/frontend/src/app/components/footer/footer.component.scss index cc0146345..b21f39676 100644 --- a/frontend/src/app/components/footer/footer.component.scss +++ b/frontend/src/app/components/footer/footer.component.scss @@ -3,7 +3,7 @@ bottom: 0; width: 100%; height: 60px; - background-color: #1d1f31; + background-color: var(--bg); box-shadow: 15px 15px 15px 15px #000; z-index: 10; @@ -40,16 +40,8 @@ } } -.txPerSecond { - color: #4a9ff4; -} - .mempoolSize { - color: #4a68b9; -} - -.unconfirmedTx { - color: #f14d80; + color: var(--title-fg); } .info-block { @@ -61,7 +53,7 @@ .progress { display: inline-flex; width: 160px; - background-color: #2d3348; + background-color: var(--secondary); height: 1.1rem; } diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss index 32885d5de..dc19dc9d1 100644 --- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss +++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss @@ -94,12 +94,12 @@ } .card-title { font-size: 1rem; - color: #4a68b9; + color: var(--title-fg); } .card-text { font-size: 18px; span { - color: #ffffff66; + color: var(--transparent-fg); font-size: 12px; } } diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts index f4924f255..b61f88521 100644 --- 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', @@ -354,7 +354,7 @@ export class HashrateChartComponent implements OnInit { splitLine: { lineStyle: { type: 'dotted', - color: '#ffffff66', + color: 'var(--transparent-fg)', opacity: 0.25, } }, @@ -472,7 +472,7 @@ export class HashrateChartComponent implements OnInit { const now = new Date(); // @ts-ignore this.chartOptions.grid.bottom = 30; - this.chartOptions.backgroundColor = '#11131f'; + this.chartOptions.backgroundColor = 'var(--active-bg)'; this.chartInstance.setOption(this.chartOptions); download(this.chartInstance.getDataURL({ pixelRatio: 2, diff --git a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts index d938baf15..5ac2cc10d 100644 --- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts +++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts @@ -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', @@ -308,7 +308,7 @@ export class HashrateChartPoolsComponent implements OnInit { const now = new Date(); // @ts-ignore this.chartOptions.grid.bottom = 30; - this.chartOptions.backgroundColor = '#11131f'; + this.chartOptions.backgroundColor = 'var(--active-bg)'; this.chartInstance.setOption(this.chartOptions); download(this.chartInstance.getDataURL({ pixelRatio: 2, diff --git a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts index 5c102eadf..c456053ea 100644 --- a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts +++ b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts @@ -272,7 +272,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On splitLine: { lineStyle: { type: 'dotted', - color: '#ffffff66', + color: 'var(--transparent-fg)', opacity: 0.25, } } @@ -332,7 +332,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On const now = new Date(); // @ts-ignore this.mempoolStatsChartOption.grid.height = prevHeight + 20; - this.mempoolStatsChartOption.backgroundColor = '#11131f'; + this.mempoolStatsChartOption.backgroundColor = 'var(--active-bg)'; this.chartInstance.setOption(this.mempoolStatsChartOption); download(this.chartInstance.getDataURL({ pixelRatio: 2, diff --git a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss index 49a434be9..12d0930d4 100644 --- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss +++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss @@ -7,7 +7,7 @@ } li.nav-item.active { - background-color: #653b9c; + background-color: var(--tertiary); } fa-icon { @@ -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; @@ -112,23 +112,23 @@ nav { } .mainnet.active { - background-color: #653b9c; + background-color: var(--tertiary); } .liquid.active { - background-color: #116761; + background-color: var(--liquid); } .liquidtestnet.active { - background-color: #494a4a; + background-color: var(--liquidtestnet); } .testnet.active { - background-color: #1d486f; + background-color: var(--testnet); } .signet.active { - background-color: #6f1d5d; + background-color: var(--signet); } .dropdown-divider { diff --git a/frontend/src/app/components/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 index 44dfedd26..fb68a530d 100644 --- 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 @@
-
Total Expired 
+
Total Expired 
{{ (+expiredStats.all.total) / 100000000 | number: '1.5-5' }} BTC
diff --git 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 index d2044f6de..1a2fd6864 100644 --- 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; diff --git 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 index b711f659b..5fbab9cc5 100644 --- 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 { diff --git 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 index 9240cf228..5017ad4b2 100644 --- 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 @@
-
Liquid Federation Wallet 
+
Liquid Federation Wallet 
{{ federationWalletStats.address_count }} addresses
@@ -16,7 +16,7 @@
-
Liquid Federation Wallet 
+
Liquid Federation Wallet 
diff --git 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 index 4ddce6501..aa345fbfd 100644 --- 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; diff --git 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 index 6a2353f0c..cdd5a5ed9 100644 --- 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 { diff --git 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 index 7a3d9e49f..3af119fad 100644 --- 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 { diff --git 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 index 6f012e84e..44b801a30 100644 --- 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 @@
-
Recent Peg-In / Out's 
+
Recent Peg-In / Out's 
@@ -26,7 +26,7 @@
-
Recent Peg-In / Out's 
+
Recent Peg-In / Out's 
diff --git 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 index 4cfef8e7a..9a7e6f0ea 100644 --- 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; diff --git 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 index dede76b3f..49ba80d0c 100644 --- 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 @@
Emergency Keys
diff --git 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 index 13123431e..fd7197a88 100644 --- 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; diff --git 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 index 13f948fcd..04429d2ac 100644 --- 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, }, diff --git 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 index 6ffb900ed..47d29eb45 100644 --- 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; diff --git a/frontend/src/app/components/master-page-preview/master-page-preview.component.scss b/frontend/src/app/components/master-page-preview/master-page-preview.component.scss index f901f31a3..486922dfa 100644 --- a/frontend/src/app/components/master-page-preview/master-page-preview.component.scss +++ b/frontend/src/app/components/master-page-preview/master-page-preview.component.scss @@ -18,7 +18,7 @@ flex-direction: row; justify-content: space-between; align-items: center; - background: #11131f; + background: var(--active-bg); text-align: start; font-size: 1.8em; } diff --git a/frontend/src/app/components/master-page/master-page.component.scss b/frontend/src/app/components/master-page/master-page.component.scss index 9320e2b38..2f5bc536e 100644 --- a/frontend/src/app/components/master-page/master-page.component.scss +++ b/frontend/src/app/components/master-page/master-page.component.scss @@ -7,7 +7,7 @@ } li.nav-item.active { - background-color: #653b9c; + background-color: var(--tertiary); } fa-icon { @@ -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; @@ -139,23 +139,23 @@ nav { } .mainnet.active { - background-color: #653b9c; + background-color: var(--tertiary); } .liquid.active { - background-color: #116761; + background-color: var(--liquid); } .liquidtestnet.active { - background-color: #494a4a; + background-color: var(--liquidtestnet); } .testnet.active { - background-color: #1d486f; + background-color: var(--testnet); } .signet.active { - background-color: #6f1d5d; + background-color: var(--signet); } .dropdown-divider { diff --git a/frontend/src/app/components/mempool-block/mempool-block.component.scss b/frontend/src/app/components/mempool-block/mempool-block.component.scss index e74689a9a..b2f9419b8 100644 --- a/frontend/src/app/components/mempool-block/mempool-block.component.scss +++ b/frontend/src/app/components/mempool-block/mempool-block.component.scss @@ -1,5 +1,5 @@ .progress { - background-color: #2d3348; + background-color: var(--secondary); position: relative; top: 5px; } diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss index 606699d93..dada75603 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss @@ -106,7 +106,7 @@ } .black-background { - background-color: #11131f; + background-color: var(--active-bg); z-index: 100; position: relative; } diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts index ed5b61f2b..80d77427b 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts @@ -4,12 +4,13 @@ import { MempoolBlock } from '../../interfaces/websocket.interface'; import { StateService } from '../../services/state.service'; import { Router } from '@angular/router'; import { map, switchMap, tap } from 'rxjs/operators'; -import { feeLevels, mempoolFeeColors } from '../../app.constants'; +import { feeLevels } from '../../app.constants'; import { specialBlocks } from '../../app.constants'; import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe'; import { Location } from '@angular/common'; import { DifficultyAdjustment, MempoolPosition } from '../../interfaces/node-api.interface'; import { animate, style, transition, trigger } from '@angular/animations'; +import { ThemeService } from '../../services/theme.service'; @Component({ selector: 'app-mempool-blocks', @@ -84,6 +85,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy { constructor( private router: Router, public stateService: StateService, + private themeService: ThemeService, private cd: ChangeDetectorRef, private relativeUrlPipe: RelativeUrlPipe, private location: Location, @@ -354,7 +356,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy { trimmedFeeRange.forEach((fee: number) => { let feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => fee >= feeLvl); feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex; - gradientColors.push(mempoolFeeColors[feeLevelIndex - 1] || mempoolFeeColors[mempoolFeeColors.length - 1]); + gradientColors.push(this.themeService.mempoolFeeColors[feeLevelIndex - 1] || this.themeService.mempoolFeeColors[this.themeService.mempoolFeeColors.length - 1]); }); gradientColors.forEach((color, i, gc) => { diff --git a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts index 58d1764ab..4700332a3 100644 --- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts +++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts @@ -432,7 +432,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges { splitLine: { lineStyle: { type: 'dotted', - color: '#ffffff66', + color: 'var(--transparent-fg)', opacity: 0.25, } } @@ -500,7 +500,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges { const now = new Date(); // @ts-ignore this.mempoolVsizeFeesOptions.grid.height = prevHeight + 20; - this.mempoolVsizeFeesOptions.backgroundColor = '#11131f'; + this.mempoolVsizeFeesOptions.backgroundColor = 'var(--active-bg)'; this.chartInstance.setOption(this.mempoolVsizeFeesOptions); download(this.chartInstance.getDataURL({ pixelRatio: 2, diff --git a/frontend/src/app/components/menu/menu.component.scss b/frontend/src/app/components/menu/menu.component.scss index fe5e74ff9..3bec556fd 100644 --- a/frontend/src/app/components/menu/menu.component.scss +++ b/frontend/src/app/components/menu/menu.component.scss @@ -34,7 +34,7 @@ .sidenav.open { display: block; - background-color: #1d1f31; + background-color: var(--bg); } :host-context(.ltr-layout) .sidenav.open { @@ -56,7 +56,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; @@ -75,7 +75,7 @@ } .badge-og { - background-color: #4a68b9; + background-color: var(--title-fg); } .badge-pleb { @@ -87,7 +87,7 @@ } .badge-whale { - background-color: #653b9c; + background-color: var(--tertiary); } .badge-silver { @@ -99,5 +99,5 @@ } .badge-platinum { - background-color: #653b9c; + background-color: var(--tertiary); } \ No newline at end of file diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html index c4fca72eb..6b37d7dd9 100644 --- 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 @@
Recent Blocks
  - +
@@ -69,7 +69,7 @@
Adjustments
  - +
diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss index ce68c97ae..a7948b40e 100644 --- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss +++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss @@ -7,7 +7,7 @@ } .card { - background-color: #1d1f31; + background-color: var(--bg); } .graph-card { @@ -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 { diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss index f5a49678b..65f4f1f5c 100644 --- 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; @@ -107,7 +107,7 @@ .card-text { font-size: 18px; span { - color: #ffffff66; + color: var(--transparent-fg); font-size: 12px; } } diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts index 299a95582..f7862d120 100644 --- 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: () => { @@ -186,7 +186,7 @@ export class PoolRankingComponent implements OnInit { name: $localize`Other (${percentage})`, label: { overflow: 'none', - color: '#b1b1b1', + color: 'var(--tooltip-grey)', alignTo: 'edge', edgeDistance: edgeDistance }, @@ -195,7 +195,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: () => { @@ -306,7 +306,7 @@ export class PoolRankingComponent implements OnInit { onSaveChart() { const now = new Date(); - this.chartOptions.backgroundColor = '#11131f'; + this.chartOptions.backgroundColor = 'var(--active-bg)'; this.chartInstance.setOption(this.chartOptions); download(this.chartInstance.getDataURL({ pixelRatio: 2, diff --git a/frontend/src/app/components/pool/pool-preview.component.scss b/frontend/src/app/components/pool/pool-preview.component.scss index bd0c19859..24a38c9c5 100644 --- a/frontend/src/app/components/pool/pool-preview.component.scss +++ b/frontend/src/app/components/pool/pool-preview.component.scss @@ -17,7 +17,7 @@ justify-content: space-between; width: 100%; margin-left: 15px; - background: #181b2d; + background: var(--stat-box-bg); padding: 0.75rem; width: 0; flex-grow: 1; @@ -43,7 +43,7 @@ .chart { width: 100%; height: 315px; - background: #181b2d; + background: var(--stat-box-bg); } .row { @@ -65,7 +65,7 @@ position: absolute; right: 0; top: 0; - background: #24273e; + background: var(--box-bg); &.noimg { opacity: 0; diff --git a/frontend/src/app/components/pool/pool.component.scss b/frontend/src/app/components/pool/pool.component.scss index 8bd6763e5..36bdc93e9 100644 --- a/frontend/src/app/components/pool/pool.component.scss +++ b/frontend/src/app/components/pool/pool.component.scss @@ -88,7 +88,7 @@ div.scrollable { } .progress { - background-color: #2d3348; + background-color: var(--secondary); } .coinbase { @@ -190,7 +190,7 @@ div.scrollable { } .data-title { - color: #4a68b9; + color: var(--title-fg); font-size: 14px; } diff --git a/frontend/src/app/components/pool/pool.component.ts b/frontend/src/app/components/pool/pool.component.ts index 7c6b5de38..3d2d0ac81 100644 --- 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', diff --git a/frontend/src/app/components/rbf-list/rbf-list.component.scss b/frontend/src/app/components/rbf-list/rbf-list.component.scss index 792bb8836..ff4dcf9b7 100644 --- 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 { diff --git a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss index 8962be63c..6803e82ae 100644 --- a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss +++ b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss @@ -15,12 +15,12 @@ &::before { left: 0; - background: linear-gradient(to right, #24273e, #24273e, transparent); + background: linear-gradient(to right, var(--box-bg), var(--box-bg), transparent); } &::after { right: 0; - background: linear-gradient(to left, #24273e, #24273e, transparent); + background: linear-gradient(to left, var(--box-bg), var(--box-bg), transparent); } .timeline-wrapper { @@ -45,7 +45,7 @@ width: 100%; height: 70px; top: -70px; - background: linear-gradient(to bottom, rgba(36, 39, 62, 0) 0%, rgba(36, 39, 62, 1) 100%); + background: linear-gradient(to bottom, var(--fade-out-box-bg-start), var(--fade-out-box-bg-end)); z-index: 1; } } @@ -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); } } } diff --git a/frontend/src/app/components/reward-stats/reward-stats.component.scss b/frontend/src/app/components/reward-stats/reward-stats.component.scss index e02b3a311..2237d8716 100644 --- 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; @@ -50,7 +50,7 @@ margin-bottom: 0; } .card-text span { - color: #ffffff66; + color: var(--transparent-fg); font-size: 12px; top: 0px; } diff --git a/frontend/src/app/components/search-form/search-results/search-results.component.scss b/frontend/src/app/components/search-form/search-results/search-results.component.scss index 496e718d8..5540d7e7a 100644 --- 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; diff --git a/frontend/src/app/components/start/start.component.scss b/frontend/src/app/components/start/start.component.scss index e321b8d6f..50e520cc5 100644 --- 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; diff --git a/frontend/src/app/components/statistics/statistics.component.scss b/frontend/src/app/components/statistics/statistics.component.scss index 3d4813fb5..835a170cc 100644 --- a/frontend/src/app/components/statistics/statistics.component.scss +++ b/frontend/src/app/components/statistics/statistics.component.scss @@ -117,7 +117,7 @@ } .inactive { .square { - background-color: #ffffff66 !important; + background-color: var(--transparent-fg) !important; } .fee-text { text-decoration: line-through; diff --git a/frontend/src/app/components/theme-selector/theme-selector.component.html b/frontend/src/app/components/theme-selector/theme-selector.component.html new file mode 100644 index 000000000..2ba7435ec --- /dev/null +++ b/frontend/src/app/components/theme-selector/theme-selector.component.html @@ -0,0 +1,6 @@ +
+ +
diff --git a/frontend/src/app/components/theme-selector/theme-selector.component.scss b/frontend/src/app/components/theme-selector/theme-selector.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/src/app/components/theme-selector/theme-selector.component.ts b/frontend/src/app/components/theme-selector/theme-selector.component.ts new file mode 100644 index 000000000..7f38844bb --- /dev/null +++ b/frontend/src/app/components/theme-selector/theme-selector.component.ts @@ -0,0 +1,31 @@ +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; +import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; +import { ThemeService } from '../../services/theme.service'; + +@Component({ + selector: 'app-theme-selector', + templateUrl: './theme-selector.component.html', + styleUrls: ['./theme-selector.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class ThemeSelectorComponent implements OnInit { + themeForm: UntypedFormGroup; + themes = ['default', 'contrast']; + + constructor( + private formBuilder: UntypedFormBuilder, + private themeService: ThemeService, + ) { } + + ngOnInit() { + this.themeForm = this.formBuilder.group({ + theme: ['default'] + }); + this.themeForm.get('theme')?.setValue(this.themeService.theme); + } + + changeTheme() { + const newTheme = this.themeForm.get('theme')?.value; + this.themeService.apply(newTheme); + } +} diff --git a/frontend/src/app/components/transaction/transaction-preview.component.scss b/frontend/src/app/components/transaction/transaction-preview.component.scss index 4fa8b661a..986ee7d8e 100644 --- a/frontend/src/app/components/transaction/transaction-preview.component.scss +++ b/frontend/src/app/components/transaction/transaction-preview.component.scss @@ -54,7 +54,7 @@ } .label { - color: #ffffff66; + color: var(--transparent-fg); } &.pair > *:first-child { @@ -79,7 +79,7 @@ .graph-wrapper { position: relative; - background: #181b2d; + background: var(--stat-box-bg); padding: 10px 0; padding-bottom: 0; @@ -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; diff --git a/frontend/src/app/components/transaction/transaction.component.scss b/frontend/src/app/components/transaction/transaction.component.scss index 2d396383a..375b5c4e0 100644 --- 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; } @@ -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; } @@ -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; } diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.scss b/frontend/src/app/components/transactions-list/transactions-list.component.scss index b80c4da4c..2bae3de2c 100644 --- 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:#dc3545; + color: var(--red); } .grey { - color:#6c757d; + color: var(--grey); } .mobile-bottomcol { @@ -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 { @@ -159,7 +159,7 @@ h2 { } .grey-info-text { - color:#6c757d; + color: var(--grey); font-style: italic; font-size: 12px; } diff --git 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 index 97cfcddb7..0c973ad00 100644 --- 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; diff --git a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html index 9f491affc..3b044f28d 100644 --- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html +++ b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html @@ -77,12 +77,12 @@ - + - + diff --git a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.scss b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.scss index 454d92bbf..e39d54e59 100644 --- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.scss +++ b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.scss @@ -30,7 +30,7 @@ stroke: url(#output-highlight-gradient); } &.zerovalue { - stroke: #1bd8f4; + stroke: var(--info); } } } diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html index 1e5efd217..1b3eef543 100644 --- a/frontend/src/app/dashboard/dashboard.component.html +++ b/frontend/src/app/dashboard/dashboard.component.html @@ -20,7 +20,7 @@
Mempool Goggles™ : {{ goggleCycle[goggleIndex].name }}
  - +
@@ -64,7 +64,7 @@
Recent Replacements
  - + @@ -98,7 +98,7 @@
Recent Blocks
  - +
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss index 01eb7f73d..3acfbf9bb 100644 --- a/frontend/src/app/dashboard/dashboard.component.scss +++ b/frontend/src/app/dashboard/dashboard.component.scss @@ -7,12 +7,12 @@ } .card { - background-color: #1d1f31; + background-color: var(--bg); height: 100%; } .card-title { - color: #4a68b9; + color: var(--title-fg); font-size: 1rem; } @@ -25,7 +25,7 @@ .progress { display: inline-flex; width: 100%; - background-color: #2d3348; + background-color: var(--secondary); height: 1.1rem; max-width: 180px; } @@ -101,7 +101,7 @@ .card-text { font-size: 18px; span { - color: #ffffff66; + color: var(--transparent-fg); font-size: 12px; } .bitcoin-color { @@ -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; diff --git a/frontend/src/app/docs/api-docs/api-docs-nav.component.scss b/frontend/src/app/docs/api-docs/api-docs-nav.component.scss index 9db2f56e9..4609ed2fd 100644 --- 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,12 +1,12 @@ p { - color: #4a68b9; + color: var(--title-fg); font-weight: 700; margin: 10px 0; margin: 15px 0 10px 0; } 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; } diff --git a/frontend/src/app/docs/api-docs/api-docs.component.scss b/frontend/src/app/docs/api-docs/api-docs.component.scss index a139288e7..ce8c37121 100644 --- a/frontend/src/app/docs/api-docs/api-docs.component.scss +++ b/frontend/src/app/docs/api-docs/api-docs.component.scss @@ -17,7 +17,7 @@ } code { - background-color: #1d1f31; + background-color: var(--bg); font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New; } @@ -95,7 +95,7 @@ ul.no-bull.block-audit code{ .nav-tabs .nav-link.active { border-bottom: 1px solid #fff; @media (min-width: 676px){ - border-bottom: 1px solid #11131f; + border-bottom: 1px solid var(--active-bg); } } @@ -113,7 +113,7 @@ ul.no-bull.block-audit code{ padding: 0px; } .nav-tabs .nav-link.active { - border-bottom: 1px solid #11131f; + border-bottom: 1px solid var(--active-bg); } .subtitle { display: flex; @@ -158,17 +158,17 @@ ul.no-bull.block-audit code{ top: 80px; overflow-y: auto; height: calc(100vh - 75px); - scrollbar-color: #2d3348 #11131f; + scrollbar-color: var(--secondary) var(--active-bg); scrollbar-width: thin; } ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-track { - background: #11131f; + background: var(--active-bg); } ::-webkit-scrollbar-thumb { - background-color: #2d3348; + background-color: var(--secondary); border-radius: 5px; border: none; } @@ -196,8 +196,8 @@ h3 { .endpoint-container .section-header { display: block; - background-color: #2d3348; - color: #1bd8f4; + background-color: var(--secondary); + color: var(--info); padding: 1rem 1.3rem 1rem 1.3rem; font-weight: bold; border-radius: 0.25rem; @@ -211,8 +211,8 @@ h3 { } .endpoint-container .section-header span { - color: #fff; - background-color: #653b9c; + color: var(--fg); + background-color: var(--tertiary); font-size: 12px; text-transform: uppercase; font-weight: 400; @@ -244,7 +244,7 @@ h3 { } #doc-nav-mobile > div { - background-color: #2d3348; + background-color: var(--secondary); z-index: 100; border-radius: 0 0 0.5rem 0.5rem; height: 55vh; @@ -253,9 +253,9 @@ h3 { #doc-nav-mobile button { width: 100%; - background-color: #105fb0; - color: #fff; - border-color: #105fb0; + background-color: var(--primary); + color: var(--fg); + border-color: var(--primary); border-radius: 0.5rem 0.5rem 0 0; } @@ -303,7 +303,7 @@ h3 { } #disclaimer { - background-color: #1d1f31; + background-color: var(--bg); padding: 24px; margin: 24px 0; } @@ -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; } diff --git a/frontend/src/app/docs/code-template/code-template.component.scss b/frontend/src/app/docs/code-template/code-template.component.scss index 4d3288dfd..960787af0 100644 --- a/frontend/src/app/docs/code-template/code-template.component.scss +++ b/frontend/src/app/docs/code-template/code-template.component.scss @@ -3,7 +3,7 @@ } code { - background-color: #1d1f31; + background-color: var(--bg); font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New; } @@ -25,7 +25,7 @@ li.nav-item { .nav-tabs .nav-link.active { border-bottom: 1px solid #fff; @media (min-width: 676px){ - border-bottom: 1px solid #11131f; + border-bottom: 1px solid var(--active-bg); } } @@ -43,7 +43,7 @@ li.nav-item { padding: 0px; } .nav-tabs .nav-link.active { - border-bottom: 1px solid #11131f; + border-bottom: 1px solid var(--active-bg); } .subtitle { display: flex; @@ -87,7 +87,7 @@ pre { display: block; font-size: 87.5%; color: #f18920; - background-color: #1d1f31; + background-color: var(--bg); padding: 30px; code{ background-color: transparent; diff --git a/frontend/src/app/lightning/channel/channel-box/channel-box.component.scss b/frontend/src/app/lightning/channel/channel-box/channel-box.component.scss index f157f380a..2306dd261 100644 --- a/frontend/src/app/lightning/channel/channel-box/channel-box.component.scss +++ b/frontend/src/app/lightning/channel/channel-box/channel-box.component.scss @@ -13,7 +13,7 @@ } .shared-block { - color: #ffffff66; + color: var(--transparent-fg); font-size: 12px; } diff --git a/frontend/src/app/lightning/channel/channel-close-box/channel-close-box.component.scss b/frontend/src/app/lightning/channel/channel-close-box/channel-close-box.component.scss index f55550eb3..12a8cb53c 100644 --- 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 ) } } diff --git a/frontend/src/app/lightning/channel/channel-preview.component.scss b/frontend/src/app/lightning/channel/channel-preview.component.scss index 6b6ac5152..cdd30204c 100644 --- a/frontend/src/app/lightning/channel/channel-preview.component.scss +++ b/frontend/src/app/lightning/channel/channel-preview.component.scss @@ -34,7 +34,7 @@ } .row.nodes { - background: #181b2d; + background: var(--stat-box-bg); margin: 15px 0 0; } @@ -53,7 +53,7 @@ width: 470px; min-width: 470px; padding: 0; - background: #181b2d; + background: var(--stat-box-bg); max-height: 350px; overflow: hidden; } diff --git a/frontend/src/app/lightning/channel/channel.component.html b/frontend/src/app/lightning/channel/channel.component.html index b9d9e09a4..290199210 100644 --- a/frontend/src/app/lightning/channel/channel.component.html +++ b/frontend/src/app/lightning/channel/channel.component.html @@ -1,7 +1,7 @@
-
Lightning channel
+
Lightning channel

{{ channel.short_id }}

@@ -113,7 +113,7 @@
-
Lightning channel
+
Lightning channel

diff --git a/frontend/src/app/lightning/channels-list/channels-list.component.scss b/frontend/src/app/lightning/channels-list/channels-list.component.scss index 80797b550..f45f162c6 100644 --- a/frontend/src/app/lightning/channels-list/channels-list.component.scss +++ b/frontend/src/app/lightning/channels-list/channels-list.component.scss @@ -3,7 +3,7 @@ } .sats { - color: #ffffff66; + color: var(--transparent-fg); font-size: 12px; top: 0px; } diff --git a/frontend/src/app/lightning/channels-statistics/channels-statistics.component.html b/frontend/src/app/lightning/channels-statistics/channels-statistics.component.html index 31b4c33af..a84def86c 100644 --- a/frontend/src/app/lightning/channels-statistics/channels-statistics.component.html +++ b/frontend/src/app/lightning/channels-statistics/channels-statistics.component.html @@ -1,7 +1,7 @@
avg - | + | med
diff --git a/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss b/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss index 30f88f136..614b9bd94 100644 --- 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; @@ -57,7 +57,7 @@ margin-bottom: 0; } .card-text span { - color: #ffffff66; + color: var(--transparent-fg); font-size: 12px; top: 0px; } @@ -110,5 +110,5 @@ } .inactive { - color: #ffffff66; + color: var(--transparent-fg); } \ No newline at end of file diff --git a/frontend/src/app/lightning/group/group-preview.component.scss b/frontend/src/app/lightning/group/group-preview.component.scss index 712112f5a..f31c33f47 100644 --- a/frontend/src/app/lightning/group/group-preview.component.scss +++ b/frontend/src/app/lightning/group/group-preview.component.scss @@ -20,7 +20,7 @@ width: 100%; margin: 16px 0 0; padding: 20px 12px; - background: #181b2d; + background: var(--stat-box-bg); font-size: 32px; } @@ -46,7 +46,7 @@ min-height: 272px; max-height: 272px; padding: 0; - background: #181b2d; + background: var(--stat-box-bg); overflow: hidden; margin-top: 16px; } diff --git a/frontend/src/app/lightning/group/group.component.html b/frontend/src/app/lightning/group/group.component.html index c1ffe7f6d..c5999da5c 100644 --- a/frontend/src/app/lightning/group/group.component.html +++ b/frontend/src/app/lightning/group/group.component.html @@ -1,5 +1,5 @@
-
Lightning node group
+
Lightning node group
@@ -44,7 +44,7 @@
-
+
diff --git a/frontend/src/app/lightning/group/group.component.scss b/frontend/src/app/lightning/group/group.component.scss index 6deb4ca14..61bc87ca8 100644 --- 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; diff --git a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html index ec59b7432..490a5d706 100644 --- 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 @@
Liquidity Ranking
  - +
@@ -79,7 +79,7 @@
Connectivity Ranking
  - +
diff --git a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss index e6da450df..7fb011146 100644 --- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss +++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss @@ -10,7 +10,7 @@ } .card { - background-color: #1d1f31; + background-color: var(--bg); } .graph-card { @@ -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 { diff --git a/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts b/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts index f20a5123c..7f329eaf2 100644 --- a/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts +++ b/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts @@ -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', @@ -205,7 +205,7 @@ export class NodeFeeChartComponent implements OnInit { splitLine: { lineStyle: { type: 'dotted', - color: '#ffffff66', + color: 'var(--transparent-fg)', opacity: 0.25, } }, diff --git a/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts b/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts index f67c83367..35cd8b236 100644 --- a/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts +++ b/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts @@ -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', @@ -181,7 +181,7 @@ export class NodeStatisticsChartComponent implements OnInit { splitLine: { lineStyle: { type: 'dotted', - color: '#ffffff66', + color: 'var(--transparent-fg)', opacity: 0.25, } }, @@ -217,7 +217,7 @@ export class NodeStatisticsChartComponent implements OnInit { symbol: 'none', lineStyle: { type: 'solid', - color: '#ffffff66', + color: 'var(--transparent-fg)', opacity: 1, width: 1, }, diff --git a/frontend/src/app/lightning/node-statistics/node-statistics.component.scss b/frontend/src/app/lightning/node-statistics/node-statistics.component.scss index dc69a4dae..7b3f778b1 100644 --- 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; @@ -52,7 +52,7 @@ } } .card-text span { - color: #ffffff66; + color: var(--transparent-fg); font-size: 12px; top: 0px; } diff --git a/frontend/src/app/lightning/node/node-preview.component.scss b/frontend/src/app/lightning/node/node-preview.component.scss index da8794010..aac57754d 100644 --- a/frontend/src/app/lightning/node/node-preview.component.scss +++ b/frontend/src/app/lightning/node/node-preview.component.scss @@ -32,7 +32,7 @@ min-height: 408px; max-height: 408px; padding: 0; - background: #181b2d; + background: var(--stat-box-bg); overflow: hidden; margin-top: 6px; } diff --git a/frontend/src/app/lightning/node/node.component.html b/frontend/src/app/lightning/node/node.component.html index 50dab25c7..546b9ecf0 100644 --- a/frontend/src/app/lightning/node/node.component.html +++ b/frontend/src/app/lightning/node/node.component.html @@ -1,7 +1,7 @@
-
Lightning node
+
Lightning node

{{ node.alias }}

@@ -303,7 +303,7 @@
-
Lightning node
+
Lightning node

diff --git a/frontend/src/app/lightning/node/node.component.scss b/frontend/src/app/lightning/node/node.component.scss index 117fc8a2c..9d70bae30 100644 --- 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; @@ -89,7 +89,7 @@ app-fiat { .tlv-type { font-size: 12px; - color: #ffffff66; + color: var(--transparent-fg); } .tlv-payload { diff --git a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html index b8d0dc12f..8be2e2c14 100644 --- a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html +++ b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html @@ -19,7 +19,7 @@
Lightning Nodes Channels World Map
- (Tor nodes excluded) + (Tor nodes excluded)
diff --git 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 index 18edc6ab1..3447348be 100644 --- 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', diff --git a/frontend/src/app/lightning/nodes-channels/node-channels.component.ts b/frontend/src/app/lightning/nodes-channels/node-channels.component.ts index 1954e429a..fce014e77 100644 --- 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 => { diff --git a/frontend/src/app/lightning/nodes-map/nodes-map.component.html b/frontend/src/app/lightning/nodes-map/nodes-map.component.html index d6b793e25..65617f0fd 100644 --- a/frontend/src/app/lightning/nodes-map/nodes-map.component.html +++ b/frontend/src/app/lightning/nodes-map/nodes-map.component.html @@ -4,7 +4,7 @@
Lightning Nodes World Map
- (Tor nodes excluded) + (Tor nodes excluded)
diff --git a/frontend/src/app/lightning/nodes-map/nodes-map.component.ts b/frontend/src/app/lightning/nodes-map/nodes-map.component.ts index 054f1ab6f..50df2f986 100644 --- 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', diff --git a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss index aaea41265..ab8cb92da 100644 --- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss +++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss @@ -93,12 +93,12 @@ } .card-title { font-size: 1rem; - color: #4a68b9; + color: var(--title-fg); } .card-text { font-size: 18px; span { - color: #ffffff66; + color: var(--transparent-fg); font-size: 12px; } } diff --git a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts index a7f6da5c2..9784e0a5b 100644 --- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts +++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.ts @@ -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', @@ -352,7 +352,7 @@ export class NodesNetworksChartComponent implements OnInit, OnChanges { splitLine: { lineStyle: { type: 'dotted', - color: '#ffffff66', + color: 'var(--transparent-fg)', opacity: 0.25, }, }, @@ -375,7 +375,7 @@ export class NodesNetworksChartComponent implements OnInit, OnChanges { splitLine: { lineStyle: { type: 'dotted', - color: '#ffffff66', + color: 'var(--transparent-fg)', opacity: 0.25, }, }, @@ -449,7 +449,7 @@ export class NodesNetworksChartComponent implements OnInit, OnChanges { const now = new Date(); // @ts-ignore this.chartOptions.grid.bottom = 40; - this.chartOptions.backgroundColor = '#11131f'; + this.chartOptions.backgroundColor = 'var(--active-bg)'; this.chartInstance.setOption(this.chartOptions); download(this.chartInstance.getDataURL({ pixelRatio: 2, diff --git a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html index 191a3dbb1..cbe9ed6b1 100644 --- a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html +++ b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html @@ -7,7 +7,7 @@
- (Tor nodes excluded) + (Tor nodes excluded)
diff --git a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.scss b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.scss index f127d88cd..8d41b72d3 100644 --- a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.scss +++ b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.scss @@ -1,5 +1,5 @@ .sats { - color: #ffffff66; + color: var(--transparent-fg); font-size: 12px; top: 0px; } diff --git a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts index 5d80341fe..7eba4f9b7 100644 --- a/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts +++ b/frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts @@ -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: () => { @@ -220,7 +220,7 @@ export class NodesPerCountryChartComponent implements OnInit { onSaveChart() { const now = new Date(); - this.chartOptions.backgroundColor = '#11131f'; + this.chartOptions.backgroundColor = 'var(--active-bg)'; this.chartInstance.setOption(this.chartOptions); download(this.chartInstance.getDataURL({ pixelRatio: 2, diff --git a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html index be7737894..0d982f127 100644 --- a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html +++ b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html @@ -46,7 +46,7 @@
-
+
diff --git a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.scss b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.scss index 97d42298c..cd0c0ad0c 100644 --- a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.scss +++ b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.scss @@ -4,7 +4,7 @@ } .sats { - color: #ffffff66; + color: var(--transparent-fg); font-size: 12px; top: 0px; } diff --git a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html index 52d74c806..e71e6fb7d 100644 --- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html +++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html @@ -33,7 +33,7 @@
- + (Tor nodes excluded)
diff --git a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss index 7879c18b1..b9490d579 100644 --- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss +++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss @@ -89,7 +89,7 @@ } .card-title { font-size: 1rem; - color: #4a68b9; + color: var(--title-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -97,7 +97,7 @@ .card-text { font-size: 18px; span { - color: #ffffff66; + color: var(--transparent-fg); font-size: 12px; } } diff --git a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts index 5599bc255..429d7ee36 100644 --- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts +++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts @@ -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: () => { @@ -275,7 +275,7 @@ export class NodesPerISPChartComponent implements OnInit { onSaveChart(): void { const now = new Date(); - this.chartOptions.backgroundColor = '#11131f'; + this.chartOptions.backgroundColor = 'var(--active-bg)'; this.chartInstance.setOption(this.chartOptions); download(this.chartInstance.getDataURL({ pixelRatio: 2, diff --git a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp-preview.component.scss b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp-preview.component.scss index 2fe34ef5e..ca066073b 100644 --- a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp-preview.component.scss +++ b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp-preview.component.scss @@ -12,7 +12,7 @@ min-height: 360px; max-height: 360px; padding: 0; - background: #181b2d; + background: var(--stat-box-bg); overflow: hidden; margin-top: 0; } diff --git a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html index 865d2d2dd..cfb688b8b 100644 --- a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html +++ b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html @@ -43,7 +43,7 @@
-
+
diff --git a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.scss b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.scss index b043d36f8..6e047152e 100644 --- a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.scss +++ b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.scss @@ -4,7 +4,7 @@ } .sats { - color: #ffffff66; + color: var(--transparent-fg); font-size: 12px; top: 0px; } diff --git a/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.html b/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.html index ef23bc104..11fb9227c 100644 --- 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 @@
Liquidity Ranking
  + style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)">
@@ -22,7 +22,7 @@
Connectivity Ranking
  + style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)">
@@ -36,7 +36,7 @@
Oldest nodes
  + style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)">
diff --git a/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.scss b/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.scss index 28e80d451..0f94397c6 100644 --- a/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.scss +++ b/frontend/src/app/lightning/nodes-rankings-dashboard/nodes-rankings-dashboard.component.scss @@ -9,15 +9,15 @@ } .card { - background-color: #1d1f31; + background-color: var(--bg); } .card-title { font-size: 1rem; - color: #4a68b9; + color: var(--title-fg); } .card-title > a { - color: #4a68b9; + color: var(--title-fg); } .card-text { diff --git a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss index 923a8a3e4..1779394c9 100644 --- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss +++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss @@ -93,12 +93,12 @@ } .card-title { font-size: 1rem; - color: #4a68b9; + color: var(--title-fg); } .card-text { font-size: 18px; span { - color: #ffffff66; + color: var(--transparent-fg); font-size: 12px; } } diff --git a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts index 2763c319f..44f359ae8 100644 --- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts +++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts @@ -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', @@ -239,7 +239,7 @@ export class LightningStatisticsChartComponent implements OnInit, OnChanges { splitLine: { lineStyle: { type: 'dotted', - color: '#ffffff66', + color: 'var(--transparent-fg)', opacity: 0.25, } }, @@ -280,7 +280,7 @@ export class LightningStatisticsChartComponent implements OnInit, OnChanges { symbol: 'none', lineStyle: { type: 'solid', - color: '#ffffff66', + color: 'var(--transparent-fg)', opacity: 1, width: 1, }, @@ -348,7 +348,7 @@ export class LightningStatisticsChartComponent implements OnInit, OnChanges { const now = new Date(); // @ts-ignore this.chartOptions.grid.bottom = 40; - this.chartOptions.backgroundColor = '#11131f'; + this.chartOptions.backgroundColor = 'var(--active-bg)'; this.chartInstance.setOption(this.chartOptions); download(this.chartInstance.getDataURL({ pixelRatio: 2, diff --git a/frontend/src/app/services/theme.service.ts b/frontend/src/app/services/theme.service.ts new file mode 100644 index 000000000..da374bf13 --- /dev/null +++ b/frontend/src/app/services/theme.service.ts @@ -0,0 +1,50 @@ +import { Injectable } from '@angular/core'; +import { Subject } from 'rxjs'; +import { defaultMempoolFeeColors, contrastMempoolFeeColors } from '../app.constants'; +import { StorageService } from './storage.service'; + +@Injectable({ + providedIn: 'root' +}) +export class ThemeService { + style: HTMLLinkElement; + theme: string = 'default'; + themeChanged$: Subject = new Subject(); + mempoolFeeColors: string[] = defaultMempoolFeeColors; + + constructor( + private storageService: StorageService, + ) { + const theme = this.storageService.getValue('theme-preference') || 'default'; + this.apply(theme); + } + + apply(theme) { + this.theme = theme; + if (theme !== 'default') { + if (theme === 'contrast') { + this.mempoolFeeColors = contrastMempoolFeeColors; + } + 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; + if (this.style) { + this.style.remove(); + this.style = null; + } + } + this.storageService.setValue('theme-preference', theme); + this.themeChanged$.next(this.theme); + } +} diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.html b/frontend/src/app/shared/components/global-footer/global-footer.component.html index cc9cb3538..1a93729d7 100644 --- a/frontend/src/app/shared/components/global-footer/global-footer.component.html +++ b/frontend/src/app/shared/components/global-footer/global-footer.component.html @@ -21,11 +21,17 @@
+
+ +
+
+ +
Matrix
-
+

{{ (backendInfo$ | async)?.hostname }} (v{{ (backendInfo$ | async )?.version }}) [{{ (backendInfo$ | async )?.gitCommit | slice:0:8 }}] diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.scss b/frontend/src/app/shared/components/global-footer/global-footer.component.scss index 5467f09c1..2db64e976 100644 --- 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 { diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts index 5e58ef080..72d9eb04d 100644 --- a/frontend/src/app/shared/shared.module.ts +++ b/frontend/src/app/shared/shared.module.ts @@ -34,6 +34,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { LanguageSelectorComponent } from '../components/language-selector/language-selector.component'; import { FiatSelectorComponent } from '../components/fiat-selector/fiat-selector.component'; import { RateUnitSelectorComponent } from '../components/rate-unit-selector/rate-unit-selector.component'; +import { ThemeSelectorComponent } from '../components/theme-selector/theme-selector.component'; import { BrowserOnlyDirective } from './directives/browser-only.directive'; import { ServerOnlyDirective } from './directives/server-only.directive'; import { ColoredPriceDirective } from './directives/colored-price.directive'; @@ -119,6 +120,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir TxFeeRatingComponent, LanguageSelectorComponent, FiatSelectorComponent, + ThemeSelectorComponent, RateUnitSelectorComponent, ScriptpubkeyTypePipe, RelativeUrlPipe, @@ -257,6 +259,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir LanguageSelectorComponent, FiatSelectorComponent, RateUnitSelectorComponent, + ThemeSelectorComponent, ScriptpubkeyTypePipe, RelativeUrlPipe, Hex2asciiPipe, diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 6d132a46a..9d246e8dd 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -1,14 +1,25 @@ +/* Theme */ +$bg: #1d1f31; +$active-bg: #11131f; +$hover-bg: #12131e; +$fg: #fff; +$title-fg: #4a68b9; + +$taproot: #eba814; +$taproot-light: #d5a90a; +$taproot-dark: #9d7c05; + /* Bootstrap */ +$body-bg: $bg; +$body-color: $fg; +$gray-800: $bg; +$gray-700: $fg; -$body-bg: #1d1f31; -$body-color: #fff; -$gray-800: #1d1f31; -$gray-700: #fff; - -$nav-tabs-link-active-bg: #11131f; +$nav-tabs-link-active-bg: $active-bg; $primary: #105fb0; $secondary: #2d3348; +$tertiary: #653b9c; $success: #1a9436; $info: #1bd8f4; @@ -16,44 +27,87 @@ $h5-font-size: 1.15rem !default; $pagination-bg: $body-bg; $pagination-border-color: $gray-800; -$pagination-disabled-bg: #FFF; -$pagination-disabled-border-color: #1d1f31; -$pagination-active-color: #fff; -$pagination-active-bg: #653b9c; -$pagination-hover-bg: #12131e; -$pagination-hover-border-color: #1d1f31; -$pagination-disabled-bg: #1d1f31; +$pagination-disabled-bg: $fg; +$pagination-disabled-border-color: $bg; +$pagination-active-color: $fg; +$pagination-active-bg: $tertiary; +$pagination-hover-bg: $hover-bg; +$pagination-hover-border-color: $bg; +$pagination-disabled-bg: $bg; -$custom-select-indicator-color: #FFF; +$custom-select-indicator-color: $fg; .input-group-text { background-color: #1c2031 !important; border: 1px solid #20263e !important; } -$link-color: #1bd8f4; +$link-color: $info; $link-decoration: none !default; $link-hover-color: darken($link-color, 15%) !default; $link-hover-decoration: underline !default; -$dropdown-bg: #1d1f31; -$dropdown-link-color: #fff; +$dropdown-bg: $bg; +$dropdown-link-color: $fg; -$dropdown-link-hover-color: #fff; -$dropdown-link-hover-bg: #11131f; +$dropdown-link-hover-color: $fg; +$dropdown-link-hover-bg: $active-bg; -$dropdown-link-active-color: #fff; -$dropdown-link-active-bg: #11131f; +$dropdown-link-active-color: $fg; +$dropdown-link-active-bg: $active-bg; @import "bootstrap/scss/bootstrap"; @import 'tlite/tlite.css'; +:root { + --bg: #{$bg}; + --active-bg: #{$active-bg}; + --hover-bg: #{$hover-bg}; + --fg: #{$fg}; + --color-fg: #ffffff; + --title-fg: #{$title-fg}; + + --primary: #{$primary}; + --secondary: #{$secondary}; + --tertiary: #{$tertiary}; + --success: #{$success}; + --info: #{$info}; + + --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); + + --testnet: #1d486f; + --signet: #6f1d5d; + --liquid: #116761; + --liquidtestnet: #494a4a; + + --mainnet-alt: #9339f4; + --testnet-alt: #183550; + --signet-alt: #471850; + --liquidtestnet-alt: #272e46; + + --taproot: #eba814; + --taproot-light: #d5a90a; + --taproot-dark: #9d7c05; + + --green: #3bcc49; + --red: #dc3545; + --yellow: #ffd800; + --grey: #6c757d; + --tooltip-grey: #b1b1b1; +} + html, body { height: 100%; } body { - background-color: #11131f; + background-color: var(--active-bg); padding-bottom: 60px; } @@ -81,7 +135,7 @@ main { position: relative; min-width: 0; word-wrap: break-word; - background-color: #24273e; + background-color: var(--box-bg); background-clip: border-box; border: 1px solid rgba(0,0,0,.125); box-shadow: 0.125rem 0.125rem 0.25rem rgba(0,0,0,0.075); @@ -99,35 +153,35 @@ main { } .navbar-nav.liquid > .active { - background-color: #116761 !important; + background-color: var(--liquid) !important; } .navbar-nav.testnet > .active { - background-color: #1d486f !important; + background-color: var(--testnet) !important; } .navbar-nav.signet > .active { - background-color: #6f1d5d !important; + background-color: var(--signet) !important; } .navbar-nav.liquidtestnet > .active { - background-color: #494a4a !important; + background-color: var(--liquidtestnet) !important; } .form-control { color: #fff; - background-color: #2d3348; + background-color: var(--secondary); border: 1px solid rgba(17, 19, 31, 0.2); } .form-control:focus { color: #fff; - background-color: #2d3348; + background-color: var(--secondary); } .btn-purple { - background-color: #653b9c; - border-color: #653b9c; + background-color: var(--tertiary); + border-color: var(--tertiary); } .btn-purple:not(:disabled):not(.disabled):active, .btn-purple:not(:disabled):not(.disabled).active, .show > .btn-purple.dropdown-toggle { @@ -150,12 +204,12 @@ main { } .form-control.form-control-secondary { - color: #fff; - background-color: #2d3348; - border: 1px solid #2d3348; + color: var(--fg); + background-color: var(--secondary); + border: 1px solid var(--secondary); } .form-control.form-control-secondary:focus { - color: #fff; + color: var(--fg); } .h2-match-table { @@ -209,20 +263,20 @@ main { } .symbol { - color: #ffffff66; + color: var(--transparent-fg); font-size: 12px; } .progress-text { span { - color: #fff !important; + color: var(--fg) !important; } } .block-size, .blocks-container { .symbol { font-size: 16px; - color: #fff !important; + color: var(--fg) !important; } } @@ -232,17 +286,17 @@ main { } .title-block { - color: #FFF; + color: var(--fg); padding-top: 20px; padding-bottom: 10px; - border-top: 3px solid #FFF; + border-top: 3px solid var(--fg); display: flex; flex-direction: row; justify-content: space-between; } .title-address, .title-asset { - color: #FFF; + color: var(--fg); padding-bottom: 10px; display: flex; flex-direction: column; @@ -281,11 +335,11 @@ main { } .close { - color: #fff; + color: var(--fg); } .close:hover { - color: #fff; + color: var(--fg); } .white-color { @@ -293,19 +347,19 @@ main { } .green-color { - color: #3bcc49; + color: var(--green); } .red-color { - color: #dc3545; + color: var(--red); } .yellow-color { - color: #ffd800; + color: var(--yellow); } .table-striped tbody tr:nth-of-type(odd) { - background-color: #181b2d; + background-color: var(--stat-box-bg); } .bordertop { @@ -333,10 +387,10 @@ html:lang(ru) .card-title { .tx-wrapper-tooltip-chart, .fees-wrapper-tooltip-chart { - background: rgba(#11131f, 0.95); + background: rgba($active-bg, 0.95); border-radius: 4px; box-shadow: 1px 1px 10px rgba(0,0,0,0.5); - color: #b1b1b1; + color: var(--tooltip-grey); display: flex; flex-direction: column; justify-content: space-between; @@ -346,7 +400,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; @@ -362,7 +416,7 @@ html:lang(ru) .card-title { font-size: 12px; font-weight: 700; margin-bottom: 2px; - color: #fff; + color: var(--fg); .total-value { float: right; } @@ -421,7 +475,7 @@ html:lang(ru) .card-title { .total-label { width: 100%; text-align: left; - color: #fff; + color: var(--fg); margin-top: 5px; font-size: 14px; span { @@ -437,7 +491,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; @@ -517,8 +571,8 @@ html:lang(ru) .card-title { .fees-wrapper-tooltip-chart-advanced, .tx-wrapper-tooltip-chart-advanced { - background: rgba(#1d1f31, 0.98); width: 300px; + background: rgba($bg, 0.98); thead { th { @@ -672,27 +726,27 @@ h1, h2, h3 { } .progress-mempool { - background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #105fb0 0%, #9339f4 100%); + background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, var(--mainnet-alt) 100%); } .progress-mempool.testnet { - background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #1d486f 0%, #183550 100%); + background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--testnet) 0%, var(--testnet-alt) 100%); } .progress-mempool.signet { - background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #6f1d5d 0%, #471850 100%); + background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--signet) 0%, var(--signet-alt) 100%); } .progress-mempool.liquid { - background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #116761 0%, #183550 100%); + background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--liquid) 0%, var(--testnet-alt) 100%); } .progress-dark { - background-color: #181b2d; + background-color: var(--stat-box-bg); } .progress-darklight { - background-color: #24273e; + background-color: var(--box-bg); } .progress-light { @@ -700,12 +754,12 @@ h1, h2, h3 { } .progress.progress-health { - background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #105fb0 0%, #1a9436 100%); + background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, $success 100%); justify-content: flex-end; } .progress-bar.progress-bar-health { - background: #2d3348; + background: var(--secondary); } .mt-2-5, .my-2-5 { @@ -713,9 +767,9 @@ h1, h2, h3 { } .alert-mempool { - color: #ffffff; - background-color: #653b9c; - border-color: #3a1c61; + color: var(--fg); + background-color: var(--tertiary); + border-color: var(--alert-bg); width: 100%; display: inline-flex; flex-direction: column; @@ -1081,7 +1135,7 @@ th { display: block; width: 100%; padding: 1rem 2rem; - color: #fff; + color: var(--fg); font-weight: bold; &:focus, &:hover, &:active { text-decoration: none; @@ -1095,8 +1149,8 @@ th { } .collapsed { - background-color: #2d3348; - color: #1bd8f4; + background-color: var(--secondary); + color: var(--info); } } @@ -1114,7 +1168,7 @@ th { display: inline-block; width: 100%; justify-content: space-between; - background: #1d1f31; + background: var(--bg); margin: 0; @media (min-width: 550px) { width: auto; @@ -1140,21 +1194,21 @@ th { // Blinking block @keyframes shadowyBackground { 0% { - box-shadow: -10px -15px 75px rgba(#eba814, 1); + box-shadow: -10px -15px 75px rgba($taproot, 1); } 50% { - box-shadow: -10px -15px 75px rgba(#eba814, .3); + box-shadow: -10px -15px 75px rgba($taproot, .3); } 100% { - box-shadow: -10px -15px 75px rgba(#eba814, 1); + box-shadow: -10px -15px 75px rgba($taproot, 1); } } .blink-bg { - color: #fff; - background: repeating-linear-gradient(#9d7c05, #9d7c05 0.163525%, #d5a90a 100%) !important; + color: var(--fg); + background: repeating-linear-gradient($taproot-dark, $taproot-dark 0.163525%, $taproot-light 100%) !important; animation: shadowyBackground 1s infinite; - box-shadow: -10px -15px 75px rgba(#eba814, 1); + box-shadow: -10px -15px 75px rgba($taproot, 1); transition: 100ms all ease-in; } diff --git a/frontend/src/theme-contrast.scss b/frontend/src/theme-contrast.scss new file mode 100644 index 000000000..6c5023466 --- /dev/null +++ b/frontend/src/theme-contrast.scss @@ -0,0 +1,100 @@ +/* Theme */ +$bg: #11131f; +$active-bg: #000000; +$hover-bg: #12131e; +$fg: #fff; +$title-fg: #2055e3; + +$taproot: #eba814; +$taproot-light: #d5a90a; +$taproot-dark: #9d7c05; + +/* Bootstrap */ +$body-bg: $bg; +$body-color: $fg; +$gray-800: $bg; +$gray-700: $fg; + +$nav-tabs-link-active-bg: $active-bg; + +$primary: #007cfa; +$secondary: #272f4e; +$tertiary: #6225b2; +$success: #0aab2f; +$info: #10e0ff; + +$h5-font-size: 1.15rem !default; + +$pagination-bg: $body-bg; +$pagination-border-color: $gray-800; +$pagination-disabled-bg: $fg; +$pagination-disabled-border-color: $bg; +$pagination-active-color: $fg; +$pagination-active-bg: $tertiary; +$pagination-hover-bg: $hover-bg; +$pagination-hover-border-color: $bg; +$pagination-disabled-bg: $bg; + +$custom-select-indicator-color: $fg; + +.input-group-text { + background-color: #1c2031 !important; + border: 1px solid #20263e !important; +} + +$link-color: $info; +$link-decoration: none !default; +$link-hover-color: darken($link-color, 15%) !default; +$link-hover-decoration: underline !default; + +$dropdown-bg: $bg; +$dropdown-link-color: $fg; + +$dropdown-link-hover-color: $fg; +$dropdown-link-hover-bg: $active-bg; + +$dropdown-link-active-color: $fg; +$dropdown-link-active-bg: $active-bg; + +:root { + --bg: #{$bg}; + --active-bg: #{$active-bg}; + --hover-bg: #{$hover-bg}; + --fg: #{$fg}; + --color-fg: #fff; + --title-fg: #{$title-fg}; + + --primary: #{$primary}; + --secondary: #{$secondary}; + --tertiary: #{$tertiary}; + --success: #{$success}; + --info: #{$info}; + + --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); + + --testnet: #1d486f; + --signet: #6f1d5d; + --liquid: #116761; + --liquidtestnet: #494a4a; + + --mainnet-alt: #9339f4; + --testnet-alt: #183550; + --signet-alt: #471850; + --liquidtestnet-alt: #272e46; + + --taproot: #eba814; + --taproot-light: #d5a90a; + --taproot-dark: #9d7c05; + + --green: #83fd00; + --red: #ff3d00; + --yellow: #ffcc00; + --grey: #7e7e7e; + --tooltip-grey: #b1b1b1; +}