diff --git a/index.html b/index.html
index a932e26..98d2248 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,7 @@
 <html lang="en" dir="ltr">
   <head>
 	<meta charset="utf-8"/>
+    <meta name="color-scheme" content="light dark">
     <title>Internationalization Best Practices for Spec Developers</title>
 
     <!--
@@ -552,9 +553,9 @@ <h3>Identifying the language of strings</h3>
 <p>[[[#bidi_strings]]].</p>
 </div>
 
-<div class="note">
+<div class="note" id="string_meta_progress">
 	<p>Work on language and direction metadata for string formats is a work in progress. Specifications might need to include a note indicating the need for future adoption of metadata. Here is a prototype:</p>
-	<p class="example_note" style="background-color:white;border:1px solid green;padding:10px">The field <code>{fieldname}</code> should follow the best practices found in <cite>Strings on the Web: Language and Direction Metadata</cite> [[STRING-META]]. This includes making use of any future standards which emerge regarding the reporting of string language and direction metadata.</p>
+	<p class="example_note">The field <code>{fieldname}</code> should follow the best practices found in <cite>Strings on the Web: Language and Direction Metadata</cite> [[STRING-META]]. This includes making use of any future standards which emerge regarding the reporting of string language and direction metadata.</p>
 </div>
 
 <div class="req" id="bp_lang_field_based_metadata">
diff --git a/local.css b/local.css
index 05d7c85..b498844 100644
--- a/local.css
+++ b/local.css
@@ -22,7 +22,7 @@
         font-family: Arial, monospace;
 		font-size: 0.75em;                    
 		letter-spacing: 0.03em;
-		color: brown;
+		color: var(--uname-text);
 	}
 /** end of unicode styles */
 
@@ -33,24 +33,49 @@
  * (currently respec_2022.css). * 
  */
 
-
-
-.bp { /*background-color:#ffffcc; border: 1px solid #ccc;*/ 
-	background-color: #feb; 
-	border-radius: 8px; 
-	border-radius: 4px; 
-	padding: 10px; 
-	position: relative;  
-	margin: 30px; 
-	margin-right: 60px; 
-	}
-.bp a {
-	font-style: italic;
-	}
-.bp a.local { 
-	display:none;
+:root {
+	--blue: blue;
+	--checklistGroup-li-bg: antiquewhite;
+	--checklistGroup-li-input: chocolate;
+	--checklistGroup-li: brown;
+	--example-note-bg: white;
+	--exampleNamesTable-td-border: #ddd;
+	--exampleNamesTable-tr-2n: #f2f2f2;
+	--exampleNamesTable-tr-hover: var(--exampleNamesTable-td-border);
+	--h4-color: #005a9c;
+	--links-bg: #EFEFF9;
+	--links-title-text: #005a9c;
+	--localdef-bg: white;
+	--localdef-border: brown;
+	--review-comments-bg: #EFEFF9;
+	--summary-text: saddlebrown;
+	--uname-text: brown;
+	--xref-bg: #fbf4e0;
+	}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--blue: rgb(51 125 255);
+		--checklistGroup-li-bg: rgb(69 43 9);
+		--checklistGroup-li-input: rgb(228 132 63);
+		--checklistGroup-li: rgb(215 99 99);
+		--example-note-bg: #181a1b;
+		--exampleNamesTable-td-border: rgb(58 62 65);
+		--exampleNamesTable-tr-2n: rgb(31 34 35);
+		--exampleNamesTable-tr-hover: var(--exampleNamesTable-td-border);
+		--h4-color: rgb(110 194 255);
+		--links-bg: rgb(30 33 34);
+		--links-title-text: rgb(110 194 255);
+		--localdef-bg: rgb(24 26 27);
+		--localdef-border: rgb(154 39 39);
+		--review-comments-bg: rgb(30 33 34);
+		--summary-text: rgb(236 164 113);
+		--uname-text: rgb(215 99 99);
+		--xref-bg: rgb(53 42 11);
+		}
 	}
 
+
 .advisement { /*background-color:#ffffcc; border: 1px solid #ccc;*/ 
 	border-radius: 4px; 
 	position: relative;  
@@ -66,38 +91,6 @@ body {
 	counter-reset: advisement;                  		 /* Set the section counter to 0 */
 	/*counter-reset: bp;                  		  Set the section counter to 0 */
 	}
-a.self {
-    position: absolute;
-    top: -20px;
-    border: medium none;
-    transition: opacity 0.2s ease 0s;
-    opacity: 0.5;
-	color: #999;
-	text-decoration: none;
-	}
-a.self:visited {
-	color: #999;
-	}
-a.self:hover {
-	color: red;
-	}
-a.self::after {
-	content:  attr(href); 	
-	font-weight: normal;
-	font-style: italic;
-	font-size: 80%;
-	}
-
-.editor-note { 
-	font-style: italic; 
-	color: teal;
-	}
-.ed { 
-	font-style: italic; 
-	color: white;
-	background-color: #F90;
-	padding-left: 10px; padding-right: 10px; 
-	}
 
 .new-term { 
 	font-weight: bold 
@@ -105,10 +98,6 @@ a.self::after {
 code { 
 	font-family: monospace; 
 	}
-del { 
-	display: inline; 
-	color: silver; 
-	}
 section h2 {
 	margin-top: 5em;
 	margin-bottom: 0em;
@@ -117,23 +106,10 @@ section h2 {
 	margin-top: 0;
 	}
 
-ins { 
-	background-color: #99FF99; 
-	text-decoration: none; 
-	}
 .term { 
 	font-weight: bold;
 	margin-top: 1em;
 	}
-.definition {
-    position: relative;
-    background-color: #efefef;
-    padding: 0.5em;
-    border: 0.5em;
-    border-left: 6pt solid green;
-    border-right: 6pt solid green;
-    margin: 1em auto;
-}
 a.termref:link {
 	color:#C60;
 	text-decoration:none;
@@ -171,23 +147,7 @@ a.termref:active {
 	background-color: #E2FFF0;
 	font-size: 0.8em;
 	}
-span.note-head {
-	padding: .2em;
-	color:#066;
-	border: none;
-	position:relative;
-	display: block;
-	width: 40px;
-	left: -1.5em;
-	top: -.5em;
-	background: #F2FFF1;
-	padding-left: .2em;
-	text-align: center;
-	}
 	  
-.counterstyle { margin: 20px 30px; }
-.counterstyle code { font-family: "Lucida Console", Monaco, monospace; color: black; font-size: 12px; }
-
 @media print {
  .bp { background: #ffcc99 }
 
@@ -198,7 +158,7 @@ body { font-size: 80%; margin: 2em; }
 
 
 
-h4 { 	color: #005a9c; margin-top: 2em;  }
+h4 { 	color: var(--h4-color); margin-top: 2em;  }
 .indent { margin-left: 3em; }
 
 .links h4, .xref h4 {
@@ -213,7 +173,7 @@ h4 { 	color: #005a9c; margin-top: 2em;  }
 	/*background-color: #a09de5; border: 1px solid #ccc; */  
 	font-size: 90%; 
 	padding: 1em;
-	background-color: #EFEFF9; 
+	background-color: var(--links-bg);
 	border-radius: 5px;
 	/*margin-bottom: 20px; 
 	float: left; width: 60%;*/  
@@ -222,7 +182,7 @@ h4 { 	color: #005a9c; margin-top: 2em;  }
 	/* background-color: #feb; border: 1px solid #fc0; border-radius: 10px;*/  
 	font-size: 80%; 
 	padding: 1em; 
-	background-color: #fbf4e0;
+	background-color: var(--xref-bg);
 	border-radius: 5px;
 	/*margin-bottom: 40px; 
 	float: right;  width: 30%;*/ 
@@ -238,7 +198,7 @@ h4 { 	color: #005a9c; margin-top: 2em;  }
 
 .bigtext {
     font-size: 36pt;
-    color: blue;
+    color: var(--blue);
     text-align: left;
     }
 
@@ -251,11 +211,6 @@ table.cpExample {
     width: 80%;
     }
     
-p.sidenote {
-    color: gray;
-    font-size:60%;
-    }
-    
 table.truncExample th,
 table.truncExample td {	
     vertical-align: top;
@@ -263,7 +218,7 @@ table.truncExample td {
     
 table.truncExample kbd,
 table.truncExample code {
-    color: blue;
+    color: var(--blue);
     font-size: larger;
     }
 
@@ -366,7 +321,7 @@ table.whitespace caption {
 	}
 
 
-.links_title { margin-top: 0; font-weight: bold; color: #005a9c; }
+.links_title { margin-top: 0; font-weight: bold; color: var(--links-title-text); }
 .links_subtitle { font-style: italic; margin-block-start: 1rem; margin-bottom: 0; }
 
 
@@ -377,8 +332,8 @@ table.whitespace caption {
     padding-inline: 1rem;
     padding-block: .3em;
     min-height: 2rem;
-    color: brown;
-    background-color: antiquewhite;
+    color: var(--checklistGroup-li);
+    background-color: var(--checklistGroup-li-bg);
     border-radius: 5px;
     font-size: 95%;
     }
@@ -389,7 +344,7 @@ table.whitespace caption {
     margin-inline-start: 1rem;
     }
 .checklistGroup li input {
-    accent-color: chocolate;
+    accent-color: var(--checklistGroup-li-input);
     }
 .checklist summary {
     font-weight: normal;
@@ -400,7 +355,7 @@ table.whitespace caption {
     margin-inline-start: 2rem;
     }
 .summaryC summary {
-    color: saddlebrown;
+    color: var(--summary-text);
     font-weight: normal;
     cursor: pointer;
     }
@@ -414,7 +369,7 @@ table.whitespace caption {
 .reviewComments {
 	font-size: 90%;
 	padding: 1em;
-	background-color: #EFEFF9;
+	background-color: var(--review-comments-bg);
 	border-radius: 5px;
 	margin-block: 0;
 	font-style: italic;
@@ -426,13 +381,13 @@ table.whitespace caption {
 }
 
 .exampleNamesTable td, .exampleNamesTable th {
-  border: 1px solid #ddd;
+  border: 1px solid var(--exampleNamesTable-td-border);
   padding: 8px;
 }
 
-.exampleNamesTable tr:nth-child(even){background-color: #f2f2f2;}
+.exampleNamesTable tr:nth-child(even){background-color: var(--exampleNamesTable-tr-2n);}
 
-.exampleNamesTable tr:hover {background-color: #ddd;}
+.exampleNamesTable tr:hover {background-color: var(--exampleNamesTable-tr-hover);}
 
 .exampleNamesTable th {
   cursor: pointer;
@@ -456,8 +411,14 @@ td.exampleChar {
 }
 
 .localdef {
-    background-color:white;
-    border: 1px solid brown; 
+    background-color:var(--localdef-bg);
+    border: 1px solid var(--localdef-border); 
     margin:0.5em; 
     padding:0.5em;
 }
+
+#string_meta_progress p.example_note {
+    background-color: var(--example-note-bg);
+    border: 1px solid green;
+    padding:10px;
+}
