From 3c87027bb4e7f598f27c47ca5be29fb7b5efb2da Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 16 May 2023 13:39:37 +0200
Subject: [PATCH] Add color variants to the template diff for the dark mode

See #5362
---
 .../files/acp/templates/templateDiff.tpl      | 14 +++++-----
 .../install/files/style/layout/layout.scss    | 28 +++++++++++++++++++
 2 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/wcfsetup/install/files/acp/templates/templateDiff.tpl b/wcfsetup/install/files/acp/templates/templateDiff.tpl
index 563dc68a7d..2b4f30335c 100644
--- 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 fee0dac512..5148791580 100644
--- 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;
-- 
2.20.1