From 07bb5f63f9d57d7ac2a95d0bf7560a985078cfbc Mon Sep 17 00:00:00 2001
From: Henri Vasserman <henv@hot.ee>
Date: Wed, 26 Mar 2025 21:44:20 +0200
Subject: [PATCH] fix(docs): Make dark mode diff lines readable (#130)

* fix(docs): Make dark mode diff lines readable

If using dark mode, these lines are not legible at all. I separated the colors into variables and added
more contrasting colors for the dark mode.

* chore: add to changelog
---
 docs/docs/CHANGELOG.md  | 1 +
 docs/src/css/custom.css | 8 ++++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/docs/docs/CHANGELOG.md b/docs/docs/CHANGELOG.md
index eac4599..aad5375 100644
--- a/docs/docs/CHANGELOG.md
+++ b/docs/docs/CHANGELOG.md
@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed bot check to only apply if address range matches
 - Fix default difficulty setting that was broken in a refactor
 - Linting fixes
+- Make dark mode diff lines readable in the documentation
 
 ## v1.14.2
 
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 84b09b1..ccb7daf 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -15,6 +15,8 @@
   --ifm-color-primary-lightest: #3cad6e;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --code-block-diff-add-line-color: #ccffd8;
+  --code-block-diff-remove-line-color: #ffebe9;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -27,10 +29,12 @@
   --ifm-color-primary-lighter: #32d8b4;
   --ifm-color-primary-lightest: #4fddbf;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --code-block-diff-add-line-color: #216932;
+  --code-block-diff-remove-line-color: #8b423b;
 }
 
 .code-block-diff-add-line {
-  background-color: #ccffd8;
+  background-color: var(--code-block-diff-add-line-color);
   display: block;
   margin: 0 -40px;
   padding: 0 40px;
@@ -44,7 +48,7 @@
 }
 
 .code-block-diff-remove-line {
-  background-color: #ffebe9;
+  background-color: var(--code-block-diff-remove-line-color);
   display: block;
   margin: 0 -40px;
   padding: 0 40px;