Merge pull request #2672 from w3c/dark-mode

mattgarrish · web-flow · commit c5e84bab0e5a · 2025-03-13T12:54:54.000-04:00
Added dark mode to the core spec
diff --git a/epub33/a11y/index.html b/epub33/a11y/index.html
@@ -3,6 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<title>EPUB Accessibility 1.1</title>
+		<meta name="color-scheme" content="light dark">
 		<script src="https://www.w3.org/Tools/respec/respec-w3c" class="remove"></script>
 		<script src="../common/js/fix-errata.js" class="remove"></script>
 		<script src="../common/js/css-inline.js" class="remove"></script>
diff --git a/epub33/common/css/common.css b/epub33/common/css/common.css
@@ -48,8 +48,6 @@ dl.elemdef dfn {
 }
 
 /*  EBNF tables */
-
-
 table.productionset {
     border: none;
     border-left: 5px solid rgb(145,200,255);
@@ -169,8 +167,6 @@ td[headers="tbl-cmt-appl"] {
 }
 
 
-
-
 /****************************************************/
 /*  property tables                                 */
 /****************************************************/
@@ -249,7 +245,6 @@ table.prefix caption {
     font-size: 90%
 }
 
-
 /* Table zebra style... */
 
 table.zebra {
@@ -286,7 +281,6 @@ table.zebra tr:nth-child(even) {
 table.zebra th{border-bottom:1px solid #bbb;padding:.2em 1em;}
 table.zebra td{border-bottom:1px solid #ddd;padding:.2em 1em;}
 
-
 p.support {
 	border-left: 0.4rem solid rgb(255,255,0);
 	background-color: rgb(255,255,230);
@@ -327,3 +321,57 @@ a.epubcheck {
     background-color: antiquewhite ;
 }
 
+/***************** Dark mode settings ******************/
+
+body.darkmode details.explanation, body.darkmode details.desc {
+    color: black;
+    background-color: hsla(240, 0%, 68%, 1.0);
+}
+
+body.darkmode table.zebra tr:nth-child(even) {
+    color: black;
+}
+
+body.darkmode dl.elemdef,
+body.darkmode table.tabledef th,
+body.darkmode table.tabledef td,
+body.darkmode table.productionset
+{
+    background-color: hsl(240, 0%, 20%);
+    color: #ddd
+}
+
+body.darkmode table.tabledef div.note {
+    background: hsl(0, 0%, 15%);
+}
+
+body.darkmode p.caution, body.darkmode div.caution {
+    background-color: hsl(180, 40%, 20%);
+}
+
+body.darkmode div.caution-title > span {
+    color: rgb(255,140,0)
+}
+
+body.darkmode details.respec-tests-details[open] {
+    background-color: antiquewhite;
+    color: black;
+}
+
+body.darkmode details.explanation a,
+body.darkmode table.productionset a
+{
+    color: hsla(213, 100%, 48%, 1.0);
+}
+
+body.darkmode table.prefix th {
+    color: hsl(66, 100%, 95%);
+}
+
+body.darkmode img {
+    background: hsl(48, 33%, 93%) ;
+}
+
+
+
+
diff --git a/epub33/core/index.html b/epub33/core/index.html
@@ -2,7 +2,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
 	<head>
 		<meta charset="utf-8" />
-		<title>EPUB 3.3</title>
+        <title>EPUB 3.3</title>
+		<meta name="color-scheme" content="light dark">
 		<script src="https://www.w3.org/Tools/respec/respec-w3c" class="remove"></script>
 		<script src="./biblio.js" class="remove"></script>
 		<script src="../common/js/fix-errata.js" class="remove"></script>
diff --git a/epub33/rs/index.html b/epub33/rs/index.html
@@ -3,6 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<title>EPUB Reading Systems 3.3</title>
+		<meta name="color-scheme" content="light dark">
 		<script src="https://www.w3.org/Tools/respec/respec-w3c" class="remove"></script>
 		<script src="../common/js/fix-errata.js" class="remove"></script>
 		<script src="../common/js/css-inline.js" class="remove"></script>
