Light mode

web/src/AnalyticsNudge.scss

@@ -11,7 +11,7 @@
   position: fixed;
   z-index: $z-analyticsNudge;
   border: 1px solid $color-gray-50;
-  box-shadow: 0px 3px 10px 0px rgba($color-gray-20, $translucent-ish);
+  box-shadow: 0px 3px 10px 0px rgba(var(--color-gray-20-rgb), $translucent-ish);
 
   // by default, it's hidden
   display: flex;

web/src/ApiButton.tsx

@@ -257,7 +257,7 @@ const StyledDialogCloseButton = styled(IconButton)`
 
 const StyledDialogContent = styled(DialogContent)`
   padding: 24px;
-  background-color: white;
+  background-color: ${Color.white};
 `
 
 const StyledDialogActions = styled(DialogActions)`
@@ -279,7 +279,7 @@ const CancelButton = styled(Button)`
 
 const ConfirmButton = styled(Button)`
   background-color: ${Color.green};
-  color: white;
+  color: ${Color.white};
 
   &:hover {
     background-color: ${Color.greenLight};

web/src/FloatDialog.tsx

@@ -36,15 +36,15 @@ export let Title = styled.h2`
 export let HR = styled.hr`
   border-top: 1px dashed ${Color.gray50};
   margin: 16px -20px 24px -20px;
-  color: white;
+  color: ${Color.white};
 `
 
 let CloseButton = styled.button`
   display: flex;
   align-items: center;
   border: 0;
   cursor: pointer;
-  background-color: white;
+  background-color: ${Color.white};
   transition: background-color 300ms ease;
   border-radius: 32px 32px;
   padding: 0;
@@ -69,7 +69,7 @@ let useStyles = makeStyles((theme: any) => ({
   paper: {
     display: "flex",
     flexDirection: "column",
-    background: "#fff",
+    background: "var(--color-white)",
     color: Color.gray10,
     boxShadow: "3px 3px 4px rgba(0, 0, 0, 0.5)",
     borderRadius: "8px",

web/src/GlobalNav.tsx

@@ -17,6 +17,7 @@ import {
   mixinResetButtonStyle,
   SizeUnit,
 } from "./style-helpers"
+import { useTheme } from "./ThemeContext"
 import { Cluster } from "./types"
 import UpdateDialog from "./UpdateDialog"
 import type { TiltBuild } from "./core"
@@ -181,6 +182,11 @@ enum NavDialog {
   Update = "update",
 }
 
+const ThemeToggleIcon = styled.span`
+  font-size: 18px;
+  line-height: 24px;
+`
+
 export function GlobalNav(props: GlobalNavProps) {
   const helpButton = useRef<HTMLButtonElement | null>(null)
   const accountButton = useRef<HTMLButtonElement | null>(null)
@@ -189,6 +195,7 @@ export function GlobalNav(props: GlobalNavProps) {
   const snapshotButton = useRef<HTMLButtonElement | null>(null)
 
   const [openDialog, setOpenDialog] = useState<NavDialog | null>(null)
+  const { theme, toggleTheme } = useTheme()
 
   const features = useFeatures()
 
@@ -276,6 +283,18 @@ export function GlobalNav(props: GlobalNavProps) {
 
       {snapshotMenuItem}
 
+      <MenuButtonLabeled label="Theme">
+        <MenuButton
+          onClick={toggleTheme}
+          aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} theme`}
+          role="menuitem"
+        >
+          <ThemeToggleIcon>
+            {theme === "dark" ? "\u263D" : "\u2600"}
+          </ThemeToggleIcon>
+        </MenuButton>
+      </MenuButtonLabeled>
+
       <MenuButtonLabeled label="Help">
         <MenuButton
           ref={helpButton}

web/src/LogLine.scss

@@ -16,14 +16,14 @@
   font-size: var(--log-font-scale);
 
   &.is-highlighted {
-    background-color: rgba($color-blue, $translucent);
+    background-color: rgba(var(--color-blue-rgb), $translucent);
   }
 
   &.is-buildEvent-init {
     background-color: $color-gray-30;
     text-align: right;
     padding-right: $spacing-unit;
-    border-top: 1px solid rgba($color-gray-50, $translucent);
+    border-top: 1px solid rgba(var(--color-gray-50-rgb), $translucent);
     border-bottom: 1px solid $color-blue-dark;
 
     &.is-sticky {

web/src/LogPane.scss

@@ -2,5 +2,5 @@
 @import "constants";
 
 .LogPane ::selection {
-  background-color: rgba($color-blue, $translucent);
+  background-color: rgba(var(--color-blue-rgb), $translucent);
 }

web/src/OverviewButton.tsx

@@ -1,6 +1,7 @@
 import {
   AnimDuration,
   Color,
+  ColorRGB,
   ColorRGBA,
   Font,
   mixinResetButtonStyle,
@@ -16,7 +17,7 @@ export const OverviewButtonMixin = `
 
   background: transparent;
 
-  border: 1px solid ${ColorRGBA(Color.grayLightest, 0.5)};
+  border: 1px solid ${ColorRGBA(ColorRGB.grayLightest, 0.5)};
   box-sizing: border-box;
   border-radius: 4px;
   cursor: pointer;
@@ -35,7 +36,7 @@ export const OverviewButtonMixin = `
 
   &:disabled {
     opacity: 0.33;
-    border: 1px solid ${ColorRGBA(Color.grayLightest, 0.5)};
+    border: 1px solid ${ColorRGBA(ColorRGB.grayLightest, 0.5)};
     color: ${Color.gray70};
   }
 

web/src/ReactModal.scss

@@ -5,7 +5,7 @@
   align-items: center;
   justify-content: center;
   margin-top: -$statusbar-height; // Visually center
-  background-color: rgba($color-gray-10, $translucent) !important;
+  background-color: rgba(var(--color-gray-10-rgb), $translucent) !important;
   z-index: $z-modal;
 }
 
@@ -14,5 +14,5 @@
   width: $modal-width;
   background-color: $color-white;
   color: $color-gray-20;
-  box-shadow: -10px 10px 0px 0px rgba($color-gray-10, $translucent-ish);
+  box-shadow: -10px 10px 0px 0px rgba(var(--color-gray-10-rgb), $translucent-ish);
 }

web/src/Resizer.scss

@@ -1,7 +1,7 @@
 /* Adapted from https://github.com/tomkp/react-split-pane */
 
 .Resizer {
-  background: #000;
+  background: var(--color-gray-50);
   opacity: 0.2;
   z-index: 1;
   -moz-box-sizing: border-box;

web/src/SidebarIcon.tsx

@@ -8,6 +8,7 @@ import {
   AnimDuration,
   Color,
   ColorAlpha,
+  ColorRGB,
   ColorRGBA,
   Glow,
   Width,
@@ -40,17 +41,17 @@ let SidebarIconRoot = styled.div`
     background-color: ${Color.red};
   }
   &.isBuilding {
-    background-color: ${ColorRGBA(Color.white, ColorAlpha.translucent)};
+    background-color: ${ColorRGBA(ColorRGB.white, ColorAlpha.translucent)};
   }
   .isSelected &.isBuilding {
-    background-color: ${ColorRGBA(Color.gray30, ColorAlpha.translucent)};
+    background-color: ${ColorRGBA(ColorRGB.gray30, ColorAlpha.translucent)};
   }
   &.isPending {
-    background-color: ${ColorRGBA(Color.white, ColorAlpha.translucent)};
+    background-color: ${ColorRGBA(ColorRGB.white, ColorAlpha.translucent)};
     animation: ${Glow.white} 2s linear infinite;
   }
   .isSelected &.isPending {
-    background-color: ${ColorRGBA(Color.gray30, ColorAlpha.translucent)};
+    background-color: ${ColorRGBA(ColorRGB.gray30, ColorAlpha.translucent)};
     animation: ${Glow.dark} 2s linear infinite;
   }
   &.isNone {

web/src/SidebarItemView.tsx

@@ -16,6 +16,7 @@ import {
   barberpole,
   Color,
   ColorAlpha,
+  ColorRGB,
   ColorRGBA,
   Font,
   FontSize,
@@ -75,7 +76,7 @@ export let SidebarItemBox = styled.div`
   position: relative; /* Anchor the .isBuilding::after pseudo-element */
 
   &:hover {
-    background-color: ${ColorRGBA(Color.gray30, ColorAlpha.translucent)};
+    background-color: ${ColorRGBA(ColorRGB.gray30, ColorAlpha.translucent)};
   }
 
   &.isSelected {
@@ -92,10 +93,10 @@ export let SidebarItemBox = styled.div`
     bottom: 0;
     background: repeating-linear-gradient(
       225deg,
-      ${ColorRGBA(Color.gray50, ColorAlpha.translucent)},
-      ${ColorRGBA(Color.gray50, ColorAlpha.translucent)} 1px,
-      ${ColorRGBA(Color.black, 0)} 1px,
-      ${ColorRGBA(Color.black, 0)} 6px
+      ${ColorRGBA(ColorRGB.gray50, ColorAlpha.translucent)},
+      ${ColorRGBA(ColorRGB.gray50, ColorAlpha.translucent)} 1px,
+      ${ColorRGBA(ColorRGB.black, 0)} 1px,
+      ${ColorRGBA(ColorRGB.black, 0)} 6px
     );
     background-size: 200% 200%;
     animation: ${barberpole} 8s linear infinite;

web/src/SocketBar.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import styled, { keyframes } from "styled-components"
-import { Color, ColorAlpha, ColorRGBA, ZIndex } from "./style-helpers"
+import { Color, ColorAlpha, ColorRGB, ColorRGBA, ZIndex } from "./style-helpers"
 import { SocketState } from "./types"
 
 type SocketBarProps = {
@@ -35,7 +35,8 @@ let Bar = styled.div`
   margin-top: 64px;
   padding: 8px 16px;
   border-radius: 3px;
-  box-shadow: -5px 5px 0 0 ${ColorRGBA(Color.gray10, ColorAlpha.almostOpaque)};
+  box-shadow: -5px 5px 0 0
+    ${ColorRGBA(ColorRGB.gray10, ColorAlpha.almostOpaque)};
   text-align: center;
   animation: ${pulse} 3s ease infinite;
 `

web/src/StarredResourceBar.tsx

@@ -17,6 +17,7 @@ import {
   barberpole,
   Color,
   ColorAlpha,
+  ColorRGB,
   ColorRGBA,
   Font,
   FontSize,
@@ -80,33 +81,33 @@ const StarredResourceRoot = styled.div`
   position: relative; // Anchor the .isBuilding::after pseudo-element
 
   &:hover {
-    background-color: ${ColorRGBA(Color.gray30, ColorAlpha.translucent)};
+    background-color: ${ColorRGBA(ColorRGB.gray30, ColorAlpha.translucent)};
   }
 
   &.isWarning {
     color: ${Color.yellow};
-    border-color: ${ColorRGBA(Color.yellow, ColorAlpha.translucent)};
+    border-color: ${ColorRGBA(ColorRGB.yellow, ColorAlpha.translucent)};
   }
   &.isHealthy {
     color: ${Color.green};
-    border-color: ${ColorRGBA(Color.green, ColorAlpha.translucent)};
+    border-color: ${ColorRGBA(ColorRGB.green, ColorAlpha.translucent)};
   }
   &.isUnhealthy {
     color: ${Color.red};
-    border-color: ${ColorRGBA(Color.red, ColorAlpha.translucent)};
+    border-color: ${ColorRGBA(ColorRGB.red, ColorAlpha.translucent)};
   }
   &.isBuilding {
-    color: ${ColorRGBA(Color.white, ColorAlpha.translucent)};
+    color: ${ColorRGBA(ColorRGB.white, ColorAlpha.translucent)};
   }
   .isSelected &.isBuilding {
-    color: ${ColorRGBA(Color.gray30, ColorAlpha.translucent)};
+    color: ${ColorRGBA(ColorRGB.gray30, ColorAlpha.translucent)};
   }
   &.isPending {
-    color: ${ColorRGBA(Color.white, ColorAlpha.translucent)};
+    color: ${ColorRGBA(ColorRGB.white, ColorAlpha.translucent)};
     animation: ${Glow.white} 2s linear infinite;
   }
   .isSelected &.isPending {
-    color: ${ColorRGBA(Color.gray30, ColorAlpha.translucent)};
+    color: ${ColorRGBA(ColorRGB.gray30, ColorAlpha.translucent)};
     animation: ${Glow.dark} 2s linear infinite;
   }
   &.isNone {
@@ -127,17 +128,17 @@ const StarredResourceRoot = styled.div`
     bottom: 0;
     background: repeating-linear-gradient(
       225deg,
-      ${ColorRGBA(Color.gray50, ColorAlpha.translucent)},
-      ${ColorRGBA(Color.gray50, ColorAlpha.translucent)} 1px,
-      ${ColorRGBA(Color.black, 0)} 1px,
-      ${ColorRGBA(Color.black, 0)} 6px
+      ${ColorRGBA(ColorRGB.gray50, ColorAlpha.translucent)},
+      ${ColorRGBA(ColorRGB.gray50, ColorAlpha.translucent)} 1px,
+      ${ColorRGBA(ColorRGB.black, 0)} 1px,
+      ${ColorRGBA(ColorRGB.black, 0)} 6px
     );
     background-size: 200% 200%;
     animation: ${barberpole} 8s linear infinite;
   }
 
   &.isDisabled {
-    border-color: ${ColorRGBA(Color.gray60, ColorAlpha.translucent)};
+    border-color: ${ColorRGBA(ColorRGB.gray60, ColorAlpha.translucent)};
 
     &:not(.isSelected) {
       color: ${Color.gray60};