diff --git a/src/ui/css/diff2html.css b/src/ui/css/diff2html.css index 2d78e2b..7a5a669 100644 --- a/src/ui/css/diff2html.css +++ b/src/ui/css/diff2html.css @@ -30,15 +30,46 @@ --d2h-del-highlight-bg-color: #ffb6ba; --d2h-del-label-color: #c33; - --d2h-change-label-color: #d0b44c; - --d2h-change-del-color: #fdf2d0; --d2h-change-ins-color: #ded; --d2h-info-bg-color: #f8fafd; --d2h-info-border-color: #d5e4f2; + --d2h-change-label-color: #d0b44c; --d2h-moved-label-color: #3572b0; + + /** + * Dark Color Scheme + */ + + --d2h-dark-color: #d0d0d0; + --d2h-dark-bg-color: #272822; + --d2h-dark-border-color: #494b40; + + --d2h-dark-line-border-color: #5a5c51; + + --d2h-dark-empty-placeholder-bg-color: #494b40; + --d2h-dark-empty-placeholder-border-color: #66695a; + + --d2h-dark-ins-bg-color: #0f4a07; + --d2h-dark-ins-border-color: #219f1f; + --d2h-dark-ins-highlight-bg-color: #177016; + --d2h-dark-ins-label-color: #4f9f4f; + + --d2h-dark-del-bg-color: #604243; + --d2h-dark-del-border-color: #a07c7e; + --d2h-dark-del-highlight-bg-color: #905a5c; + --d2h-dark-del-label-color: #ca4f54; + + --d2h-dark-change-del-color: #9b7707; + --d2h-dark-change-ins-color: #366b36; + + --d2h-dark-info-bg-color: #32342c; + --d2h-dark-info-color: #929292; + + --d2h-dark-change-label-color: #d0b44c; + --d2h-dark-moved-label-color: #3572b0; } .d2h-wrapper { @@ -422,34 +453,7 @@ /** * Dark Mode Colors */ -:root { - --d2h-dark-color: #d0d0d0; - --d2h-dark-bg-color: #272822; - --d2h-dark-border-color: #494b40; - --d2h-dark-ligher-border: #66695a; - - --d2h-dark-del-bg-color: #604243; - --d2h-dark-del-highlight-bg-color: #905a5c; - --d2h-dark-del-border-color: #a07c7e; - --d2h-dark-del-label-color: #ca4f54; - - --d2h-dark-ins-bg-color: #0f4a07; - --d2h-dark-ins-highlight-bg-color: #177016; - --d2h-dark-ins-border-color: #219f1f; - --d2h-dark-ins-label-color: #4f9f4f; - - --d2h-dark-info-bg-color: #32342c; - --d2h-dark-info-color: #929292; - - --d2h-dark-change-del-color: #9b7707; - --d2h-dark-change-ins-color: #366b36; - --d2h-dark-change-label-color: #d0b44c; - - --d2h-dark-moved-label-color: #3572b0; -} - -.d2h-dark-color-scheme .d2h-files-diff, -.d2h-dark-color-scheme .d2h-files-diff .d2h-emptyplaceholder { +.d2h-dark-color-scheme .d2h-files-diff { background-color: var(--d2h-dark-bg-color); color: var(--d2h-dark-color); } @@ -499,14 +503,14 @@ .d2h-dark-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder, .d2h-dark-color-scheme .d2h-files-diff .d2h-emptyplaceholder { - background-color: var(--d2h-dark-border-color); - border-color: var(--d2h-dark-ligher-border); + background-color: var(--d2h-dark-empty-placeholder-bg-color); + border-color: var(--d2h-dark-empty-placeholder-border-color); } .d2h-dark-color-scheme .d2h-code-linenumber { background-color: var(--d2h-dark-bg-color); color: var(--d2h-dark-color); - border-color: var(--d2h-dark-border-color); + border-color: var(--d2h-line-border-color); } .d2h-dark-color-scheme .d2h-del { @@ -589,8 +593,7 @@ * Auto Mode Colors */ @media (prefers-color-scheme: dark) { - .d2h-auto-color-scheme .d2h-files-diff, - .d2h-auto-color-scheme .d2h-files-diff .d2h-emptyplaceholder { + .d2h-auto-color-scheme .d2h-files-diff { background-color: var(--d2h-dark-bg-color); color: var(--d2h-dark-color); } @@ -635,13 +638,13 @@ .d2h-auto-color-scheme .d2h-code-side-linenumber { background-color: var(--d2h-dark-bg-color); color: var(--d2h-dark-color); - border-color: var(--d2h-dark-border-color); + border-color: var(--d2h-line-border-color); } .d2h-auto-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder, .d2h-auto-color-scheme .d2h-files-diff .d2h-emptyplaceholder { - background-color: var(--d2h-dark-border-color); - border-color: var(--d2h-dark-ligher-border); + background-color: var(--d2h-dark-empty-placeholder-bg-color); + border-color: var(--d2h-dark-empty-placeholder-border-color); } .d2h-auto-color-scheme .d2h-code-linenumber {