feat: use css variables for svg icon colors

static/app-icon.svg

@@ -1,8 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
   <defs>
     <radialGradient id="bg" cx="35%" cy="35%" r="75%">
-      <stop offset="0%" stop-color="#FB923C" />
+      <stop offset="0%" style="stop-color: var(--accent, #0466c8)" />
-      <stop offset="100%" stop-color="#C2410C" />
+      <stop offset="100%" style="stop-color: var(--accent-dark, #1d4ed8)" />
     </radialGradient>
   </defs>
 

static/apple-touch-icon-120x120-precomposed.svg

@@ -1,8 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
   <defs>
     <radialGradient id="bg" cx="35%" cy="35%" r="75%">
-      <stop offset="0%" stop-color="#FB923C" />
+      <stop offset="0%" style="stop-color: var(--accent, #0466c8)" />
-      <stop offset="100%" stop-color="#C2410C" />
+      <stop offset="100%" style="stop-color: var(--accent-dark, #1d4ed8)" />
     </radialGradient>
   </defs>
 

static/apple-touch-icon-120x120.svg

@@ -1,8 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
   <defs>
     <radialGradient id="bg" cx="35%" cy="35%" r="75%">
-      <stop offset="0%" stop-color="#FB923C" />
+      <stop offset="0%" style="stop-color: var(--accent, #0466c8)" />
-      <stop offset="100%" stop-color="#C2410C" />
+      <stop offset="100%" style="stop-color: var(--accent-dark, #1d4ed8)" />
     </radialGradient>
   </defs>
 

static/apple-touch-icon-precomposed.svg

@@ -1,8 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
   <defs>
     <radialGradient id="bg" cx="35%" cy="35%" r="75%">
-      <stop offset="0%" stop-color="#FB923C" />
+      <stop offset="0%" style="stop-color: var(--accent, #0466c8)" />
-      <stop offset="100%" stop-color="#C2410C" />
+      <stop offset="100%" style="stop-color: var(--accent-dark, #1d4ed8)" />
     </radialGradient>
   </defs>
 

static/apple-touch-icon.svg

@@ -1,8 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
   <defs>
     <radialGradient id="bg" cx="35%" cy="35%" r="75%">
-      <stop offset="0%" stop-color="#FB923C" />
+      <stop offset="0%" style="stop-color: var(--accent, #0466c8)" />
-      <stop offset="100%" stop-color="#C2410C" />
+      <stop offset="100%" style="stop-color: var(--accent-dark, #1d4ed8)" />
     </radialGradient>
   </defs>
 

static/favicon.svg

@@ -1,8 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
   <defs>
     <radialGradient id="bg" cx="35%" cy="35%" r="75%">
-      <stop offset="0%" stop-color="#FB923C" />
+      <stop offset="0%" style="stop-color: var(--accent, #0466c8)" />
-      <stop offset="100%" stop-color="#C2410C" />
+      <stop offset="100%" style="stop-color: var(--accent-dark, #1d4ed8)" />
     </radialGradient>
     <clipPath id="clip">
       <circle cx="50" cy="50" r="45" />

static/readme-logo-dark.svg

@@ -1,8 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
   <defs>
     <radialGradient id="bg" cx="35%" cy="35%" r="75%">
-      <stop offset="0%" stop-color="#FB923C" />
+      <stop offset="0%" style="stop-color: var(--accent, #0466c8)" />
-      <stop offset="100%" stop-color="#C2410C" />
+      <stop offset="100%" style="stop-color: var(--accent-dark, #1d4ed8)" />
     </radialGradient>
     <clipPath id="clip">
       <circle cx="50" cy="50" r="45" />

static/readme-logo-light.svg

@@ -1,8 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
   <defs>
     <radialGradient id="bg" cx="35%" cy="35%" r="75%">
-      <stop offset="0%" stop-color="#FB923C" />
+      <stop offset="0%" style="stop-color: var(--accent, #0466c8)" />
-      <stop offset="100%" stop-color="#C2410C" />
+      <stop offset="100%" style="stop-color: var(--accent-dark, #1d4ed8)" />
     </radialGradient>
     <clipPath id="clip">
       <circle cx="50" cy="50" r="45" />

static/style.css

@@ -16,7 +16,7 @@
   --color-foreground-muted: #6a6b70;
   --color-foreground: #f8f9fa;
 
-  --color-accent: #FB923C;
+  --color-accent: #0466c8;
 }
 
 :root {
@@ -66,7 +66,8 @@
   color-scheme: dark;
 }
 
-html, body {
+html,
+body {
   background-color: var(--color-background);
   color: var(--text);
 }
@@ -74,6 +75,7 @@ html, body {
 .scrollbar-hide::-webkit-scrollbar {
   display: none;
 }
+
 .scrollbar-hide {
   -ms-overflow-style: none;
   scrollbar-width: none;
@@ -84,17 +86,21 @@ html, body {
     display: block;
     height: 8px;
   }
+
   .scrollbar-hide::-webkit-scrollbar-track {
     background: rgba(255, 255, 255, 0.05);
     border-radius: 4px;
   }
+
   .scrollbar-hide::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, 0.2);
     border-radius: 4px;
   }
+
   .scrollbar-hide::-webkit-scrollbar-thumb:hover {
     background: rgba(255, 255, 255, 0.3);
   }
+
   button.in-watchlist .watchlist-icon {
     fill: currentColor !important;
   }