convert to CSS variables

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

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