Dark: For content pages using transparent images...

...which are unreadable in dark mode, use `has-dark-mode-background`
class.

    ![](/img.png){: class="has-dark-mode-background" }

Like this. And it will be given a nice light gray background and a
subtle padding & border.

2 files changed, 14 insertions, 8 deletions

diff --git a/pydis_site/apps/content/resources/guides/python-guides/mutability.md b/pydis_site/apps/content/resources/guides/python-guides/mutability.md
index 185dc87c..e180fd16 100644
--- a/pydis_site/apps/content/resources/guides/python-guides/mutability.md
+++ b/pydis_site/apps/content/resources/guides/python-guides/mutability.md
@@ -30,11 +30,11 @@ It just returns a new one.
 Let's examine what's going on here.
 At first, the variable `s` refers to some object, the string `'hello'`.
 
-![s refers to the string "hello"](/static/images/content/mutability/s_refers_hello.png)
+![s refers to the string "hello"](/static/images/content/mutability/s_refers_hello.png){: class="has-dark-mode-background" }
 
 When you call `s.upper()`, a new string, which contains the characters `'HELLO'`, gets created.
 
-![s.upper creates "HELLO"](/static/images/content/mutability/s_upper_creates_HELLO.png)
+![s.upper creates "HELLO"](/static/images/content/mutability/s_upper_creates_HELLO.png){: class="has-dark-mode-background" }
 
 This happens even if you just call `s.upper()` without any assignment, on its own line:
 ```python
@@ -44,12 +44,12 @@ In this case, a new object will be created and discarded right away.
 
 Then the assignment part comes in: the name `s` gets disconnected from `'hello'`, and gets connected to `'HELLO'`.
 
-![s gets assigned to "HELLO"](/static/images/content/mutability/s_gets_assigned_to_HELLO.png)
+![s gets assigned to "HELLO"](/static/images/content/mutability/s_gets_assigned_to_HELLO.png){: class="has-dark-mode-background" }
 
 Now we can say that `'HELLO'` is stored in the `s` variable.
 
 Then, because no variables refer to the _object_ `'hello'`, it gets eaten by the garbage collector.
 
-!["hello" Gets Eaten](/static/images/content/mutability/hello_gets_eaten.png)
+!["hello" Gets Eaten](/static/images/content/mutability/hello_gets_eaten.png){: class="has-dark-mode-background" }
 
 It means that the memory reserved for that object will be freed. If that didn't happen, the 'garbage' would accumulate over time and fill up all the RAM.
diff --git a/pydis_site/static/css/content/page.css b/pydis_site/static/css/content/page.css
index 903b2134..b174e8d7 100644
--- a/pydis_site/static/css/content/page.css
+++ b/pydis_site/static/css/content/page.css
@@ -114,10 +114,6 @@ li img {
     margin-top: 0.5em;
 }
 
-[data-theme="dark"] hr {
-    background-color: #4c515a;
-}
-
 .dropdown-menu {
     min-width: 15rem;
 }
@@ -126,3 +122,13 @@ a.dropdown-item {
     white-space: normal;
     padding-right: 0;
 }
+
+[data-theme="dark"] hr {
+    background-color: #4c515a;
+}
+
+[data-theme="dark"] .has-dark-mode-background {
+    background-color: #EDEDED;
+    border-radius: .1rem;
+    padding: .3rem;
+}