From 4467015d25381507d5e591bc6b6f6e66861a72dc Mon Sep 17 00:00:00 2001
From: Michael Ball <michael@mball.co>
Date: Tue, 20 Aug 2024 02:49:33 -0700
Subject: [PATCH] Fixup some dark mode stuff...

---
 _sass/color_schemes/dark_overrides.scss             |  8 ++++++++
 _sass/color_schemes/light.scss                      |  2 --
 _sass/custom/custom.scss                            |  6 ++++++
 .../{a11y-dark.css => a11y-dark.scss}               |  0
 .../{a11y-light.css => a11y-light.scss}             | 13 ++++++++++---
 docs/a11y.md                                        |  2 ++
 6 files changed, 26 insertions(+), 5 deletions(-)
 create mode 100644 _sass/color_schemes/dark_overrides.scss
 rename _sass/snytax_highliters/{a11y-dark.css => a11y-dark.scss} (100%)
 rename _sass/snytax_highliters/{a11y-light.css => a11y-light.scss} (89%)

diff --git a/_sass/color_schemes/dark_overrides.scss b/_sass/color_schemes/dark_overrides.scss
new file mode 100644
index 0000000..8121146
--- /dev/null
+++ b/_sass/color_schemes/dark_overrides.scss
@@ -0,0 +1,8 @@
+
+@mixin dark-mode-overrides {
+
+  p.important-title > p:first-child,
+  blockquote.important-title > p:first-child {
+    color: #8975FF;
+  }
+}
diff --git a/_sass/color_schemes/light.scss b/_sass/color_schemes/light.scss
index 06b3c98..5b0a71d 100644
--- a/_sass/color_schemes/light.scss
+++ b/_sass/color_schemes/light.scss
@@ -24,5 +24,3 @@ $search-result-preview-color: $grey-dk-000 !default;
 
 // Minimum lightness on white.
 $body-lighter-color: $grey-dk-100;
-
-$code-background-color: #fefefe;
diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss
index f2cca91..7c61d66 100644
--- a/_sass/custom/custom.scss
+++ b/_sass/custom/custom.scss
@@ -8,5 +8,11 @@
 @import '../just-the-class/just-the-class';
 @import '../berkeley/berkeley';
 
+@import '../color_schemes/dark_overrides';
+
+@if $color-scheme == dark {
+  @include dark-mode-overrides;
+}
+
 // Place all of your course-specific CSS here.
 @import './course_overrides';
diff --git a/_sass/snytax_highliters/a11y-dark.css b/_sass/snytax_highliters/a11y-dark.scss
similarity index 100%
rename from _sass/snytax_highliters/a11y-dark.css
rename to _sass/snytax_highliters/a11y-dark.scss
diff --git a/_sass/snytax_highliters/a11y-light.css b/_sass/snytax_highliters/a11y-light.scss
similarity index 89%
rename from _sass/snytax_highliters/a11y-light.css
rename to _sass/snytax_highliters/a11y-light.scss
index fc95d77..25ed7b0 100644
--- a/_sass/snytax_highliters/a11y-light.css
+++ b/_sass/snytax_highliters/a11y-light.scss
@@ -3,13 +3,17 @@
 /* @author: ericwbailey */
 /* Adapted to pygments/rouge by @cycomachead */
 
+// Todo this is a bit too light.
+// This needs to be set for other files.
+$code-background-color: #fafafa;
+
 :root {
-  --pygments-a11y-bg-color: #fefefe;
+  --pygments-a11y-bg-color: $code-background-color;
   --pygments-a11y-light-on-dark: #FFF; /* Used for errors */
   --pygments-a11y-light-gray: #696969; /* comments */
   --pygments-a11y-dark-gray: #545454;
   --pygments-a11y-purple: #7928a1;
-  --pygments-a11y-blue: #007faa;
+  --pygments-a11y-blue: #007f95;
   --pygments-a11y-green: #008000;
   --pygments-a11y-yellow: #aa5d00; /* attributes */
   --pygments-a11y-orange: #aa5d00;
@@ -17,9 +21,12 @@
 }
 
 .highlight,
-pre.highlight {
+.highlight pre,
+.highlight pre.highlight {
   background: var(--pygments-a11y-bg-color);
   color: var(--pygments-a11y-dark-gray);
+  border: 1px solid var(--pygments-a11y-dark-gray);
+  border-radius: 4px;
 }
 
 .highlight pre,
diff --git a/docs/a11y.md b/docs/a11y.md
index 80e22cb..bf943cc 100644
--- a/docs/a11y.md
+++ b/docs/a11y.md
@@ -37,6 +37,8 @@ After passing all tests, add the following to your README:
 ```markdown
 [![Run rspec tests](https://github.com/ORG/REPO/actions/workflows/rspec.yml/badge.svg)](https://github.com/ORG/REPO/actions/workflows/rspec.yml)
 ```
+{: tabindex=0 }
+
 
 ## Test Details