Add theme toggle to login screen

eternity-wasteland/styles/styles.css

@@ -32,6 +32,17 @@
   --border-radius: 0;
 }
 
+html[data-theme="light"] {
+  --ink: #11212b;
+  --paper: #f1f1e9;
+  --acid: #c7ef4b;
+  --orange: #ff6b35;
+  --line: #b9c5bc;
+  --muted: #59706b;
+  --field: #fbfbf6;
+  --flash-error: #ffe3d9;
+}
+
 html,
 body,
 #layout,
@@ -49,6 +60,10 @@ body {
   background-size: 70px 70px, 7px 7px;
 }
 
+html[data-theme="light"] body {
+  background-image: linear-gradient(90deg, transparent 49.5%, rgb(17 33 43 / 5%) 50%, transparent 50.5%), linear-gradient(rgb(17 33 43 / 4%) 1px, transparent 1px);
+}
+
 body > #layout,
 #layout {
   position: relative;
@@ -64,6 +79,10 @@ body > #layout,
   background: rgb(22 18 16 / 82%);
 }
 
+html[data-theme="light"] #layout::before {
+  background: rgb(241 241 233 / 82%);
+}
+
 body a,
 body .link,
 #taskmenu a,
@@ -281,6 +300,77 @@ select:focus,
   box-sizing: border-box;
 }
 
+/* Elastic's login controls use more specific component rules than the shared
+   form selectors above, so set the Wasteland surfaces at the login boundary. */
+body.task-login,
+body.task-login #layout-content,
+body.task-login #login-form,
+body.task-login #login-footer {
+  color: var(--ink);
+}
+
+body.task-login #login-form .form-control,
+body.task-login #login-form .input-group-text,
+body.task-login #login-form .input-group .icon {
+  background-color: var(--field) !important;
+  color: var(--ink) !important;
+}
+
+body.task-login #login-form .form-control::placeholder {
+  color: var(--muted);
+  opacity: 1;
+}
+
+.theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 1rem;
+  color: var(--muted);
+  cursor: pointer;
+  font-family: var(--font-family-monospace);
+  font-size: 11px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
+.theme-toggle input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+}
+
+.theme-toggle-track {
+  position: relative;
+  width: 2.5rem;
+  height: 1.25rem;
+  border: 1px solid var(--ink);
+  background: var(--field);
+}
+
+.theme-toggle-track::after {
+  content: "";
+  position: absolute;
+  top: 0.1875rem;
+  left: 0.1875rem;
+  width: 0.75rem;
+  height: 0.75rem;
+  background: var(--orange);
+  transition: transform 150ms ease, background-color 150ms ease;
+}
+
+.theme-toggle input:checked + .theme-toggle-track::after {
+  transform: translateX(1.25rem);
+  background: var(--acid);
+}
+
+.theme-toggle input:focus-visible + .theme-toggle-track {
+  outline: 3px solid var(--acid);
+  outline-offset: 2px;
+}
+
 body.task-login #messagestack {
   top: auto;
   bottom: 1rem;