luciano/diff2html
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use variables for dark mode

Browse source
This commit is contained in:
Jordan Welch 2023-09-17 08:59:05 -05:00
parent 6ed6a5da88
commit 0b76161d86
No known key found for this signature in database
GPG key ID: 8C1872FF2F7710B3
1 changed files with 99 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

177
src/ui/css/diff2html.css
View file

@ -386,125 +386,146 @@
/** /**
* Dark Mode Colors * Dark Mode Colors
*/ */
.d2h-wrapper {
--d2h-dark-color: #d0d0d0;
--d2h-dark-bg-color: #272822;
--d2h-dark-border-color: #494b40;
--d2h-dark-ligher-border: #66695a;
--d2h-dark-del-bg-color: #905a5c;
--d2h-dark-del-highlight-bg-color: #604243;
--d2h-dark-del-border-color: #a07c7e;
--d2h-dark-ins-bg-color: #177016;
--d2h-dark-ins-highlight-bg-color: #0f4a07;
--d2h-dark-ins-border-color: #219f1f;
--d2h-dark-info-bg-color: #32342c;
--d2h-dark-info-color: #929292;
--d2h-dark-change-color: #d0b44c;
--d2h-dark-moved-color: #3572b0;
}
.d2h-dark-color-scheme .d2h-files-diff, .d2h-dark-color-scheme .d2h-files-diff,
.d2h-dark-color-scheme .d2h-files-diff .d2h-emptyplaceholder { .d2h-dark-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
background-color: #272822; background-color: var(--d2h-dark-bg-color);
color: #d0d0d0; color: var(--d2h-dark-color);
} }
.d2h-dark-color-scheme .d2h-wrapper { .d2h-dark-color-scheme .d2h-wrapper {
color: #d0d0d0; color: var(--d2h-dark-color);
background-color: #272822; background-color: var(--d2h-dark-bg-color);
} }
.d2h-dark-color-scheme .d2h-file-header { .d2h-dark-color-scheme .d2h-file-header {
color: #d0d0d0; color: var(--d2h-dark-color);
background-color: #272822; background-color: var(--d2h-dark-bg-color);
border-bottom: #494b40; border-bottom: var(--d2h-dark-border-color);
} }
.d2h-dark-color-scheme .d2h-code-line del, .d2h-dark-color-scheme .d2h-code-line del,
.d2h-dark-color-scheme .d2h-code-side-line del { .d2h-dark-color-scheme .d2h-code-side-line del {
background-color: #604243; background-color: var(--d2h-dark-del-highlight-bg-color);
} }
.d2h-dark-color-scheme .d2h-code-line ins, .d2h-dark-color-scheme .d2h-code-line ins,
.d2h-dark-color-scheme .d2h-code-side-line ins { .d2h-dark-color-scheme .d2h-code-side-line ins {
background-color: #195219; background-color: var(--d2h-dark-ins-highlight-bg-color);
} }
.d2h-dark-color-scheme .d2h-code-side-linenumber { .d2h-dark-color-scheme .d2h-code-side-linenumber {
background-color: #272822; background-color: var(--d2h-dark-bg-color);
color: #d0d0d0; color: var(--d2h-dark-color);
border-color: #494b40; border-color: var(--d2h-dark-border-color);
} }
.d2h-dark-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder, .d2h-dark-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder,
.d2h-dark-color-scheme .d2h-files-diff .d2h-emptyplaceholder { .d2h-dark-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
background-color: #494b40; background-color: var(--d2h-dark-border-color);
border-color: #66695a; border-color: var(--d2h-dark-ligher-border);
} }
.d2h-dark-color-scheme .d2h-del { .d2h-dark-color-scheme .d2h-del {
background-color: #905a5c; background-color: var(--d2h-dark-del-bg-color);
border-color: #a07c7e; border-color: var(--d2h-dark-del-border-color);
} }
.d2h-dark-color-scheme .d2h-ins { .d2h-dark-color-scheme .d2h-ins {
background-color: #177016; background-color: var(--d2h-dark-ins-bg-color);
border-color: #219f1f; border-color: var(--d2h-dark-ins-border-color);
} }
.d2h-dark-color-scheme .d2h-info { .d2h-dark-color-scheme .d2h-info {
background-color: #32342c; background-color: var(--d2h-dark-info-bg-color);
color: #929292; color: var(--d2h-dark-info-color);
border-color: #272822; border-color: var(--d2h-dark-bg-color);
} }
.d2h-dark-color-scheme .d2h-file-diff .d2h-del.d2h-change { .d2h-dark-color-scheme .d2h-file-diff .d2h-del.d2h-change {
background-color: #d0b44c; background-color: var(--d2h-dark-change-color);
} }
.d2h-dark-color-scheme .d2h-file-diff .d2h-ins.d2h-change { .d2h-dark-color-scheme .d2h-file-diff .d2h-ins.d2h-change {
background-color: #d0b44c; background-color: var(--d2h-dark-change-color);
} }
.d2h-dark-color-scheme .d2h-file-wrapper { .d2h-dark-color-scheme .d2h-file-wrapper {
border: 1px solid #494b40; border: 1px solid var(--d2h-dark-border-color);
} }
.d2h-dark-color-scheme .d2h-file-collapse { .d2h-dark-color-scheme .d2h-file-collapse {
border: 1px solid #272822; border: 1px solid var(--d2h-dark-bg-color);
} }
.d2h-dark-color-scheme .d2h-file-collapse.d2h-selected { .d2h-dark-color-scheme .d2h-file-collapse.d2h-selected {
background-color: #272822; background-color: var(--d2h-dark-bg-color);
} }
.d2h-dark-color-scheme .d2h-code-linenumber { .d2h-dark-color-scheme .d2h-code-linenumber {
background-color: #272822; background-color: var(--d2h-dark-bg-color);
color: #d0d0d0; color: var(--d2h-dark-color);
border-color: #272822; border-color: var(--d2h-dark-bg-color);
} }
.d2h-dark-color-scheme .d2h-file-list-wrapper a { .d2h-dark-color-scheme .d2h-file-list-wrapper a {
color: #3572b0; color: var(--d2h-dark-moved-color);
} }
.d2h-dark-color-scheme .d2h-file-list-wrapper a:visited { .d2h-dark-color-scheme .d2h-file-list-wrapper a:visited {
color: #3572b0; color: var(--d2h-dark-moved-color);
} }
.d2h-dark-color-scheme .d2h-file-list > li { .d2h-dark-color-scheme .d2h-file-list > li {
border-bottom: #272822 solid 1px; border-bottom: var(--d2h-dark-bg-color) solid 1px;
} }
.d2h-dark-color-scheme .d2h-changed { .d2h-dark-color-scheme .d2h-changed {
color: #d0b44c; color: var(--d2h-dark-change-color);
} }
.d2h-dark-color-scheme .d2h-moved { .d2h-dark-color-scheme .d2h-moved {
color: #3572b0; color: var(--d2h-dark-moved-color);
} }
.d2h-dark-color-scheme .d2h-tag { .d2h-dark-color-scheme .d2h-tag {
background-color: #272822; background-color: var(--d2h-dark-bg-color);
} }
.d2h-dark-color-scheme .d2h-deleted-tag { .d2h-dark-color-scheme .d2h-deleted-tag {
border: #a07c7e 1px solid; border: var(--d2h-dark-del-border-color) 1px solid;
} }
.d2h-dark-color-scheme .d2h-added-tag { .d2h-dark-color-scheme .d2h-added-tag {
border: #177016 1px solid; border: var(--d2h-dark-ins-bg-color) 1px solid;
} }
.d2h-dark-color-scheme .d2h-changed-tag { .d2h-dark-color-scheme .d2h-changed-tag {
border: #d0b44c 1px solid; border: var(--d2h-dark-change-color) 1px solid;
} }
.d2h-dark-color-scheme .d2h-moved-tag { .d2h-dark-color-scheme .d2h-moved-tag {
border: #3572b0 1px solid; border: var(--d2h-dark-moved-color) 1px solid;
} }
/** /**
@ -513,122 +534,122 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.d2h-auto-color-scheme .d2h-files-diff, .d2h-auto-color-scheme .d2h-files-diff,
.d2h-auto-color-scheme .d2h-files-diff .d2h-emptyplaceholder { .d2h-auto-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
background-color: #272822; background-color: var(--d2h-dark-bg-color);
color: #d0d0d0; color: var(--d2h-dark-color);
} }
.d2h-auto-color-scheme .d2h-wrapper { .d2h-auto-color-scheme .d2h-wrapper {
color: #d0d0d0; color: var(--d2h-dark-color);
background-color: #272822; background-color: var(--d2h-dark-bg-color);
} }
.d2h-auto-color-scheme .d2h-file-header { .d2h-auto-color-scheme .d2h-file-header {
color: #d0d0d0; color: var(--d2h-dark-color);
background-color: #272822; background-color: var(--d2h-dark-bg-color);
border-bottom: #494b40; border-bottom: var(--d2h-dark-border-color);
} }
.d2h-auto-color-scheme .d2h-code-line del, .d2h-auto-color-scheme .d2h-code-line del,
.d2h-auto-color-scheme .d2h-code-side-line del { .d2h-auto-color-scheme .d2h-code-side-line del {
background-color: #604243; background-color: var(--d2h-dark-del-highlight-bg-color);
} }
.d2h-auto-color-scheme .d2h-code-line ins, .d2h-auto-color-scheme .d2h-code-line ins,
.d2h-auto-color-scheme .d2h-code-side-line ins { .d2h-auto-color-scheme .d2h-code-side-line ins {
background-color: #195219; background-color: var(--d2h-dark-ins-highlight-bg-color);
} }
.d2h-auto-color-scheme .d2h-code-side-linenumber { .d2h-auto-color-scheme .d2h-code-side-linenumber {
background-color: #272822; background-color: var(--d2h-dark-bg-color);
color: #d0d0d0; color: var(--d2h-dark-color);
border-color: #494b40; border-color: var(--d2h-dark-border-color);
} }
.d2h-auto-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder, .d2h-auto-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder,
.d2h-auto-color-scheme .d2h-files-diff .d2h-emptyplaceholder { .d2h-auto-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
background-color: #494b40; background-color: var(--d2h-dark-border-color);
border-color: #66695a; border-color: var(--d2h-dark-ligher-border);
} }
.d2h-auto-color-scheme .d2h-del { .d2h-auto-color-scheme .d2h-del {
background-color: #905a5c; background-color: var(--d2h-dark-del-bg-color);
border-color: #a07c7e; border-color: var(--d2h-dark-del-border-color);
} }
.d2h-auto-color-scheme .d2h-ins { .d2h-auto-color-scheme .d2h-ins {
background-color: #177016; background-color: var(--d2h-dark-ins-bg-color);
border-color: #219f1f; border-color: var(--d2h-dark-ins-border-color);
} }
.d2h-auto-color-scheme .d2h-info { .d2h-auto-color-scheme .d2h-info {
background-color: #32342c; background-color: var(--d2h-dark-info-bg-color);
color: #929292; color: var(--d2h-dark-info-color);
border-color: #272822; border-color: var(--d2h-dark-bg-color);
} }
.d2h-auto-color-scheme .d2h-file-diff .d2h-del.d2h-change { .d2h-auto-color-scheme .d2h-file-diff .d2h-del.d2h-change {
background-color: #d0b44c; background-color: var(--d2h-dark-change-color);
} }
.d2h-auto-color-scheme .d2h-file-diff .d2h-ins.d2h-change { .d2h-auto-color-scheme .d2h-file-diff .d2h-ins.d2h-change {
background-color: #d0b44c; background-color: var(--d2h-dark-change-color);
} }
.d2h-auto-color-scheme .d2h-file-wrapper { .d2h-auto-color-scheme .d2h-file-wrapper {
border: 1px solid #494b40; border: 1px solid var(--d2h-dark-border-color);
} }
.d2h-auto-color-scheme .d2h-file-collapse { .d2h-auto-color-scheme .d2h-file-collapse {
border: 1px solid #272822; border: 1px solid var(--d2h-dark-bg-color);
} }
.d2h-auto-color-scheme .d2h-file-collapse.d2h-selected { .d2h-auto-color-scheme .d2h-file-collapse.d2h-selected {
background-color: #272822; background-color: var(--d2h-dark-bg-color);
} }
.d2h-auto-color-scheme .d2h-code-linenumber { .d2h-auto-color-scheme .d2h-code-linenumber {
background-color: #272822; background-color: var(--d2h-dark-bg-color);
color: #d0d0d0; color: var(--d2h-dark-color);
border-color: #272822; border-color: var(--d2h-dark-bg-color);
} }
.d2h-auto-color-scheme .d2h-file-list-wrapper a { .d2h-auto-color-scheme .d2h-file-list-wrapper a {
color: #3572b0; color: var(--d2h-dark-moved-color);
} }
.d2h-auto-color-scheme .d2h-file-list-wrapper a:visited { .d2h-auto-color-scheme .d2h-file-list-wrapper a:visited {
color: #3572b0; color: var(--d2h-dark-moved-color);
} }
.d2h-auto-color-scheme .d2h-file-list > li { .d2h-auto-color-scheme .d2h-file-list > li {
border-bottom: #272822 solid 1px; border-bottom: var(--d2h-dark-bg-color) solid 1px;
} }
.d2h-auto-color-scheme .d2h-changed { .d2h-auto-color-scheme .d2h-changed {
color: #d0b44c; color: var(--d2h-dark-change-color);
} }
.d2h-auto-color-scheme .d2h-moved { .d2h-auto-color-scheme .d2h-moved {
color: #3572b0; color: var(--d2h-dark-moved-color);
} }
.d2h-auto-color-scheme .d2h-tag { .d2h-auto-color-scheme .d2h-tag {
background-color: #272822; background-color: var(--d2h-dark-bg-color);
} }
.d2h-auto-color-scheme .d2h-deleted-tag { .d2h-auto-color-scheme .d2h-deleted-tag {
border: #a07c7e 1px solid; border: var(--d2h-dark-del-border-color) 1px solid;
} }
.d2h-auto-color-scheme .d2h-added-tag { .d2h-auto-color-scheme .d2h-added-tag {
border: #177016 1px solid; border: var(--d2h-dark-ins-bg-color) 1px solid;
} }
.d2h-auto-color-scheme .d2h-changed-tag { .d2h-auto-color-scheme .d2h-changed-tag {
border: #d0b44c 1px solid; border: var(--d2h-dark-change-color) 1px solid;
} }
.d2h-auto-color-scheme .d2h-moved-tag { .d2h-auto-color-scheme .d2h-moved-tag {
border: #3572b0 1px solid; border: var(--d2h-dark-moved-color) 1px solid;
} }
} }