Voeg darkmode styles toe voor rules

Hiermee zijn ze leesbaar in dark mode
Logius-standaarden · Feb 19, 2025 · b8e6cb9 · b8e6cb9
1 parent e56c273
commit b8e6cb9
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -11,6 +11,7 @@
   </title>
   <!-- Invullen: de naam van de lokale CSS file =============================================== -->
   <link href="./media/style.css" rel="stylesheet" type="text/css"/>
+  <link href="./media/dark.css" rel="stylesheet" type="text/css"/ media="(prefers-color-scheme: dark)">
   <script class="remove" src="https://logius-standaarden.github.io/publicatie/respec/organisation-config.js">
   </script>
   <script class="remove" src="js/config.js">

diff --git a/media/dark.css b/media/dark.css
@@ -0,0 +1,3 @@
+:root {
+  --logius-rule-background: var(--borderedblock-bg);
+}
diff --git a/media/style.css b/media/style.css
@@ -1,15 +1,19 @@
-/*-- Design rule block ------------------------------------------------------------*/
+:root {
+  --logius-rule-background: rgb(241, 246, 253);
+}
+
+/*-- Design rule block ------------------------------------------------------------*/
 .rule {
   margin: 1em 0;
   padding: 1em 2em;
   border-left-width: 0.5em;
   border-left-style: solid;
   border-color: #8CCBF2;
-  background: rgb(241, 246, 253);
+  background: var(--logius-rule-background);
 }
 
 .rulelab {
-  color: #005A9C;
+  color: var(--a-normal-text);
 }
 
 .rulelab a {