Skip to content

Commit 0b76161

Browse files
JHWelchJHWelch
committed
Use variables for dark mode
1 parent 6ed6a5d commit 0b76161

1 file changed

Lines changed: 99 additions & 78 deletions

File tree

‎src/ui/css/diff2html.css‎

Lines changed: 99 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -386,125 +386,146 @@
386386
/**
387387
* Dark Mode Colors
388388
*/
389+
.d2h-wrapper {
390+
--d2h-dark-color: #d0d0d0;
391+
--d2h-dark-bg-color: #272822;
392+
--d2h-dark-border-color: #494b40;
393+
--d2h-dark-ligher-border: #66695a;
394+
395+
--d2h-dark-del-bg-color: #905a5c;
396+
--d2h-dark-del-highlight-bg-color: #604243;
397+
--d2h-dark-del-border-color: #a07c7e;
398+
399+
--d2h-dark-ins-bg-color: #177016;
400+
--d2h-dark-ins-highlight-bg-color: #0f4a07;
401+
--d2h-dark-ins-border-color: #219f1f;
402+
403+
--d2h-dark-info-bg-color: #32342c;
404+
--d2h-dark-info-color: #929292;
405+
406+
--d2h-dark-change-color: #d0b44c;
407+
--d2h-dark-moved-color: #3572b0;
408+
}
409+
389410
.d2h-dark-color-scheme .d2h-files-diff,
390411
.d2h-dark-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
391-
background-color: #272822;
392-
color: #d0d0d0;
412+
background-color: var(--d2h-dark-bg-color);
413+
color: var(--d2h-dark-color);
393414
}
394415

395416
.d2h-dark-color-scheme .d2h-wrapper {
396-
color: #d0d0d0;
397-
background-color: #272822;
417+
color: var(--d2h-dark-color);
418+
background-color: var(--d2h-dark-bg-color);
398419
}
399420

400421
.d2h-dark-color-scheme .d2h-file-header {
401-
color: #d0d0d0;
402-
background-color: #272822;
403-
border-bottom: #494b40;
422+
color: var(--d2h-dark-color);
423+
background-color: var(--d2h-dark-bg-color);
424+
border-bottom: var(--d2h-dark-border-color);
404425
}
405426

406427
.d2h-dark-color-scheme .d2h-code-line del,
407428
.d2h-dark-color-scheme .d2h-code-side-line del {
408-
background-color: #604243;
429+
background-color: var(--d2h-dark-del-highlight-bg-color);
409430
}
410431

411432
.d2h-dark-color-scheme .d2h-code-line ins,
412433
.d2h-dark-color-scheme .d2h-code-side-line ins {
413-
background-color: #195219;
434+
background-color: var(--d2h-dark-ins-highlight-bg-color);
414435
}
415436

416437
.d2h-dark-color-scheme .d2h-code-side-linenumber {
417-
background-color: #272822;
418-
color: #d0d0d0;
419-
border-color: #494b40;
438+
background-color: var(--d2h-dark-bg-color);
439+
color: var(--d2h-dark-color);
440+
border-color: var(--d2h-dark-border-color);
420441
}
421442

422443
.d2h-dark-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder,
423444
.d2h-dark-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
424-
background-color: #494b40;
425-
border-color: #66695a;
445+
background-color: var(--d2h-dark-border-color);
446+
border-color: var(--d2h-dark-ligher-border);
426447
}
427448

428449
.d2h-dark-color-scheme .d2h-del {
429-
background-color: #905a5c;
430-
border-color: #a07c7e;
450+
background-color: var(--d2h-dark-del-bg-color);
451+
border-color: var(--d2h-dark-del-border-color);
431452
}
432453

433454
.d2h-dark-color-scheme .d2h-ins {
434-
background-color: #177016;
435-
border-color: #219f1f;
455+
background-color: var(--d2h-dark-ins-bg-color);
456+
border-color: var(--d2h-dark-ins-border-color);
436457
}
437458

438459
.d2h-dark-color-scheme .d2h-info {
439-
background-color: #32342c;
440-
color: #929292;
441-
border-color: #272822;
460+
background-color: var(--d2h-dark-info-bg-color);
461+
color: var(--d2h-dark-info-color);
462+
border-color: var(--d2h-dark-bg-color);
442463
}
443464

444465
.d2h-dark-color-scheme .d2h-file-diff .d2h-del.d2h-change {
445-
background-color: #d0b44c;
466+
background-color: var(--d2h-dark-change-color);
446467
}
447468

448469
.d2h-dark-color-scheme .d2h-file-diff .d2h-ins.d2h-change {
449-
background-color: #d0b44c;
470+
background-color: var(--d2h-dark-change-color);
450471
}
451472

452473
.d2h-dark-color-scheme .d2h-file-wrapper {
453-
border: 1px solid #494b40;
474+
border: 1px solid var(--d2h-dark-border-color);
454475
}
455476

456477
.d2h-dark-color-scheme .d2h-file-collapse {
457-
border: 1px solid #272822;
478+
border: 1px solid var(--d2h-dark-bg-color);
458479
}
459480

460481
.d2h-dark-color-scheme .d2h-file-collapse.d2h-selected {
461-
background-color: #272822;
482+
background-color: var(--d2h-dark-bg-color);
462483
}
463484

464485
.d2h-dark-color-scheme .d2h-code-linenumber {
465-
background-color: #272822;
466-
color: #d0d0d0;
467-
border-color: #272822;
486+
background-color: var(--d2h-dark-bg-color);
487+
color: var(--d2h-dark-color);
488+
border-color: var(--d2h-dark-bg-color);
468489
}
469490

470491
.d2h-dark-color-scheme .d2h-file-list-wrapper a {
471-
color: #3572b0;
492+
color: var(--d2h-dark-moved-color);
472493
}
473494

474495
.d2h-dark-color-scheme .d2h-file-list-wrapper a:visited {
475-
color: #3572b0;
496+
color: var(--d2h-dark-moved-color);
476497
}
477498

478499
.d2h-dark-color-scheme .d2h-file-list > li {
479-
border-bottom: #272822 solid 1px;
500+
border-bottom: var(--d2h-dark-bg-color) solid 1px;
480501
}
481502

482503
.d2h-dark-color-scheme .d2h-changed {
483-
color: #d0b44c;
504+
color: var(--d2h-dark-change-color);
484505
}
485506

486507
.d2h-dark-color-scheme .d2h-moved {
487-
color: #3572b0;
508+
color: var(--d2h-dark-moved-color);
488509
}
489510

490511
.d2h-dark-color-scheme .d2h-tag {
491-
background-color: #272822;
512+
background-color: var(--d2h-dark-bg-color);
492513
}
493514

494515
.d2h-dark-color-scheme .d2h-deleted-tag {
495-
border: #a07c7e 1px solid;
516+
border: var(--d2h-dark-del-border-color) 1px solid;
496517
}
497518

498519
.d2h-dark-color-scheme .d2h-added-tag {
499-
border: #177016 1px solid;
520+
border: var(--d2h-dark-ins-bg-color) 1px solid;
500521
}
501522

502523
.d2h-dark-color-scheme .d2h-changed-tag {
503-
border: #d0b44c 1px solid;
524+
border: var(--d2h-dark-change-color) 1px solid;
504525
}
505526

506527
.d2h-dark-color-scheme .d2h-moved-tag {
507-
border: #3572b0 1px solid;
528+
border: var(--d2h-dark-moved-color) 1px solid;
508529
}
509530

510531
/**
@@ -513,122 +534,122 @@
513534
@media (prefers-color-scheme: dark) {
514535
.d2h-auto-color-scheme .d2h-files-diff,
515536
.d2h-auto-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
516-
background-color: #272822;
517-
color: #d0d0d0;
537+
background-color: var(--d2h-dark-bg-color);
538+
color: var(--d2h-dark-color);
518539
}
519540

520541
.d2h-auto-color-scheme .d2h-wrapper {
521-
color: #d0d0d0;
522-
background-color: #272822;
542+
color: var(--d2h-dark-color);
543+
background-color: var(--d2h-dark-bg-color);
523544
}
524545

525546
.d2h-auto-color-scheme .d2h-file-header {
526-
color: #d0d0d0;
527-
background-color: #272822;
528-
border-bottom: #494b40;
547+
color: var(--d2h-dark-color);
548+
background-color: var(--d2h-dark-bg-color);
549+
border-bottom: var(--d2h-dark-border-color);
529550
}
530551

531552
.d2h-auto-color-scheme .d2h-code-line del,
532553
.d2h-auto-color-scheme .d2h-code-side-line del {
533-
background-color: #604243;
554+
background-color: var(--d2h-dark-del-highlight-bg-color);
534555
}
535556

536557
.d2h-auto-color-scheme .d2h-code-line ins,
537558
.d2h-auto-color-scheme .d2h-code-side-line ins {
538-
background-color: #195219;
559+
background-color: var(--d2h-dark-ins-highlight-bg-color);
539560
}
540561

541562
.d2h-auto-color-scheme .d2h-code-side-linenumber {
542-
background-color: #272822;
543-
color: #d0d0d0;
544-
border-color: #494b40;
563+
background-color: var(--d2h-dark-bg-color);
564+
color: var(--d2h-dark-color);
565+
border-color: var(--d2h-dark-border-color);
545566
}
546567

547568
.d2h-auto-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder,
548569
.d2h-auto-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
549-
background-color: #494b40;
550-
border-color: #66695a;
570+
background-color: var(--d2h-dark-border-color);
571+
border-color: var(--d2h-dark-ligher-border);
551572
}
552573

553574
.d2h-auto-color-scheme .d2h-del {
554-
background-color: #905a5c;
555-
border-color: #a07c7e;
575+
background-color: var(--d2h-dark-del-bg-color);
576+
border-color: var(--d2h-dark-del-border-color);
556577
}
557578

558579
.d2h-auto-color-scheme .d2h-ins {
559-
background-color: #177016;
560-
border-color: #219f1f;
580+
background-color: var(--d2h-dark-ins-bg-color);
581+
border-color: var(--d2h-dark-ins-border-color);
561582
}
562583

563584
.d2h-auto-color-scheme .d2h-info {
564-
background-color: #32342c;
565-
color: #929292;
566-
border-color: #272822;
585+
background-color: var(--d2h-dark-info-bg-color);
586+
color: var(--d2h-dark-info-color);
587+
border-color: var(--d2h-dark-bg-color);
567588
}
568589

569590
.d2h-auto-color-scheme .d2h-file-diff .d2h-del.d2h-change {
570-
background-color: #d0b44c;
591+
background-color: var(--d2h-dark-change-color);
571592
}
572593

573594
.d2h-auto-color-scheme .d2h-file-diff .d2h-ins.d2h-change {
574-
background-color: #d0b44c;
595+
background-color: var(--d2h-dark-change-color);
575596
}
576597

577598
.d2h-auto-color-scheme .d2h-file-wrapper {
578-
border: 1px solid #494b40;
599+
border: 1px solid var(--d2h-dark-border-color);
579600
}
580601

581602
.d2h-auto-color-scheme .d2h-file-collapse {
582-
border: 1px solid #272822;
603+
border: 1px solid var(--d2h-dark-bg-color);
583604
}
584605

585606
.d2h-auto-color-scheme .d2h-file-collapse.d2h-selected {
586-
background-color: #272822;
607+
background-color: var(--d2h-dark-bg-color);
587608
}
588609

589610
.d2h-auto-color-scheme .d2h-code-linenumber {
590-
background-color: #272822;
591-
color: #d0d0d0;
592-
border-color: #272822;
611+
background-color: var(--d2h-dark-bg-color);
612+
color: var(--d2h-dark-color);
613+
border-color: var(--d2h-dark-bg-color);
593614
}
594615

595616
.d2h-auto-color-scheme .d2h-file-list-wrapper a {
596-
color: #3572b0;
617+
color: var(--d2h-dark-moved-color);
597618
}
598619

599620
.d2h-auto-color-scheme .d2h-file-list-wrapper a:visited {
600-
color: #3572b0;
621+
color: var(--d2h-dark-moved-color);
601622
}
602623

603624
.d2h-auto-color-scheme .d2h-file-list > li {
604-
border-bottom: #272822 solid 1px;
625+
border-bottom: var(--d2h-dark-bg-color) solid 1px;
605626
}
606627

607628
.d2h-auto-color-scheme .d2h-changed {
608-
color: #d0b44c;
629+
color: var(--d2h-dark-change-color);
609630
}
610631

611632
.d2h-auto-color-scheme .d2h-moved {
612-
color: #3572b0;
633+
color: var(--d2h-dark-moved-color);
613634
}
614635

615636
.d2h-auto-color-scheme .d2h-tag {
616-
background-color: #272822;
637+
background-color: var(--d2h-dark-bg-color);
617638
}
618639

619640
.d2h-auto-color-scheme .d2h-deleted-tag {
620-
border: #a07c7e 1px solid;
641+
border: var(--d2h-dark-del-border-color) 1px solid;
621642
}
622643

623644
.d2h-auto-color-scheme .d2h-added-tag {
624-
border: #177016 1px solid;
645+
border: var(--d2h-dark-ins-bg-color) 1px solid;
625646
}
626647

627648
.d2h-auto-color-scheme .d2h-changed-tag {
628-
border: #d0b44c 1px solid;
649+
border: var(--d2h-dark-change-color) 1px solid;
629650
}
630651

631652
.d2h-auto-color-scheme .d2h-moved-tag {
632-
border: #3572b0 1px solid;
653+
border: var(--d2h-dark-moved-color) 1px solid;
633654
}
634655
}

0 commit comments

Comments
 (0)