Fixup some dark mode stuff...

berkeley-cdss · Aug 20, 2024 · 4467015 · 4467015
1 parent 4618586
commit 4467015
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 5 deletions.
diff --git a/_sass/color_schemes/dark_overrides.scss 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
@@ -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
@@ -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 → _sass/snytax_highliters/a11y-dark.scss b/_sass/snytax_highliters/a11y-dark.css → _sass/snytax_highliters/a11y-dark.scss
diff --git a/_sass/snytax_highliters/a11y-light.css → _sass/snytax_highliters/a11y-light.scss b/_sass/snytax_highliters/a11y-light.css → _sass/snytax_highliters/a11y-light.scss
@@ -3,23 +3,30 @@
 /* @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;
   --pygments-a11y-red: #d91e18;
 }
 
 .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
@@ -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
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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;