Make the web version in Staging automatically follow dark mode instead, while keeping IE/.chm support.

ISHelp/Staging/contents.css

@@ -7,12 +7,23 @@
   Style sheet used by contents.htm
 */
 
+:root {
+  color-scheme: light dark;
+  --light-color: WindowText;
+  --dark-color: #d6d6d6;
+  --light-background-color: Window;
+  --dark-background-color: #1f1f1f;
+  --light-tool-background-color: ButtonFace;
+  --dark-tool-background-color: #403E41;
+}
 BODY {
 	font-family: "Segoe UI", Tahoma, sans-serif;
 	font-size: 75%;   /* 9pt (12px/16px) */
 	margin: 0;
-	color: WindowText;
-	background-color: Window;
+	color: WindowText; /* for IE */
+	color: light-dark(var(--light-color), var(--dark-color));
+	background-color: Window; /* for IE */
+	background-color: light-dark(var(--light-background-color), var(--dark-background-color));
 }
 INPUT {
 	font: inherit;
@@ -20,8 +31,10 @@ INPUT {
 
 
 #tabbar {
-	background-color: ButtonFace;
-	color: WindowText;
+	background-color: ButtonFace; /* for IE */
+	background-color: light-dark(var(--light-tool-background-color), var(--dark-tool-background-color));
+	color: WindowText; /* for IE */
+	color: light-dark(var(--light-color), var(--dark-color));
 	padding-top: 6px;
 	cursor: default;
 	-moz-user-select: none;
@@ -31,7 +44,8 @@ INPUT {
 	font-weight: bold;
 }
 #tabbar TD.selectedtab {
-	background-color: Window;
+	background-color: Window; /* for IE */
+	background-color: light-dark(var(--light-background-color), var(--dark-background-color));
 	padding: 2px 6px 3px 6px;
 	border-bottom: none;
 }
@@ -41,7 +55,8 @@ INPUT {
 }
 #tabbar A {
 	background-color: transparent;
-	color: WindowText;
+	color: WindowText; /* for IE */
+	color: light-dark(var(--light-color), var(--dark-color));
 	text-decoration: none;
 	outline: none;
 }
@@ -63,7 +78,8 @@ INPUT {
 #tabbody-contents A:link,
 #tabbody-contents A:visited,
 #tabbody-contents A:active {
-	color: WindowText;
+	color: WindowText; /* for IE */
+	color: light-dark(var(--light-color), var(--dark-color));
 	background-color: transparent;
 	text-decoration: none;
 }
@@ -73,15 +89,18 @@ INPUT {
 }
 #tabbody-contents A.selectedlink:link,
 #tabbody-contents A.selectedlink:visited {
-	color: WindowText;
-	background-color: ButtonFace;
+	color: WindowText; /* for IE */
+	color: light-dark(var(--light-color), var(--dark-color));
+	background-color: ButtonFace; /* for IE */
+	background-color: light-dark(var(--light-tool-background-color), var(--dark-tool-background-color));
 }
 /* It would be cleaner to use :focus, but IE<8 doesn't support it */
 #tabbody-contents A.focusedlink:link,
 #tabbody-contents A.focusedlink:visited {
 	color: HighlightText;
 	background-color: Highlight;
-	outline-color: WindowText;   /* needed for focus rect to appear on Firefox (3.5) */
+	outline-color: WindowText; /* for IE */
+	outline-color: light-dark(var(--light-color), var(--dark-color));   /* needed for focus rect to appear on Firefox (3.5) */
 }
 #tabbody-contents TABLE {
 	border-collapse: collapse;
@@ -110,7 +129,8 @@ INPUT {
 #tabbody-index A:link,
 #tabbody-index A:visited,
 #tabbody-index A:active {
-	color: WindowText;
+	color: WindowText; /* for IE */
+	color: light-dark(var(--light-color), var(--dark-color));
 	background-color: transparent;
 	text-decoration: none;
 }
@@ -121,5 +141,6 @@ INPUT {
 #tabbody-index A:focus {
 	color: HighlightText;
 	background-color: Highlight;
-	outline-color: WindowText;   /* needed for focus rect to appear on Firefox (3.5) */
+	outline-color: WindowText; /* for IE */
+	outline-color: light-dark(var(--light-color), var(--dark-color));   /* needed for focus rect to appear on Firefox (3.5) */
 }

ISHelp/Staging/styles.css

@@ -7,9 +7,20 @@
 	Style sheet used by topic_*.htm
 */
 
+:root {
+  color-scheme: light dark;
+  --light-color: WindowText;
+  --dark-color: #d6d6d6;
+  --light-background-color: Window;
+  --dark-background-color: #1f1f1f;
+  --light-tool-background-color: ButtonFace;
+  --dark-tool-background-color: #403E41;
+}
 BODY {
 	font: small arial, sans-serif;
 	margin: 0;
+	color: light-dark(var(--light-color), var(--dark-color));
+	background-color: light-dark(var(--light-background-color), var(--dark-background-color));
 }
 PRE, TT {
 	font: small "courier new", monospace;
@@ -81,8 +92,10 @@ LI.compact {
 }
 
 .topicheading {
-	background: ButtonFace;
-	color: WindowText;
+	background-color: ButtonFace; /* for IE */
+	background-color: light-dark(var(--light-tool-background-color), var(--dark-tool-background-color));
+	color: WindowText; /* for IE */
+	color: light-dark(var(--light-color), var(--dark-color));
 	padding: 4px 8px;
 	margin: 0;
 	font-size: 120%;
@@ -93,10 +106,13 @@ LI.compact {
 }
 
 .examplebox {
-	background: #f8f8f8;
-	color: black;
+	background-color: #f8f8f8; /* for IE */
+	background-color: light-dark(#f8f8f8, var(--dark-tool-background-color));
+	color: black; /* for IE */
+	color: light-dark(black, var(--dark-color));
 	padding: 4px;
-	border: 1px solid #e0e0e0;
+	border: 1px solid #e0e0e0; /* for IE */
+	border: 1px solid light-dark(#e0e0e0, #716f71);
 	/* on IE6, if the content of the box is wider than the page,
 	   the width of the box is increased. on firefox 1.5, by default
 	   the box width stays the same, and the content is drawn outside
@@ -145,7 +161,7 @@ TD.setuphdrr {
 
 #redirectbox {
 	position: absolute;
-	background: InfoBackground;
+	background-color: InfoBackground;
 	color: InfoText;
 	padding: 16px 24px;
 	border: 1px solid ThreeDDarkShadow;