diff --git a/assets/theme-css/notices.css b/assets/theme-css/notices.css
index 859520ab..a842ad1f 100644
--- a/assets/theme-css/notices.css
+++ b/assets/theme-css/notices.css
@@ -21,40 +21,46 @@
   background: var(--colorNoteHeading);
 }
 .note-notice .notice-content {
-  background: var(--colorNoteContent);
+  background: var(--colorNoteBackground);
+  color: var(--colorText);
 }
 
 .info-notice .notice-type {
   background: var(--colorInfoHeading);
 }
 .info-notice .notice-content {
-  background: var(--colorInfoContent);
+  background: var(--colorInfoBackground);
+  color: var(--colorText);
 }
 
 .warning-notice .notice-type {
   background: var(--colorWarningHeading);
 }
 .warning-notice .notice-content {
-  background: var(--colorWarningContent);
+  background: var(--colorWarningBackground);
+  color: var(--colorText);
 }
 
 .tip-notice .notice-type {
   background: var(--colorTipHeading);
 }
 .tip-notice .notice-content {
-  background: var(--colorTipContent);
+  background: var(--colorTipBackground);
+  color: var(--colorText);
 }
 
 .mission-notice .notice-type {
   background: var(--colorNoteHeading);
 }
 .mission-notice .notice-content {
-  background: var(--colorNoteContent);
+  background: var(--colorNoteBackground);
+  color: var(--colorText);
 }
 
 .values-notice .notice-type {
   background: var(--colorNoteHeading);
 }
 .values-notice .notice-content {
-  background: var(--colorNoteContent);
+  background: var(--colorNoteBackground);
+  color: var(--colorText);
 }
diff --git a/assets/theme-css/vars.css b/assets/theme-css/vars.css
index 72009db0..c8f794dc 100644
--- a/assets/theme-css/vars.css
+++ b/assets/theme-css/vars.css
@@ -31,16 +31,16 @@
 
     /* FIXME: These colors should probably use named colors. */
   --colorNoteHeading: #6ab0de;
-  --colorNoteContent: #e7f2fa;
+  --colorNoteBackground: #e7f2fa;
 
   --colorInfoHeading: #f0b37e;
-  --colorInfoContent: #fff2db;
+  --colorInfoBackground: #fff2db;
 
   --colorWarningHeading: rgba(217, 83, 79, 0.8);
-  --colorWarningContent: #fae2e2;
+  --colorWarningBackground: #fae2e2;
 
   --colorTipHeading: rgba(92, 184, 92, 0.8);
-  --colorTipContent: #e6f9e6;
+  --colorTipBackground: #e6f9e6;
 
   /* Color from bulma.css, but this variable is currently only used for
    dark mode. */
@@ -64,6 +64,11 @@
 
     --colorBlockBackground: var(--colorPrimaryDark);
     --colorCode: #ffb8d1;
+
+    --colorNoteBackground: #3f5565;
+    --colorInfoBackground: #45413a;
+    --colorWarningBackground: #433c3c;
+    --colorTipBackground: #3e433e;
   }
   html {
     background: var(--colorBackground);