fix: make the theme toggle visibly change the page

The header, the hero and the footer were Ink in both schemes, so at the
top of the page the sun and moon changed nothing a reader could see, and
the three-state toggle added a "follow system" step that, on a light
system, changed nothing at all. The light scheme now has a white header
and a light hero, and the toggle has two states; the first visit still
follows the system through the palette's media queries.

Author: shenxianpeng

docs/assets/extra.css

@@ -43,6 +43,27 @@
 
 [data-md-color-scheme="default"] {
   --md-typeset-a-color: var(--cc-link);
+  /* A light header in the light scheme, Ink in the dark one, so the header
+     answers the theme toggle like the rest of the page. */
+  --md-primary-fg-color: #ffffff;
+  --md-primary-fg-color--light: #f4f6f7;
+  --md-primary-fg-color--dark: #eef2f4;
+  --md-primary-bg-color: var(--cc-ink);
+  --md-primary-bg-color--light: #4f6270;
+}
+
+[data-md-color-scheme="default"] .md-header {
+  box-shadow: inset 0 -1px 0 #dce3e8;
+}
+
+/* The theme's search field is a translucent black meant for a coloured
+   header; on a white one it needs a solid tint instead. */
+[data-md-color-scheme="default"] .md-search__form {
+  background-color: #eef2f4;
+}
+
+[data-md-color-scheme="default"] .md-search__form:hover {
+  background-color: #e4e9ed;
 }
 
 /* A primary button is Signal Blue with Ink text: white on this blue is 3.1:1,

docs/stylesheets/landing.css

@@ -2477,3 +2477,59 @@
 [data-md-color-scheme="slate"] .md-typeset .cc-group--ink {
   border-color: #22404f;
 }
+
+/* --------------------------------------------------- hero, light scheme -- */
+
+/* In the light scheme the hero is light too, so the theme toggle changes what
+   is on screen at the top of the page. The terminal and the install command
+   stay dark: they stand for a terminal, which is dark in either theme. The
+   Action band and the closing band stay Ink in both schemes as a stage for
+   the demo. */
+[data-md-color-scheme="default"] .md-typeset .cc-hero {
+  background: #ffffff;
+  color: var(--cc-text);
+  box-shadow: inset 0 -1px 0 var(--cc-line);
+}
+
+[data-md-color-scheme="default"] .md-typeset .cc-hero .cc-display {
+  color: var(--cc-text);
+}
+
+[data-md-color-scheme="default"] .md-typeset .cc-hero .cc-accent {
+  /* Signal Blue is 3.1:1 on white, enough for display type (3:1 from 24px). */
+  color: var(--cc-blue);
+}
+
+[data-md-color-scheme="default"] .md-typeset .cc-hero .cc-lede {
+  color: var(--cc-muted);
+}
+
+[data-md-color-scheme="default"] .md-typeset .cc-hero .cc-lede code {
+  color: var(--cc-text);
+}
+
+[data-md-color-scheme="default"] .md-typeset .cc-hero .cc-pill {
+  border-color: #b9dcec;
+  background: var(--cc-tint);
+  color: #135a74;
+}
+
+[data-md-color-scheme="default"] .md-typeset .cc-hero ul.cc-facts {
+  border-top-color: var(--cc-line);
+  color: var(--cc-muted);
+}
+
+[data-md-color-scheme="default"] .md-typeset .cc-hero .cc-install {
+  border-color: var(--cc-ink);
+  background: var(--cc-ink);
+}
+
+[data-md-color-scheme="default"] .md-typeset .cc-hero .cc-term {
+  box-shadow: 0 24px 60px rgba(11, 22, 32, 0.22);
+}
+
+/* The history-line motif's nodes are filled with the ground colour so the
+   lines pass behind them; on the light hero that ground is white. */
+[data-md-color-scheme="default"] .md-typeset .cc-hero__graph circle {
+  fill: #ffffff;
+}

mkdocs.yml

@@ -41,11 +41,11 @@ theme:
   font:
     text: Instrument Sans
     code: JetBrains Mono
+  # Two states, not three. The first visit still follows the system through
+  # the media queries; after that every click visibly changes the page. A
+  # third "follow system" state made one click in three do nothing a reader
+  # could see, which read as a broken toggle.
   palette:
-    - media: "(prefers-color-scheme)"
-      toggle:
-        icon: material/brightness-auto
-        name: Follow system theme
     - media: "(prefers-color-scheme: light)"
       scheme: default
       primary: custom