[css-color-adjust-1] Squash the first two color-scheme examples together and lightly edit the text. Add examples of using single values.

Author: tabatkins

css-color-adjust-1/Overview.bs

@@ -222,36 +222,80 @@ Opting Into a Preferred Color Scheme: the 'color-scheme' property {#color-scheme
 	is still not guaranteed to have any effect on the rendering of the element.
 
 	<div class=example>
-		A well-written page--
-		one that responds to user preferences for light or dark display
+		A page that responds to user preferences for light or dark display
 		by using the 'prefers-color-scheme' media feature
-		to alter the colors it uses--
+		to alter the colors it uses
 		can easily opt the browser-controlled UI
 		(scrollbars, inputs, etc)
-		into the user's preferred color scheme as well
+		to match
 		with a simple global declaration:
 
 		<pre highlight=css>
 		:root {
 			color-scheme: light dark;
 		}
 		</pre>
+
+		If a page limits itself to using <em>only</em> the <<system-color>>s,
+		the 'color-scheme' declaration, above,
+		will support the user's preferred color scheme
+		even without the author needing to use ''@media'' at all.
 	</div>
 
 	<div class=example>
-		If a page limits itself to using <em>only</em> the <<system-color>>s,
-		it can support the user's preferred color scheme
-		without needing to use ''@media'' at all,
-		simply by using the 'color-scheme' property:
+		If a page cannot reasonably accommodate all color schemes,
+		such as for branding or theatrical reasons,
+		'color-scheme' can still indicate which color schemes the page <em>can</em> support,
+		causing the UI to match.
+
+		If the page's color scheme is primarily light,
+		the following will indicate that explicitly:
+
+		<pre highlight=css>
+		:root {
+			color-scheme: light;
+		}
+		</pre>
+
+		While if the page is primarily dark,
+		indicating that explicitly will make the page look more coherent as well:
+
+		<pre highlight=css>
+		:root {
+			color-scheme: dark;
+		}
+		</pre>
+
+		However, it is better to support both color schemes,
+		of course.
+	</div>
+
+	<div class=example>
+		A page might be generally capable of handling multiple color schemes,
+		while still having a sub-section that needs to be rendered in a particular color scheme.
+
+		For example,
+		a style guide might give several UI examples that are using light or dark colors,
+		showing off the light or dark theme specifically.
+		This can be indicated as:
 
 		<pre highlight=css>
 		:root {
 			color-scheme: light dark;
 		}
+
+		.light-theme-example {
+			color-scheme: light;
+		}
+
+		.dark-theme-example {
+			color-scheme: dark;
+		}
 		</pre>
 
-		because the [=used color scheme=]
-		affects what <<system-color>>s resolve to.
+		Only the subsections rooted at ''.light-theme-example'' or ''.dark-theme-example''
+		will be opted into the ''light'' or ''dark'' themes specifically;
+		the rest of the page will respect the user's preference.
 	</div>
 
 	Note: [[HTML]] specifies a