coder · aslilac · Dec 21, 2023 · Dec 21, 2023 · Dec 21, 2023 · Dec 21, 2023
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -21,6 +21,8 @@ import WorkspacesPage from "./pages/WorkspacesPage/WorkspacesPage";
 import UserSettingsLayout from "./pages/UserSettingsPage/Layout";
 import { TemplateSettingsLayout } from "./pages/TemplateSettingsPage/TemplateSettingsLayout";
 import { WorkspaceSettingsLayout } from "./pages/WorkspaceSettingsPage/WorkspaceSettingsLayout";
+import { ThemeOverride } from "contexts/ThemeProvider";
+import themes from "theme";
 
 // Lazy load pages
 // - Pages that are secondary, not in the main navigation or not usually accessed
@@ -384,7 +386,11 @@ export const AppRouter: FC = () => {
             />
             <Route
               path="/:username/:workspace/terminal"
-              element={<TerminalPage />}
+              element={
+                <ThemeOverride theme={themes.dark}>
+                  <TerminalPage />
+                </ThemeOverride>
+              }
             />
             <Route path="/cli-auth" element={<CliAuthenticationPage />} />
             <Route path="/icons" element={<IconsPage />} />

diff --git a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
@@ -36,6 +36,7 @@ import { TerminalIcon } from "components/Icons/TerminalIcon";
 import { RocketIcon } from "components/Icons/RocketIcon";
 import ErrorIcon from "@mui/icons-material/ErrorOutline";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
+import colors from "theme/tailwindColors";
 import { getDisplayWorkspaceStatus } from "utils/workspace";
 import { HelpTooltipTitle } from "components/HelpTooltip/HelpTooltip";
 import { Stack } from "components/Stack/Stack";
@@ -439,9 +440,9 @@ const styles = {
       height: 16px;
     }
   `,
-  unhealthy: (theme) => css`
-    background-color: ${theme.colors.red[10]};
-  `,
+  unhealthy: {
+    backgroundColor: colors.red[700],
+  },
   group: css`
     display: flex;
     align-items: center;

diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx
@@ -102,8 +102,8 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
                 styles={css`
                   em-emoji-picker {
                     --rgb-background: ${theme.palette.background.paper};
-                    --rgb-input: ${theme.colors.gray[17]};
-                    --rgb-color: ${theme.colors.gray[4]};
+                    --rgb-input: ${theme.palette.primary.main};
+                    --rgb-color: ${theme.palette.text.primary};
 
                     // Hack to prevent the right side from being cut off
                     width: 350px;

diff --git a/site/src/components/Markdown/Markdown.tsx b/site/src/components/Markdown/Markdown.tsx
@@ -11,7 +11,7 @@ import { type FC, memo } from "react";
 import ReactMarkdown, { type Options } from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import gfm from "remark-gfm";
-import colors from "theme/tailwind";
+import colors from "theme/tailwindColors";
 import { dracula } from "react-syntax-highlighter/dist/cjs/styles/prism";
 
 interface MarkdownProps {

diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx
@@ -1,7 +1,7 @@
 import { type Interpolation, type Theme } from "@emotion/react";
 import { type FC } from "react";
 import type { AuditLog } from "api/typesGenerated";
-import colors from "theme/tailwind";
+import colors from "theme/tailwindColors";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 
 const getDiffValue = (value: unknown): string => {

diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
@@ -19,7 +19,7 @@ import {
 import { Fieldset } from "components/DeploySettingsLayout/Fieldset";
 import { Stack } from "components/Stack/Stack";
 import { getFormHelpers } from "utils/formUtils";
-import colors from "theme/tailwind";
+import colors from "theme/tailwindColors";
 
 export type AppearanceSettingsPageViewProps = {
   appearance: UpdateAppearanceConfig;

diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -420,7 +420,10 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
   const totalInSeconds =
     validUsage?.reduce((total, usage) => total + usage.seconds, 0) ?? 1;
   const usageColors = chroma
-    .scale([theme.colors.green[8], theme.colors.blue[8]])
+    .scale([
+      theme.experimental.roles.success.fill,
+      theme.experimental.roles.notice.fill,
+    ])
     .mode("lch")
     .colors(validUsage?.length ?? 0);
   // The API returns a row for each app, even if the user didn't use it.

diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx
@@ -108,7 +108,7 @@ const TerminalPage: FC = () => {
       fontFamily: MONOSPACE_FONT_FAMILY,
       fontSize: 16,
       theme: {
-        background: theme.colors.gray[16],
+        background: theme.palette.background.default,
       },
     });
     if (renderer === "webgl") {

diff --git a/site/src/pages/WorkspacesPage/LastUsed.tsx b/site/src/pages/WorkspacesPage/LastUsed.tsx
@@ -40,7 +40,7 @@ export const LastUsed: FC<LastUsedProps> = ({ lastUsedAt }) => {
   );
 
   if (t.isAfter(now.subtract(1, "hour"))) {
-    circle = <Circle color={theme.colors.green[9]} />;
+    circle = <Circle color={theme.experimental.roles.success.fill} />;
     // Since the agent reports on a 10m interval,
     // the last_used_at can be inaccurate when recent.
     message = "Now";
@@ -49,15 +49,14 @@ export const LastUsed: FC<LastUsedProps> = ({ lastUsedAt }) => {
   } else if (t.isAfter(now.subtract(1, "month"))) {
     circle = <Circle color={theme.palette.warning.light} />;
   } else if (t.isAfter(now.subtract(100, "year"))) {
-    circle = <Circle color={theme.colors.red[10]} />;
+    circle = <Circle color={theme.experimental.roles.error.fill} />;
   } else {
-    // color = theme.palette.error.light
     message = "Never";
   }
 
   return (
     <Stack
-      css={{ color: theme.palette.text.secondary }}
+      style={{ color: theme.palette.text.secondary }}
       direction="row"
       spacing={1}
       alignItems="center"

diff --git a/site/src/theme/colors.ts b/site/src/theme/colors.ts
diff --git a/site/src/theme/dark/colors.ts b/site/src/theme/dark/colors.ts
diff --git a/site/src/theme/dark/experimental.ts b/site/src/theme/dark/experimental.ts
@@ -1,5 +1,5 @@
 import { type NewTheme } from "../experimental";
-import colors from "../tailwind";
+import colors from "../tailwindColors";
 
 export default {
   l1: {

diff --git a/site/src/theme/dark/index.ts b/site/src/theme/dark/index.ts
@@ -1,11 +1,9 @@
-import colors from "./colors";
 import experimental from "./experimental";
 import monaco from "./monaco";
 import muiTheme from "./mui";
 
 export default {
   ...muiTheme,
-  colors,
   experimental,
   monaco,
 };