Skip to content

Commit 762df40

Browse files
ishaan-jaffishaan-jaff
authored
Merge pull request #2 from Chesars/feat/dark-light-theme-support
Add dark/light theme support
2 parents 6276f3f + 84c8dac commit 762df40

File tree

4 files changed

+202
-150
lines changed

4 files changed

+202
-150
lines changed

‎src/App.svelte‎

Lines changed: 54 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -373,8 +373,8 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
373373
}
374374
375375
.container {
376-
background-color: #ffffff;
377-
color: #1a1a1a;
376+
background-color: var(--bg-color);
377+
color: var(--text-color);
378378
}
379379
380380
/* Hero Section */
@@ -383,24 +383,24 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
383383
padding: 5rem 2rem 4rem;
384384
max-width: 900px;
385385
margin: 0 auto;
386-
background-color: #ffffff;
387-
color: #1a1a1a;
386+
background-color: var(--bg-color);
387+
color: var(--text-color);
388388
}
389389
390390
.hero-title {
391391
font-size: 4rem;
392392
font-weight: 700;
393393
line-height: 1.1;
394394
margin: 0 0 1.25rem 0;
395-
color: #1a1a1a;
395+
color: var(--text-color);
396396
letter-spacing: -0.03em;
397397
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
398398
}
399399
400400
.hero-subtitle {
401401
font-size: 1.25rem;
402402
line-height: 1.5;
403-
color: #6b7280;
403+
color: var(--muted-color);
404404
margin: 0 0 2rem 0;
405405
max-width: 700px;
406406
margin-left: auto;
@@ -430,27 +430,27 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
430430
}
431431
432432
.btn-primary {
433-
background-color: #000;
434-
color: #fff;
435-
border-color: #000;
433+
background-color: var(--text-color);
434+
color: var(--bg-color);
435+
border-color: var(--text-color);
436436
}
437437
438438
.btn-primary:hover {
439-
background-color: #333;
440-
border-color: #333;
439+
background-color: var(--text-secondary);
440+
border-color: var(--text-secondary);
441441
transform: translateY(-1px);
442442
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
443443
}
444444
445445
.btn-secondary {
446-
background-color: #fff;
447-
color: var(--contrast);
448-
border-color: #e5e5e5;
446+
background-color: var(--bg-color);
447+
color: var(--text-color);
448+
border-color: var(--border-color);
449449
}
450450
451451
.btn-secondary:hover {
452-
border-color: #d4d4d4;
453-
background-color: #fafafa;
452+
border-color: var(--border-color-strong);
453+
background-color: var(--hover-bg);
454454
}
455455
456456
/* Search Section */
@@ -485,16 +485,17 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
485485
width: 100%;
486486
padding: 0.875rem 1rem 0.875rem 3rem;
487487
font-size: 1rem;
488-
border: 1px solid #d1d5db;
488+
border: 1px solid var(--border-color-strong);
489489
border-radius: 8px;
490-
background-color: #ffffff;
490+
background-color: var(--bg-color);
491+
color: var(--text-color);
491492
transition: all 0.2s ease;
492493
height: 48px;
493494
box-sizing: border-box;
494495
}
495496
496497
.search-input:hover {
497-
border-color: #9ca3af;
498+
border-color: var(--muted-color);
498499
}
499500
500501
.search-input:focus {
@@ -530,16 +531,17 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
530531
.filter-input {
531532
padding: 0.875rem 1rem;
532533
font-size: 1rem;
533-
border: 1px solid #d1d5db;
534+
border: 1px solid var(--border-color-strong);
534535
border-radius: 8px;
535-
background-color: #ffffff;
536+
background-color: var(--bg-color);
537+
color: var(--text-color);
536538
transition: all 0.2s ease;
537539
height: 48px;
538540
box-sizing: border-box;
539541
}
540542
541543
.filter-input:hover {
542-
border-color: #9ca3af;
544+
border-color: var(--muted-color);
543545
}
544546
545547
.filter-input:focus {
@@ -560,13 +562,14 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
560562
}
561563
562564
.add-model-section a {
563-
color: #2563eb;
565+
color: var(--link-color);
564566
text-decoration: none;
565567
font-size: 0.95rem;
566568
}
567569
568570
.add-model-section a:hover {
569571
text-decoration: underline;
572+
color: var(--link-hover);
570573
}
571574
572575
/* Table styles */
@@ -580,15 +583,15 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
580583
table {
581584
width: 100%;
582585
border-collapse: collapse;
583-
background: #ffffff;
586+
background: var(--card-bg);
584587
border-radius: 12px;
585588
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
586-
border: 1px solid #e5e7eb;
589+
border: 1px solid var(--border-color);
587590
}
588591
589592
thead {
590-
background-color: #ffffff;
591-
border-bottom: 1px solid #e5e7eb;
593+
background-color: var(--card-bg);
594+
border-bottom: 1px solid var(--border-color);
592595
}
593596
594597
th {
@@ -598,35 +601,35 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
598601
font-size: 0.75rem;
599602
text-transform: uppercase;
600603
letter-spacing: 0.05em;
601-
color: #6b7280;
602-
background-color: #ffffff;
604+
color: var(--muted-color);
605+
background-color: var(--card-bg);
603606
}
604607
605608
tbody {
606-
background-color: #ffffff;
609+
background-color: var(--card-bg);
607610
}
608611
609612
tbody tr.model-row {
610-
border-bottom: 1px solid #e5e7eb;
613+
border-bottom: 1px solid var(--border-color);
611614
transition: background-color 0.15s ease;
612615
cursor: pointer;
613-
background-color: #ffffff;
616+
background-color: var(--card-bg);
614617
}
615618
616619
tbody tr.model-row:hover {
617-
background-color: #f9fafb;
620+
background-color: var(--hover-bg);
618621
}
619622
620623
tbody tr.model-row.expanded {
621-
background-color: #f5f5f5;
624+
background-color: var(--bg-tertiary);
622625
}
623626
624627
tbody tr.model-row:last-child {
625628
border-bottom: none;
626629
}
627630
628631
tbody tr.expanded-content {
629-
border-bottom: 1px solid #e5e7eb;
632+
border-bottom: 1px solid var(--border-color);
630633
}
631634
632635
tbody tr.expanded-content td {
@@ -637,14 +640,14 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
637640
padding: 0.875rem 1.5rem;
638641
vertical-align: middle;
639642
font-size: 0.9375rem;
640-
background-color: #ffffff;
641-
color: #1a1a1a;
643+
background-color: var(--card-bg);
644+
color: var(--text-color);
642645
}
643646
644647
.model-name {
645648
font-weight: 500;
646649
min-width: 300px;
647-
color: #1a1a1a;
650+
color: var(--text-color);
648651
}
649652
650653
.model-info {
@@ -673,27 +676,27 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
673676
border: none;
674677
border-radius: 4px;
675678
cursor: pointer;
676-
color: #d1d5db;
679+
color: var(--muted-color);
677680
transition: all 0.15s ease;
678681
margin-left: 0.5rem;
679682
}
680683
681684
.copy-button:hover {
682-
background-color: #f3f4f6;
683-
color: #6b7280;
685+
background-color: var(--hover-bg);
686+
color: var(--text-secondary);
684687
}
685688
686689
.copy-button:active {
687690
transform: scale(0.95);
688-
background-color: #e5e7eb;
691+
background-color: var(--bg-tertiary);
689692
}
690693
691694
.provider-avatar {
692695
width: 32px;
693696
height: 32px;
694697
border-radius: 50%;
695-
background-color: white;
696-
color: white;
698+
background-color: var(--bg-color);
699+
color: var(--text-color);
697700
display: flex;
698701
align-items: center;
699702
justify-content: center;
@@ -718,8 +721,8 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
718721
display: flex;
719722
align-items: center;
720723
justify-content: center;
721-
background-color: #1a1a1a;
722-
color: white;
724+
background-color: var(--text-color);
725+
color: var(--bg-color);
723726
font-weight: 600;
724727
font-size: 0.75rem;
725728
border-radius: 50%;
@@ -742,8 +745,8 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
742745
}
743746
744747
.code-block {
745-
background-color: #f8f9fa;
746-
border-top: 1px solid #e5e7eb;
748+
background-color: var(--code-bg);
749+
border-top: 1px solid var(--border-color);
747750
margin: 0;
748751
padding: 1.5rem;
749752
overflow-x: auto;
@@ -754,10 +757,12 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
754757
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
755758
font-size: 0.875rem;
756759
line-height: 1.6;
760+
background-color: var(--code-bg) !important;
757761
}
758762
759763
.code-block code {
760-
color: #24292f;
764+
color: var(--code-text) !important;
765+
background-color: var(--code-bg) !important;
761766
display: block;
762767
}
763768

0 commit comments

Comments
 (0)