lore accurate colors

index.html

@@ -38,6 +38,9 @@
             <div class="app-bar-content">
                 <span class="material-icons">directions_car</span>
                 <h1>Roadworthiness Sticker Generator</h1>
+                <a href="https://git.shihaam.dev/shihaam/roadworthiness-sticker-generator" target="_blank" rel="noopener" class="git-link" title="View Source">
+                    <span class="material-icons">code</span>
+                </a>
             </div>
         </header>
 

styles.css

@@ -108,15 +108,15 @@
 /* CSS Custom Properties - Material Design 3 inspired */
 :root {
     /* Light theme (default) */
-    --md-sys-color-primary: #1976D2;
-    --md-sys-color-primary-dark: #1565C0;
-    --md-sys-color-on-primary: #FFFFFF;
-    --md-sys-color-surface: #FAFAFA;
-    --md-sys-color-surface-container: #FFFFFF;
+    --md-sys-color-primary: #ffa31a;
+    --md-sys-color-primary-dark: #e8920f;
+    --md-sys-color-on-primary: #1b1b1b;
+    --md-sys-color-surface: #ffffff;
+    --md-sys-color-surface-container: #ffffff;
     --md-sys-color-surface-variant: #E3E3E3;
-    --md-sys-color-on-surface: #1C1B1F;
-    --md-sys-color-on-surface-variant: #49454F;
-    --md-sys-color-outline: #79747E;
+    --md-sys-color-on-surface: #1b1b1b;
+    --md-sys-color-on-surface-variant: #292929;
+    --md-sys-color-outline: #808080;
     --md-sys-color-outline-variant: #CAC4D0;
     --md-sys-color-background: #F5F5F5;
     --md-sys-color-error: #B3261E;
@@ -141,21 +141,21 @@
 /* Dark theme - follows system preference */
 @media (prefers-color-scheme: dark) {
     :root {
-        --md-sys-color-primary: #90CAF9;
-        --md-sys-color-primary-dark: #64B5F6;
-        --md-sys-color-on-primary: #003258;
-        --md-sys-color-surface: #1E1E1E;
-        --md-sys-color-surface-container: #2D2D2D;
-        --md-sys-color-surface-variant: #3D3D3D;
-        --md-sys-color-on-surface: #E6E1E5;
+        --md-sys-color-primary: #ffa31a;
+        --md-sys-color-primary-dark: #e8920f;
+        --md-sys-color-on-primary: #1b1b1b;
+        --md-sys-color-surface: #1b1b1b;
+        --md-sys-color-surface-container: #292929;
+        --md-sys-color-surface-variant: #292929;
+        --md-sys-color-on-surface: #ffffff;
         --md-sys-color-on-surface-variant: #CAC4D0;
-        --md-sys-color-outline: #938F99;
-        --md-sys-color-outline-variant: #49454F;
-        --md-sys-color-background: #121212;
+        --md-sys-color-outline: #808080;
+        --md-sys-color-outline-variant: #404040;
+        --md-sys-color-background: #1b1b1b;
         --md-sys-color-error: #F2B8B5;
         --md-sys-color-success: #81C784;
-        --md-sys-color-preview-bg: #2D2D2D;
-        --md-sys-color-preview-pattern: #3D3D3D;
+        --md-sys-color-preview-bg: #292929;
+        --md-sys-color-preview-pattern: #1b1b1b;
 
         --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.24);
         --md-sys-elevation-2: 0 2px 4px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.3);
@@ -221,6 +221,29 @@ body {
     color: var(--md-sys-color-primary);
 }
 
+.app-bar .git-link {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    color: var(--md-sys-color-on-surface-variant);
+    text-decoration: none;
+    transition: background-color 0.2s, color 0.2s;
+}
+
+.app-bar .git-link:hover {
+    background-color: var(--md-sys-color-surface-variant);
+    color: var(--md-sys-color-primary);
+}
+
+.app-bar .git-link .material-icons {
+    font-size: 24px;
+    color: inherit;
+}
+
 /* Main Content */
 .main-content {
     flex: 1;