Add color variants to the template diff for the dark mode

See #5362

diff --git a/wcfsetup/install/files/acp/templates/templateDiff.tpl b/wcfsetup/install/files/acp/templates/templateDiff.tpl
index 563dc68a7d5c176e01270ca83402dadc83cd485f..2b4f30335c33836da5b0e0880337d986e1d965b7 100644 (file)
--- a/wcfsetup/install/files/acp/templates/templateDiff.tpl
+++ b/wcfsetup/install/files/acp/templates/templateDiff.tpl
@@ -52,7 +52,7 @@
 
 {if $diff !== null}
        <div id="fullscreenContainer">
-               <div class="sideBySide">
+               <div class="sideBySide templateDiff">
                        <div class="section">
                                <header class="sectionHeader">
                                        <h2 class="sectionTitle">
@@ -69,13 +69,13 @@
                                                        *}{foreach from=$diff item='line'}{*
                                                                *}{if $line[0] == ' '}{*
                                                                        *}{assign var=removeOffset value=0}{assign var=lineNo value=$lineNo + 1}{*
-                                                                       *}<li value="{$lineNo}" style="margin: 0">{$line[1]}</li>{*
+                                                                       *}<li value="{$lineNo}">{$line[1]}</li>{*
                                                                *}{elseif $line[0] == '-'}{*
                                                                        *}{assign var=removeOffset value=$removeOffset + 1}{assign var=lineNo value=$lineNo + 1}{*
-                                                                       *}<li value="{$lineNo}" style="background-color: lightpink;margin: 0">{$line[1]}</li>{*
+                                                                       *}<li value="{$lineNo}" class="templateDiff--removed">{$line[1]}</li>{*
                                                                *}{elseif $line[0] == '+'}{*
                                                                        *}{assign var=removeOffset value=$removeOffset - 1}{*
-                                                                       *}{if $removeOffset < 0}<li style="list-style-type: none;margin: 0">&nbsp;</li>{/if}{*
+                                                                       *}{if $removeOffset < 0}<li style="list-style-type: none">&nbsp;</li>{/if}{*
                                                                *}{/if}{*
                                                        *}{/foreach}{*
                                                *}</ol>{*
@@ -97,15 +97,15 @@
                                                        *}{foreach from=$diff item='line'}{*
                                                                *}{if $line[0] == ' '}{*
                                                                        *}{if $removeOffset > 0}{*
-                                                                               *}{@'<li style="list-style-type: none;margin: 0">&nbsp;</li>'|str_repeat:$removeOffset}{*
+                                                                               *}{@'<li style="list-style-type: none">&nbsp;</li>'|str_repeat:$removeOffset}{*
                                                                        *}{/if}{*
                                                                        *}{assign var=removeOffset value=0}{assign var=lineNo value=$lineNo + 1}{*
-                                                                       *}<li value="{$lineNo}" style="margin: 0">{$line[1]}</li>{*
+                                                                       *}<li value="{$lineNo}">{$line[1]}</li>{*
                                                                *}{elseif $line[0] == '-'}{*
                                                                        *}{assign var=removeOffset value=$removeOffset + 1}{*
                                                                *}{elseif $line[0] == '+'}{*
                                                                        *}{assign var=removeOffset value=$removeOffset - 1}{assign var=lineNo value=$lineNo + 1}{*
-                                                                       *}<li value="{$lineNo}" style="background-color: lightgreen; margin: 0">{$line[1]}</li>{*
+                                                                       *}<li value="{$lineNo}" class="templateDiff--added">{$line[1]}</li>{*
                                                                *}{/if}{*
                                                        *}{/foreach}{*
                                                *}</ol>{*

diff --git a/wcfsetup/install/files/style/layout/layout.scss b/wcfsetup/install/files/style/layout/layout.scss
index fee0dac51211c0182a46d5babda41a990000ce9a..514879158085c480f966f74c6d1e1f17c8e74bce 100644 (file)
--- a/wcfsetup/install/files/style/layout/layout.scss
+++ b/wcfsetup/install/files/style/layout/layout.scss
@@ -173,6 +173,34 @@ html.iOS select {
        }
 }
 
+.sideBySide.templateDiff {
+       --templateDiff-added-background: #90ee90;
+       --templateDiff-added-color: inherit;
+       --templateDiff-removed-background: #ffb6c1;
+       --templateDiff-removed-color: inherit;
+
+       li {
+               margin: 0;
+       }
+
+       .templateDiff--added {
+               background-color: var(--templateDiff-added-background);
+               color: var(--templateDiff-added-color);
+       }
+
+       .templateDiff--removed {
+               background-color: var(--templateDiff-removed-background);
+               color: var(--templateDiff-removed-color);
+       }
+}
+
+html[data-color-scheme="dark"] .sideBySide.templateDiff {
+       --templateDiff-added-background: #172810;
+       --templateDiff-added-color: #4f9c51;
+       --templateDiff-removed-background: #281010;
+       --templateDiff-removed-color: #d95654;
+}
+
 .inlineItems {
        display: flex;
        flex-wrap: wrap;