Fix diff2html styles completely. Required inserting the diff2html .css files directly into the app

app.py

@@ -36,7 +36,9 @@ def get_diff2html_view(raw_diff):
     html = f"""
     <div style='width:100%; height:720px; overflow:auto; position: relative'>
         <div id='diff-raw' hidden>{raw_diff}</div> 
-        <div id='diff-view'></div>
+        <div class="d2h-view-wrapper">
+            <div id='diff-view'></div>
+        </div>
     </div>
     """
 

head.html

@@ -1,16 +1,3 @@
-<!-- Stylesheet -->
-<link
-        rel="stylesheet"
-        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css"
-        media="screen and (prefers-color-scheme: light)"
-/>
-<link
-        rel="stylesheet"
-        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css"
-        media="screen and (prefers-color-scheme: dark)"
-/>
-<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css"/>
-
 <!-- Javascripts -->
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
 
@@ -28,7 +15,8 @@
             var configuration = {
                 drawFileList: true,
                 matching: 'lines',
-                highlight: true
+                highlight: true,
+                colorScheme: 'auto'
             };
             var diff2htmlUi = new Diff2HtmlUI(targetElement, diff, configuration);
             diff2htmlUi.draw();

style_overrides.css

@@ -1,18 +1,995 @@
-.d2h-diff-table {
-    .d2h-diff-tbody {
-        tr {
-            td {
-                padding: 0;
-                margin: 0;
+:host, :root {
+    --d2h-bg-color: #fff;
+    --d2h-border-color: #ddd;
+    --d2h-dim-color: rgba(0, 0, 0, .3);
+    --d2h-line-border-color: #eee;
+    --d2h-file-header-bg-color: #f7f7f7;
+    --d2h-file-header-border-color: #d8d8d8;
+    --d2h-empty-placeholder-bg-color: #f1f1f1;
+    --d2h-empty-placeholder-border-color: #e1e1e1;
+    --d2h-selected-color: #c8e1ff;
+    --d2h-ins-bg-color: #dfd;
+    --d2h-ins-border-color: #b4e2b4;
+    --d2h-ins-highlight-bg-color: #97f295;
+    --d2h-ins-label-color: #399839;
+    --d2h-del-bg-color: #fee8e9;
+    --d2h-del-border-color: #e9aeae;
+    --d2h-del-highlight-bg-color: #ffb6ba;
+    --d2h-del-label-color: #c33;
+    --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;
+    --d2h-dark-color: #e6edf3;
+    --d2h-dark-bg-color: #0d1117;
+    --d2h-dark-border-color: #30363d;
+    --d2h-dark-dim-color: #6e7681;
+    --d2h-dark-line-border-color: #21262d;
+    --d2h-dark-file-header-bg-color: #161b22;
+    --d2h-dark-file-header-border-color: #30363d;
+    --d2h-dark-empty-placeholder-bg-color: hsla(215, 8%, 47%, .1);
+    --d2h-dark-empty-placeholder-border-color: #30363d;
+    --d2h-dark-selected-color: rgba(56, 139, 253, .1);
+    --d2h-dark-ins-bg-color: rgba(46, 160, 67, .15);
+    --d2h-dark-ins-border-color: rgba(46, 160, 67, .4);
+    --d2h-dark-ins-highlight-bg-color: rgba(46, 160, 67, .4);
+    --d2h-dark-ins-label-color: #3fb950;
+    --d2h-dark-del-bg-color: rgba(248, 81, 73, .1);
+    --d2h-dark-del-border-color: rgba(248, 81, 73, .4);
+    --d2h-dark-del-highlight-bg-color: rgba(248, 81, 73, .4);
+    --d2h-dark-del-label-color: #f85149;
+    --d2h-dark-change-del-color: rgba(210, 153, 34, .2);
+    --d2h-dark-change-ins-color: rgba(46, 160, 67, .25);
+    --d2h-dark-info-bg-color: rgba(56, 139, 253, .1);
+    --d2h-dark-info-border-color: rgba(56, 139, 253, .4);
+    --d2h-dark-change-label-color: #d29922;
+    --d2h-dark-moved-label-color: #3572b0
+}
+
+.gradio-container .main .d2h-view-wrapper {
+    * {
+        all: revert;
+    }
+
+    #diff-view {
+        pre code.hljs {
+            display: block;
+            overflow-x: auto;
+            padding: 1em
+        }
+
+        code.hljs {
+            padding: 3px 5px
+        }
+
+
+        @media (prefers-color-scheme: light) {
+            /*!
+          Theme: GitHub
+          Description: Light theme as seen on github.com
+          Author: github.com
+          Maintainer: @Hirse
+          Updated: 2021-05-15
+
+          Outdated base version: https://github.com/primer/github-syntax-light
+          Current colors taken from GitHub's CSS
+        */
+            .hljs {
+                color: #24292e;
+                background: #fff
+            }
+
+            .hljs-doctag, .hljs-keyword, .hljs-meta .hljs-keyword, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-variable.language_ {
+                color: #d73a49
+            }
+
+            .hljs-title, .hljs-title.class_, .hljs-title.class_.inherited__, .hljs-title.function_ {
+                color: #6f42c1
+            }
+
+            .hljs-attr, .hljs-attribute, .hljs-literal, .hljs-meta, .hljs-number, .hljs-operator, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id, .hljs-variable {
+                color: #005cc5
+            }
+
+            .hljs-meta .hljs-string, .hljs-regexp, .hljs-string {
+                color: #032f62
+            }
+
+            .hljs-built_in, .hljs-symbol {
+                color: #e36209
+            }
+
+            .hljs-code, .hljs-comment, .hljs-formula {
+                color: #6a737d
+            }
+
+            .hljs-name, .hljs-quote, .hljs-selector-pseudo, .hljs-selector-tag {
+                color: #22863a
+            }
+
+            .hljs-subst {
+                color: #24292e
+            }
+
+            .hljs-section {
+                color: #005cc5;
+                font-weight: 700
+            }
+
+            .hljs-bullet {
+                color: #735c0f
+            }
+
+            .hljs-emphasis {
+                color: #24292e;
+                font-style: italic
+            }
+
+            .hljs-strong {
+                color: #24292e;
+                font-weight: 700
+            }
+
+            .hljs-addition {
+                color: #22863a;
+                background-color: #f0fff4
+            }
+
+            .hljs-deletion {
+                color: #b31d28;
+                background-color: #ffeef0
             }
         }
-    }
-}
 
-.d2h-file-header {
-    .d2h-file-collapse {
+
+        @media (prefers-color-scheme: dark) {
+            pre code.hljs {
+                display: block;
+                overflow-x: auto;
+                padding: 1em
+            }
+
+            code.hljs {
+                padding: 3px 5px
+            }
+
+            /*!
+              Theme: GitHub Dark
+              Description: Dark theme as seen on github.com
+              Author: github.com
+              Maintainer: @Hirse
+              Updated: 2021-05-15
+
+              Outdated base version: https://github.com/primer/github-syntax-dark
+              Current colors taken from GitHub's CSS
+            */
+            .hljs {
+                color: #c9d1d9;
+                background: #0d1117
+            }
+
+            .hljs-doctag, .hljs-keyword, .hljs-meta .hljs-keyword, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-variable.language_ {
+                color: #ff7b72
+            }
+
+            .hljs-title, .hljs-title.class_, .hljs-title.class_.inherited__, .hljs-title.function_ {
+                color: #d2a8ff
+            }
+
+            .hljs-attr, .hljs-attribute, .hljs-literal, .hljs-meta, .hljs-number, .hljs-operator, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id, .hljs-variable {
+                color: #79c0ff
+            }
+
+            .hljs-meta .hljs-string, .hljs-regexp, .hljs-string {
+                color: #a5d6ff
+            }
+
+            .hljs-built_in, .hljs-symbol {
+                color: #ffa657
+            }
+
+            .hljs-code, .hljs-comment, .hljs-formula {
+                color: #8b949e
+            }
+
+            .hljs-name, .hljs-quote, .hljs-selector-pseudo, .hljs-selector-tag {
+                color: #7ee787
+            }
+
+            .hljs-subst {
+                color: #c9d1d9
+            }
+
+            .hljs-section {
+                color: #1f6feb;
+                font-weight: 700
+            }
+
+            .hljs-bullet {
+                color: #f2cc60
+            }
+
+            .hljs-emphasis {
+                color: #c9d1d9;
+                font-style: italic
+            }
+
+            .hljs-strong {
+                color: #c9d1d9;
+                font-weight: 700
+            }
+
+            .hljs-addition {
+                color: #aff5b4;
+                background-color: #033a16
+            }
+
+            .hljs-deletion {
+                color: #ffdcd7;
+                background-color: #67060c
+            }
+        }
+
+
+        .d2h-wrapper {
+            text-align: left
+        }
+
+        .d2h-file-header {
+            background-color: #f7f7f7;
+            background-color: var(--d2h-file-header-bg-color);
+            border-bottom: 1px solid #d8d8d8;
+            border-bottom: 1px solid var(--d2h-file-header-border-color);
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            font-family: Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans-serif;
+            height: 35px;
+            padding: 5px 10px
+        }
+
+        .d2h-file-header.d2h-sticky-header {
+            position: sticky;
+            top: 0;
+            z-index: 1
+        }
+
+        .d2h-file-stats {
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            font-size: 14px;
+            margin-left: auto
+        }
+
+        .d2h-lines-added {
+            border: 1px solid #b4e2b4;
+            border: 1px solid var(--d2h-ins-border-color);
+            border-radius: 5px 0 0 5px;
+            color: #399839;
+            color: var(--d2h-ins-label-color);
+            padding: 2px;
+            text-align: right;
+            vertical-align: middle
+        }
+
+        .d2h-lines-deleted {
+            border: 1px solid #e9aeae;
+            border: 1px solid var(--d2h-del-border-color);
+            border-radius: 0 5px 5px 0;
+            color: #c33;
+            color: var(--d2h-del-label-color);
+            margin-left: 1px;
+            padding: 2px;
+            text-align: left;
+            vertical-align: middle
+        }
+
+        .d2h-file-name-wrapper {
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            -webkit-box-align: center;
+            -ms-flex-align: center;
+            align-items: center;
+            font-size: 15px;
+            width: 100%
+        }
+
+        .d2h-file-name {
+            overflow-x: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap
+        }
+
+        .d2h-file-wrapper {
+            border: 1px solid #ddd;
+            border: 1px solid var(--d2h-border-color);
+            border-radius: 3px;
+            margin-bottom: 1em
+        }
+
+        .d2h-file-collapse {
+            -webkit-box-pack: end;
+            -ms-flex-pack: end;
+            cursor: pointer;
+            display: none;
+            font-size: 12px;
+            justify-content: flex-end;
+            -webkit-box-align: center;
+            -ms-flex-align: center;
+            align-items: center;
+            border: 1px solid #ddd;
+            border: 1px solid var(--d2h-border-color);
+            border-radius: 3px;
+            padding: 4px 8px
+        }
+
+        .d2h-file-collapse.d2h-selected {
+            background-color: #c8e1ff;
+            background-color: var(--d2h-selected-color)
+        }
+
         .d2h-file-collapse-input {
-            margin: 0 4px 0 0;
+            margin: 0 4px 0 0
+        }
+
+        .d2h-diff-table {
+            border-collapse: collapse;
+            font-family: Menlo, Consolas, monospace;
+            font-size: 13px;
+            width: 100%
+        }
+
+        .d2h-files-diff {
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            width: 100%
+        }
+
+        .d2h-file-diff {
+            overflow-y: hidden
+        }
+
+        .d2h-file-diff.d2h-d-none, .d2h-files-diff.d2h-d-none {
+            display: none
+        }
+
+        .d2h-file-side-diff {
+            display: inline-block;
+            overflow-x: scroll;
+            overflow-y: hidden;
+            width: 50%
+        }
+
+        .d2h-code-line {
+            padding: 0 8em;
+            width: calc(100% - 16em)
+        }
+
+        .d2h-code-line, .d2h-code-side-line {
+            display: inline-block;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+            white-space: nowrap
+        }
+
+        .d2h-code-side-line {
+            padding: 0 4.5em;
+            width: calc(100% - 9em)
+        }
+
+        .d2h-code-line-ctn {
+            background: none;
+            display: inline-block;
+            padding: 0;
+            word-wrap: normal;
+            -webkit-user-select: text;
+            -moz-user-select: text;
+            -ms-user-select: text;
+            user-select: text;
+            vertical-align: middle;
+            white-space: pre;
+            width: 100%
+        }
+
+        .d2h-code-line del, .d2h-code-side-line del {
+            background-color: #ffb6ba;
+            background-color: var(--d2h-del-highlight-bg-color)
+        }
+
+        .d2h-code-line del, .d2h-code-line ins, .d2h-code-side-line del, .d2h-code-side-line ins {
+            border-radius: .2em;
+            display: inline-block;
+            margin-top: -1px;
+            -webkit-text-decoration: none;
+            text-decoration: none
+        }
+
+        .d2h-code-line ins, .d2h-code-side-line ins {
+            background-color: #97f295;
+            background-color: var(--d2h-ins-highlight-bg-color);
+            text-align: left
+        }
+
+        .d2h-code-line-prefix {
+            background: none;
+            display: inline;
+            padding: 0;
+            word-wrap: normal;
+            white-space: pre
+        }
+
+        .line-num1 {
+            float: left
+        }
+
+        .line-num1, .line-num2 {
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+            overflow: hidden;
+            padding: 0 .5em;
+            text-overflow: ellipsis;
+            width: 3.5em
+        }
+
+        .line-num2 {
+            float: right
+        }
+
+        .d2h-code-linenumber {
+            background-color: #fff;
+            background-color: var(--d2h-bg-color);
+            border: solid #eee;
+            border: solid var(--d2h-line-border-color);
+            border-width: 0 1px;
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+            color: rgba(0, 0, 0, .3);
+            color: var(--d2h-dim-color);
+            cursor: pointer;
+            display: inline-block;
+            position: absolute;
+            text-align: right;
+            width: 7.5em
+        }
+
+        .d2h-code-linenumber:after {
+            content: "\200b"
+        }
+
+        .d2h-code-side-linenumber {
+            background-color: #fff;
+            background-color: var(--d2h-bg-color);
+            border: solid #eee;
+            border: solid var(--d2h-line-border-color);
+            border-width: 0 1px;
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+            color: rgba(0, 0, 0, .3);
+            color: var(--d2h-dim-color);
+            cursor: pointer;
+            display: inline-block;
+            overflow: hidden;
+            padding: 0 .5em;
+            position: absolute;
+            text-align: right;
+            text-overflow: ellipsis;
+            width: 4em
+        }
+
+        .d2h-code-side-linenumber:after {
+            content: "\200b"
+        }
+
+        .d2h-code-side-emptyplaceholder, .d2h-emptyplaceholder {
+            background-color: #f1f1f1;
+            background-color: var(--d2h-empty-placeholder-bg-color);
+            border-color: #e1e1e1;
+            border-color: var(--d2h-empty-placeholder-border-color)
+        }
+
+        .d2h-code-line-prefix, .d2h-code-linenumber, .d2h-code-side-linenumber, .d2h-emptyplaceholder {
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none
+        }
+
+        .d2h-code-linenumber, .d2h-code-side-linenumber {
+            direction: rtl
+        }
+
+        .d2h-del {
+            background-color: #fee8e9;
+            background-color: var(--d2h-del-bg-color);
+            border-color: #e9aeae;
+            border-color: var(--d2h-del-border-color)
+        }
+
+        .d2h-ins {
+            background-color: #dfd;
+            background-color: var(--d2h-ins-bg-color);
+            border-color: #b4e2b4;
+            border-color: var(--d2h-ins-border-color)
+        }
+
+        .d2h-info {
+            background-color: #f8fafd;
+            background-color: var(--d2h-info-bg-color);
+            border-color: #d5e4f2;
+            border-color: var(--d2h-info-border-color);
+            color: rgba(0, 0, 0, .3);
+            color: var(--d2h-dim-color)
+        }
+
+        .d2h-file-diff .d2h-del.d2h-change {
+            background-color: #fdf2d0;
+            background-color: var(--d2h-change-del-color)
+        }
+
+        .d2h-file-diff .d2h-ins.d2h-change {
+            background-color: #ded;
+            background-color: var(--d2h-change-ins-color)
+        }
+
+        .d2h-file-list-wrapper {
+            margin-bottom: 10px
+        }
+
+        .d2h-file-list-wrapper a {
+            -webkit-text-decoration: none;
+            text-decoration: none
+        }
+
+        .d2h-file-list-wrapper a, .d2h-file-list-wrapper a:visited {
+            color: #3572b0;
+            color: var(--d2h-moved-label-color)
+        }
+
+        .d2h-file-list-header {
+            text-align: left
+        }
+
+        .d2h-file-list-title {
+            font-weight: 700
+        }
+
+        .d2h-file-list-line {
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            text-align: left
+        }
+
+        .d2h-file-list {
+            display: block;
+            list-style: none;
+            margin: 0;
+            padding: 0
+        }
+
+        .d2h-file-list > li {
+            border-bottom: 1px solid #ddd;
+            border-bottom: 1px solid var(--d2h-border-color);
+            margin: 0;
+            padding: 5px 10px
+        }
+
+        .d2h-file-list > li:last-child {
+            border-bottom: none
+        }
+
+        .d2h-file-switch {
+            cursor: pointer;
+            display: none;
+            font-size: 10px
+        }
+
+        .d2h-icon {
+            margin-right: 10px;
+            vertical-align: middle;
+            fill: currentColor
+        }
+
+        .d2h-deleted {
+            color: #c33;
+            color: var(--d2h-del-label-color)
+        }
+
+        .d2h-added {
+            color: #399839;
+            color: var(--d2h-ins-label-color)
+        }
+
+        .d2h-changed {
+            color: #d0b44c;
+            color: var(--d2h-change-label-color)
+        }
+
+        .d2h-moved {
+            color: #3572b0;
+            color: var(--d2h-moved-label-color)
+        }
+
+        .d2h-tag {
+            background-color: #fff;
+            background-color: var(--d2h-bg-color);
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            font-size: 10px;
+            margin-left: 5px;
+            padding: 0 2px
+        }
+
+        .d2h-deleted-tag {
+            border: 1px solid #c33;
+            border: 1px solid var(--d2h-del-label-color)
+        }
+
+        .d2h-added-tag {
+            border: 1px solid #399839;
+            border: 1px solid var(--d2h-ins-label-color)
+        }
+
+        .d2h-changed-tag {
+            border: 1px solid #d0b44c;
+            border: 1px solid var(--d2h-change-label-color)
+        }
+
+        .d2h-moved-tag {
+            border: 1px solid #3572b0;
+            border: 1px solid var(--d2h-moved-label-color)
+        }
+
+        .d2h-dark-color-scheme {
+            background-color: #0d1117;
+            background-color: var(--d2h-dark-bg-color);
+            color: #e6edf3;
+            color: var(--d2h-dark-color)
+        }
+
+        .d2h-dark-color-scheme .d2h-file-header {
+            background-color: #161b22;
+            background-color: var(--d2h-dark-file-header-bg-color);
+            border-bottom: #30363d;
+            border-bottom: var(--d2h-dark-file-header-border-color)
+        }
+
+        .d2h-dark-color-scheme .d2h-lines-added {
+            border: 1px solid rgba(46, 160, 67, .4);
+            border: 1px solid var(--d2h-dark-ins-border-color);
+            color: #3fb950;
+            color: var(--d2h-dark-ins-label-color)
+        }
+
+        .d2h-dark-color-scheme .d2h-lines-deleted {
+            border: 1px solid rgba(248, 81, 73, .4);
+            border: 1px solid var(--d2h-dark-del-border-color);
+            color: #f85149;
+            color: var(--d2h-dark-del-label-color)
+        }
+
+        .d2h-dark-color-scheme .d2h-code-line del, .d2h-dark-color-scheme .d2h-code-side-line del {
+            background-color: rgba(248, 81, 73, .4);
+            background-color: var(--d2h-dark-del-highlight-bg-color)
+        }
+
+        .d2h-dark-color-scheme .d2h-code-line ins, .d2h-dark-color-scheme .d2h-code-side-line ins {
+            background-color: rgba(46, 160, 67, .4);
+            background-color: var(--d2h-dark-ins-highlight-bg-color)
+        }
+
+        .d2h-dark-color-scheme .d2h-diff-tbody {
+            border-color: #30363d;
+            border-color: var(--d2h-dark-border-color)
+        }
+
+        .d2h-dark-color-scheme .d2h-code-side-linenumber {
+            background-color: #0d1117;
+            background-color: var(--d2h-dark-bg-color);
+            border-color: #21262d;
+            border-color: var(--d2h-dark-line-border-color);
+            color: #6e7681;
+            color: var(--d2h-dark-dim-color)
+        }
+
+        .d2h-dark-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder, .d2h-dark-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
+            background-color: hsla(215, 8%, 47%, .1);
+            background-color: var(--d2h-dark-empty-placeholder-bg-color);
+            border-color: #30363d;
+            border-color: var(--d2h-dark-empty-placeholder-border-color)
+        }
+
+        .d2h-dark-color-scheme .d2h-code-linenumber {
+            background-color: #0d1117;
+            background-color: var(--d2h-dark-bg-color);
+            border-color: #21262d;
+            border-color: var(--d2h-dark-line-border-color);
+            color: #6e7681;
+            color: var(--d2h-dark-dim-color)
+        }
+
+        .d2h-dark-color-scheme .d2h-del {
+            background-color: rgba(248, 81, 73, .1);
+            background-color: var(--d2h-dark-del-bg-color);
+            border-color: rgba(248, 81, 73, .4);
+            border-color: var(--d2h-dark-del-border-color)
+        }
+
+        .d2h-dark-color-scheme .d2h-ins {
+            background-color: rgba(46, 160, 67, .15);
+            background-color: var(--d2h-dark-ins-bg-color);
+            border-color: rgba(46, 160, 67, .4);
+            border-color: var(--d2h-dark-ins-border-color)
+        }
+
+        .d2h-dark-color-scheme .d2h-info {
+            background-color: rgba(56, 139, 253, .1);
+            background-color: var(--d2h-dark-info-bg-color);
+            border-color: rgba(56, 139, 253, .4);
+            border-color: var(--d2h-dark-info-border-color);
+            color: #6e7681;
+            color: var(--d2h-dark-dim-color)
+        }
+
+        .d2h-dark-color-scheme .d2h-file-diff .d2h-del.d2h-change {
+            background-color: rgba(210, 153, 34, .2);
+            background-color: var(--d2h-dark-change-del-color)
+        }
+
+        .d2h-dark-color-scheme .d2h-file-diff .d2h-ins.d2h-change {
+            background-color: rgba(46, 160, 67, .25);
+            background-color: var(--d2h-dark-change-ins-color)
+        }
+
+        .d2h-dark-color-scheme .d2h-file-wrapper {
+            border: 1px solid #30363d;
+            border: 1px solid var(--d2h-dark-border-color)
+        }
+
+        .d2h-dark-color-scheme .d2h-file-collapse {
+            border: 1px solid #0d1117;
+            border: 1px solid var(--d2h-dark-bg-color)
+        }
+
+        .d2h-dark-color-scheme .d2h-file-collapse.d2h-selected {
+            background-color: rgba(56, 139, 253, .1);
+            background-color: var(--d2h-dark-selected-color)
+        }
+
+        .d2h-dark-color-scheme .d2h-file-list-wrapper a, .d2h-dark-color-scheme .d2h-file-list-wrapper a:visited {
+            color: #3572b0;
+            color: var(--d2h-dark-moved-label-color)
+        }
+
+        .d2h-dark-color-scheme .d2h-file-list > li {
+            border-bottom: 1px solid #0d1117;
+            border-bottom: 1px solid var(--d2h-dark-bg-color)
+        }
+
+        .d2h-dark-color-scheme .d2h-deleted {
+            color: #f85149;
+            color: var(--d2h-dark-del-label-color)
+        }
+
+        .d2h-dark-color-scheme .d2h-added {
+            color: #3fb950;
+            color: var(--d2h-dark-ins-label-color)
+        }
+
+        .d2h-dark-color-scheme .d2h-changed {
+            color: #d29922;
+            color: var(--d2h-dark-change-label-color)
+        }
+
+        .d2h-dark-color-scheme .d2h-moved {
+            color: #3572b0;
+            color: var(--d2h-dark-moved-label-color)
+        }
+
+        .d2h-dark-color-scheme .d2h-tag {
+            background-color: #0d1117;
+            background-color: var(--d2h-dark-bg-color)
+        }
+
+        .d2h-dark-color-scheme .d2h-deleted-tag {
+            border: 1px solid #f85149;
+            border: 1px solid var(--d2h-dark-del-label-color)
+        }
+
+        .d2h-dark-color-scheme .d2h-added-tag {
+            border: 1px solid #3fb950;
+            border: 1px solid var(--d2h-dark-ins-label-color)
+        }
+
+        .d2h-dark-color-scheme .d2h-changed-tag {
+            border: 1px solid #d29922;
+            border: 1px solid var(--d2h-dark-change-label-color)
+        }
+
+        .d2h-dark-color-scheme .d2h-moved-tag {
+            border: 1px solid #3572b0;
+            border: 1px solid var(--d2h-dark-moved-label-color)
+        }
+
+        @media (prefers-color-scheme: dark) {
+            .d2h-auto-color-scheme {
+                background-color: #0d1117;
+                background-color: var(--d2h-dark-bg-color);
+                color: #e6edf3;
+                color: var(--d2h-dark-color)
+            }
+
+            .d2h-auto-color-scheme .d2h-file-header {
+                background-color: #161b22;
+                background-color: var(--d2h-dark-file-header-bg-color);
+                border-bottom: #30363d;
+                border-bottom: var(--d2h-dark-file-header-border-color)
+            }
+
+            .d2h-auto-color-scheme .d2h-lines-added {
+                border: 1px solid rgba(46, 160, 67, .4);
+                border: 1px solid var(--d2h-dark-ins-border-color);
+                color: #3fb950;
+                color: var(--d2h-dark-ins-label-color)
+            }
+
+            .d2h-auto-color-scheme .d2h-lines-deleted {
+                border: 1px solid rgba(248, 81, 73, .4);
+                border: 1px solid var(--d2h-dark-del-border-color);
+                color: #f85149;
+                color: var(--d2h-dark-del-label-color)
+            }
+
+            .d2h-auto-color-scheme .d2h-code-line del, .d2h-auto-color-scheme .d2h-code-side-line del {
+                background-color: rgba(248, 81, 73, .4);
+                background-color: var(--d2h-dark-del-highlight-bg-color)
+            }
+
+            .d2h-auto-color-scheme .d2h-code-line ins, .d2h-auto-color-scheme .d2h-code-side-line ins {
+                background-color: rgba(46, 160, 67, .4);
+                background-color: var(--d2h-dark-ins-highlight-bg-color)
+            }
+
+            .d2h-auto-color-scheme .d2h-diff-tbody {
+                border-color: #30363d;
+                border-color: var(--d2h-dark-border-color)
+            }
+
+            .d2h-auto-color-scheme .d2h-code-side-linenumber {
+                background-color: #0d1117;
+                background-color: var(--d2h-dark-bg-color);
+                border-color: #21262d;
+                border-color: var(--d2h-dark-line-border-color);
+                color: #6e7681;
+                color: var(--d2h-dark-dim-color)
+            }
+
+            .d2h-auto-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder, .d2h-auto-color-scheme .d2h-files-diff .d2h-emptyplaceholder {
+                background-color: hsla(215, 8%, 47%, .1);
+                background-color: var(--d2h-dark-empty-placeholder-bg-color);
+                border-color: #30363d;
+                border-color: var(--d2h-dark-empty-placeholder-border-color)
+            }
+
+            .d2h-auto-color-scheme .d2h-code-linenumber {
+                background-color: #0d1117;
+                background-color: var(--d2h-dark-bg-color);
+                border-color: #21262d;
+                border-color: var(--d2h-dark-line-border-color);
+                color: #6e7681;
+                color: var(--d2h-dark-dim-color)
+            }
+
+            .d2h-auto-color-scheme .d2h-del {
+                background-color: rgba(248, 81, 73, .1);
+                background-color: var(--d2h-dark-del-bg-color);
+                border-color: rgba(248, 81, 73, .4);
+                border-color: var(--d2h-dark-del-border-color)
+            }
+
+            .d2h-auto-color-scheme .d2h-ins {
+                background-color: rgba(46, 160, 67, .15);
+                background-color: var(--d2h-dark-ins-bg-color);
+                border-color: rgba(46, 160, 67, .4);
+                border-color: var(--d2h-dark-ins-border-color)
+            }
+
+            .d2h-auto-color-scheme .d2h-info {
+                background-color: rgba(56, 139, 253, .1);
+                background-color: var(--d2h-dark-info-bg-color);
+                border-color: rgba(56, 139, 253, .4);
+                border-color: var(--d2h-dark-info-border-color);
+                color: #6e7681;
+                color: var(--d2h-dark-dim-color)
+            }
+
+            .d2h-auto-color-scheme .d2h-file-diff .d2h-del.d2h-change {
+                background-color: rgba(210, 153, 34, .2);
+                background-color: var(--d2h-dark-change-del-color)
+            }
+
+            .d2h-auto-color-scheme .d2h-file-diff .d2h-ins.d2h-change {
+                background-color: rgba(46, 160, 67, .25);
+                background-color: var(--d2h-dark-change-ins-color)
+            }
+
+            .d2h-auto-color-scheme .d2h-file-wrapper {
+                border: 1px solid #30363d;
+                border: 1px solid var(--d2h-dark-border-color)
+            }
+
+            .d2h-auto-color-scheme .d2h-file-collapse {
+                border: 1px solid #0d1117;
+                border: 1px solid var(--d2h-dark-bg-color)
+            }
+
+            .d2h-auto-color-scheme .d2h-file-collapse.d2h-selected {
+                background-color: rgba(56, 139, 253, .1);
+                background-color: var(--d2h-dark-selected-color)
+            }
+
+            .d2h-auto-color-scheme .d2h-file-list-wrapper a, .d2h-auto-color-scheme .d2h-file-list-wrapper a:visited {
+                color: #3572b0;
+                color: var(--d2h-dark-moved-label-color)
+            }
+
+            .d2h-auto-color-scheme .d2h-file-list > li {
+                border-bottom: 1px solid #0d1117;
+                border-bottom: 1px solid var(--d2h-dark-bg-color)
+            }
+
+            .d2h-dark-color-scheme .d2h-deleted {
+                color: #f85149;
+                color: var(--d2h-dark-del-label-color)
+            }
+
+            .d2h-auto-color-scheme .d2h-added {
+                color: #3fb950;
+                color: var(--d2h-dark-ins-label-color)
+            }
+
+            .d2h-auto-color-scheme .d2h-changed {
+                color: #d29922;
+                color: var(--d2h-dark-change-label-color)
+            }
+
+            .d2h-auto-color-scheme .d2h-moved {
+                color: #3572b0;
+                color: var(--d2h-dark-moved-label-color)
+            }
+
+            .d2h-auto-color-scheme .d2h-tag {
+                background-color: #0d1117;
+                background-color: var(--d2h-dark-bg-color)
+            }
+
+            .d2h-auto-color-scheme .d2h-deleted-tag {
+                border: 1px solid #f85149;
+                border: 1px solid var(--d2h-dark-del-label-color)
+            }
+
+            .d2h-auto-color-scheme .d2h-added-tag {
+                border: 1px solid #3fb950;
+                border: 1px solid var(--d2h-dark-ins-label-color)
+            }
+
+            .d2h-auto-color-scheme .d2h-changed-tag {
+                border: 1px solid #d29922;
+                border: 1px solid var(--d2h-dark-change-label-color)
+            }
+
+            .d2h-auto-color-scheme .d2h-moved-tag {
+                border: 1px solid #3572b0;
+                border: 1px solid var(--d2h-dark-moved-label-color)
+            }
         }
     }
 }