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

@@ -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
 

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;