styles for metro web

src/style.css

@@ -12,6 +12,96 @@
  * HTML & BODY STYLES IN `web/index.html` and `bskyweb/templates/base.html`
  */
 
+/**
+ * Base shell styles, duplicated from the inline <style> blocks in
+ * `web/index.html` and `bskyweb/templates/base.html`. The Metro dev server
+ * serves its own HTML shell that contains none of those styles, so without
+ * this copy the page has no root sizing and no `theme--*` backgrounds (the
+ * background stops at the first viewport height). In production these rules
+ * are identical to the inline ones, so loading both is harmless. Keep all
+ * locations in sync.
+ */
+html,
+body {
+  margin: 0px;
+  padding: 0px;
+  font-family:
+    InterVariable,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Liberation Sans',
+    Helvetica,
+    Arial,
+    sans-serif;
+  text-rendering: optimizeLegibility;
+  /* Platform-specific reset */
+  -webkit-overflow-scrolling: touch;
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -ms-overflow-style: scrollbar;
+  font-synthesis-weight: none;
+}
+:root {
+  --text: black;
+  --background: white;
+  --backgroundLight: #e2e7ee;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+    --text: white;
+    --background: black;
+    --backgroundLight: #232e3e;
+  }
+}
+html,
+body,
+#root {
+  display: flex;
+  flex: 1 0 auto;
+  min-height: 100%;
+  width: 100%;
+}
+html.theme--light,
+html.theme--light body,
+html.theme--light #root {
+  background-color: white;
+  --text: black;
+  --background: white;
+  --backgroundLight: #dce2ea;
+}
+html.theme--dark,
+html.theme--dark body,
+html.theme--dark #root {
+  color-scheme: dark;
+  background-color: black;
+  --text: white;
+  --background: black;
+  --backgroundLight: #232e3e;
+}
+html.theme--dim,
+html.theme--dim body,
+html.theme--dim #root {
+  color-scheme: dark;
+  background-color: #151d28;
+  --text: white;
+  --background: #151d28;
+  --backgroundLight: #2c3a4e;
+}
+/**
+ * We need these styles to prevent shifting due to scrollbar show/hide on
+ * OSs that have them enabled by default. This also handles cases where the
+ * screen wouldn't otherwise scroll, and therefore hide the scrollbar and
+ * shift the content, by forcing the page to show a scrollbar.
+ */
+body {
+  width: 100%;
+  overflow-y: scroll;
+}
+
 /* Buttons and inputs have a font set by UA, so we'll have to reset that */
 button,
 input,