gloomberb 0.6.1 → 0.7.1

package/src/renderers/electrobun/view/data-table.tsx

@@ -14,7 +14,7 @@ import {
   type RefObject,
 } from "react";
 import { TextAttributes, type ScrollBoxRenderable } from "../../../ui/host";
-import { colors, hoverBg } from "../../../theme/colors";
+import { useThemeColors } from "../../../theme/theme-context";
 import { useAppDispatch, usePaneInstance } from "../../../state/app-context";
 import { useRafCallback } from "../../../react/use-raf-callback";
 import { measurePerf } from "../../../utils/perf-marks";
@@ -24,6 +24,11 @@ import type {
   DataTableProps,
   DataTableSectionHeader,
 } from "../../../components/ui/data-table";
+import {
+  buildTableGridTemplateColumns,
+  getTableWidth,
+  hasMeaningfulTableHorizontalOverflow,
+} from "../../../components/ui/table-layout";
 import { WEB_CELL_HEIGHT, WEB_CELL_WIDTH } from "./input-host";
 import { useScrollbarActivity } from "./scrollbar-activity";
 
@@ -35,6 +40,14 @@ interface VirtualRow {
 }
 
 const TABLE_INLINE_PADDING_PX = 8;
+const CSS_BG = "var(--gloom-bg)";
+const CSS_PANEL = "var(--gloom-panel)";
+const CSS_TEXT = "var(--gloom-text)";
+const CSS_TEXT_DIM = "var(--gloom-text-dim)";
+const CSS_TEXT_BRIGHT = "var(--gloom-text-bright)";
+const CSS_SELECTED = "var(--gloom-selected)";
+const CSS_SELECTED_TEXT = "var(--gloom-selected-text)";
+const CSS_HOVER_BG = "var(--gloom-hover-bg)";
 
 function hasAttribute(attributes: unknown, flag: number): boolean {
   return typeof attributes === "number" && (attributes & flag) !== 0;
@@ -83,32 +96,6 @@ function clippedCellTextStyle(
   };
 }
 
-function columnMinCh(column: DataTableColumn): number {
-  const width = Math.max(1, Math.floor(column.width));
-  if ((column.flexGrow ?? 0) > 0) {
-    return Math.max(8, Math.min(18, Math.floor(width * 0.35)));
-  }
-  if (column.align === "right") {
-    return Math.max(3, Math.min(width, 8));
-  }
-  if (width >= 16) {
-    return Math.max(8, Math.min(16, Math.floor(width * 0.35)));
-  }
-  return Math.max(1, Math.min(width, 8));
-}
-
-function columnFlexWeight(column: DataTableColumn): number {
-  const flexGrow = column.flexGrow ?? 0;
-  const baseWeight = Math.max(1, Math.floor(column.width));
-  return flexGrow > 0 ? baseWeight * Math.max(1, flexGrow) : baseWeight;
-}
-
-function buildGridTemplateColumns(columns: readonly DataTableColumn[]): string {
-  return columns
-    .map((column) => `minmax(${columnMinCh(column)}ch, ${columnFlexWeight(column)}fr)`)
-    .join(" ");
-}
-
 function toCellY(pixels: number): number {
   return Math.max(0, Math.round(pixels / WEB_CELL_HEIGHT));
 }
@@ -264,6 +251,82 @@ function renderHeaderLabel<C extends DataTableColumn>(
   };
 }
 
+function WebDataTableHeader<C extends DataTableColumn>({
+  columns,
+  focusPane,
+  gridTemplateColumns,
+  onHeaderClick,
+  sortColumnId,
+  sortDirection,
+}: {
+  columns: C[];
+  focusPane: () => void;
+  gridTemplateColumns: string;
+  onHeaderClick: (columnId: string) => void;
+  sortColumnId: string | null;
+  sortDirection: "asc" | "desc";
+}) {
+  useThemeColors();
+  return (
+    <div
+      data-gloom-role="data-table-header-row"
+      style={{
+        position: "sticky",
+        top: 0,
+        zIndex: 2,
+        display: "grid",
+        gridTemplateColumns,
+        columnGap: "1ch",
+        alignItems: "center",
+        width: "100%",
+        minWidth: 0,
+        height: WEB_CELL_HEIGHT,
+        paddingLeft: TABLE_INLINE_PADDING_PX,
+        paddingRight: TABLE_INLINE_PADDING_PX,
+        boxSizing: "border-box",
+        backgroundColor: CSS_PANEL,
+      }}
+    >
+      {columns.map((column) => {
+        const { isSorted, text } = renderHeaderLabel(
+          column,
+          sortColumnId,
+          sortDirection,
+        );
+        return (
+          <div
+            key={column.id}
+            data-gloom-role="data-table-header-cell"
+            data-gloom-interactive="true"
+            style={{
+              minWidth: 0,
+              height: WEB_CELL_HEIGHT,
+              overflow: "hidden",
+              backgroundColor: column.headerBackgroundColor ?? CSS_PANEL,
+            }}
+            onMouseDown={(event) => {
+              focusPane();
+              event.preventDefault();
+              onHeaderClick(column.id);
+            }}
+          >
+            <span
+              title={text}
+              style={clippedCellTextStyle(
+                column,
+                isSorted ? CSS_TEXT : column.headerColor ?? CSS_TEXT_DIM,
+                TextAttributes.BOLD,
+              )}
+            >
+              {text}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
 function WebDataTableRowInner<
   T,
   C extends DataTableColumn,
@@ -302,6 +365,7 @@ function WebDataTableRowInner<
   selected: boolean;
   setHoveredIdx: (index: number | null) => void;
 }) {
+  useThemeColors();
   const sectionHeader: DataTableSectionHeader | null =
     renderSectionHeader?.(item, index) ?? null;
   const baseRowStyle: CSSProperties = {
@@ -329,7 +393,7 @@ function WebDataTableRowInner<
         data-gloom-role="data-table-section-header"
         style={{
           ...baseRowStyle,
-          backgroundColor: sectionHeader.backgroundColor ?? colors.bg,
+          backgroundColor: sectionHeader.backgroundColor ?? CSS_BG,
         }}
         onMouseDown={(event) => {
           focusPane();
@@ -340,7 +404,7 @@ function WebDataTableRowInner<
           title={sectionHeader.text}
           style={{
             ...cellTextStyle(
-              sectionHeader.color ?? colors.textBright,
+              sectionHeader.color ?? CSS_TEXT_BRIGHT,
               sectionHeader.attributes ?? TextAttributes.BOLD,
             ),
             gridColumn: "1 / -1",
@@ -357,10 +421,10 @@ function WebDataTableRowInner<
   const rowState = { selected, hovered };
   const rowBackgroundColor = getRowBackgroundColor?.(item, index, rowState);
   const rowBg = selected
-    ? colors.selected
+    ? CSS_SELECTED
     : hovered
-      ? hoverBg()
-      : rowBackgroundColor ?? colors.bg;
+      ? CSS_HOVER_BG
+      : rowBackgroundColor ?? CSS_BG;
 
   return (
     <div
@@ -437,7 +501,7 @@ function WebDataTableRowInner<
                 title={cell.text}
                 style={clippedCellTextStyle(
                   column,
-                  cell.color ?? (selected ? colors.selectedText : colors.text),
+                  cell.color ?? (selected ? CSS_SELECTED_TEXT : CSS_TEXT),
                   cell.attributes ?? TextAttributes.NONE,
                 )}
               >
@@ -489,9 +553,11 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
   const headerVertical = useScrollbarState(false);
   const bodyHorizontal = useScrollbarState(showHorizontalScrollbar);
   const bodyVertical = useScrollbarState(true);
+  const [viewportWidth, setViewportWidth] = useState(0);
   const [scrollbarActive, markScrollbarActive] = useScrollbarActivity();
+  const tableWidth = useMemo(() => getTableWidth(columns), [columns]);
   const gridTemplateColumns = useMemo(
-    () => buildGridTemplateColumns(columns),
+    () => buildTableGridTemplateColumns(columns),
     [columns],
   );
   const selectRow = useCallback((item: T, index: number) => {
@@ -538,6 +604,25 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
   const totalHeight = virtualize
     ? rowVirtualizer.getTotalSize()
     : WEB_CELL_HEIGHT + items.length * WEB_CELL_HEIGHT;
+  const horizontalScrollEnabled = showHorizontalScrollbar
+    && hasMeaningfulTableHorizontalOverflow(tableWidth, viewportWidth);
+  const scrollContentWidth = horizontalScrollEnabled
+    ? Math.max(1, tableWidth * WEB_CELL_WIDTH)
+    : "100%";
+  const measureViewportWidth = useCallback(() => {
+    const element = bodyElementRef.current;
+    const nextValue = element ? toCellX(element.clientWidth) : 0;
+    setViewportWidth((current) => current === nextValue ? current : nextValue);
+  }, []);
+
+  useEffect(() => {
+    measureViewportWidth();
+    const element = bodyElementRef.current;
+    if (!element || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measureViewportWidth);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [measureViewportWidth]);
 
   useEffect(() => {
     if (scrollToIndex == null || items.length === 0) return;
@@ -589,11 +674,11 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
 
   useEffect(() => {
     headerHorizontal.bar.visible = false;
-    bodyHorizontal.bar.visible = showHorizontalScrollbar;
-    if (!showHorizontalScrollbar) {
+    bodyHorizontal.bar.visible = horizontalScrollEnabled;
+    if (!horizontalScrollEnabled) {
       if (bodyElementRef.current) bodyElementRef.current.scrollLeft = 0;
     }
-  }, [bodyHorizontal.bar, headerHorizontal.bar, showHorizontalScrollbar]);
+  }, [bodyHorizontal.bar, headerHorizontal.bar, horizontalScrollEnabled]);
 
   const rootStyle: CSSProperties = {
     display: "flex",
@@ -602,7 +687,7 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
     width: "100%",
     minWidth: 0,
     minHeight: 0,
-    backgroundColor: colors.bg,
+    backgroundColor: CSS_BG,
     overflow: "hidden",
   };
   const bodyScrollerStyle: CSSProperties = {
@@ -610,9 +695,9 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
     flex: "1 1 0px",
     minWidth: 0,
     minHeight: 0,
-    overflowX: showHorizontalScrollbar ? "auto" : "hidden",
+    overflowX: horizontalScrollEnabled ? "auto" : "hidden",
     overflowY: "auto",
-    backgroundColor: colors.bg,
+    backgroundColor: CSS_BG,
   };
 
   return (
@@ -621,7 +706,7 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
         ref={bodyElementRef}
         data-gloom-role="data-table-body-scroll"
         data-gloom-scrollbar-x={
-          showHorizontalScrollbar && bodyHorizontal.visible
+          horizontalScrollEnabled && bodyHorizontal.visible
             ? "visible"
             : "hidden"
         }
@@ -646,82 +731,34 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
           data-gloom-role="data-table-scroll-content"
           style={{
             position: "relative",
-            width: "100%",
+            width: scrollContentWidth,
             height: items.length > 0 ? totalHeight : "100%",
             minHeight: WEB_CELL_HEIGHT,
           }}
         >
-          <div
-            data-gloom-role="data-table-header-row"
-            style={{
-              position: "sticky",
-              top: 0,
-              zIndex: 2,
-              display: "grid",
-              gridTemplateColumns,
-              columnGap: "1ch",
-              alignItems: "center",
-              width: "100%",
-              minWidth: 0,
-              height: WEB_CELL_HEIGHT,
-              paddingLeft: TABLE_INLINE_PADDING_PX,
-              paddingRight: TABLE_INLINE_PADDING_PX,
-              boxSizing: "border-box",
-              backgroundColor: colors.panel,
-            }}
-          >
-            {columns.map((column) => {
-              const { isSorted, text } = renderHeaderLabel(
-                column,
-                sortColumnId,
-                sortDirection,
-              );
-              return (
-                <div
-                  key={column.id}
-                  data-gloom-role="data-table-header-cell"
-                  data-gloom-interactive="true"
-                  style={{
-                    minWidth: 0,
-                    height: WEB_CELL_HEIGHT,
-                    overflow: "hidden",
-                    backgroundColor: column.headerBackgroundColor ?? colors.panel,
-                  }}
-                  onMouseDown={(event) => {
-                    focusPane();
-                    event.preventDefault();
-                    onHeaderClick(column.id);
-                  }}
-                >
-                  <span
-                    title={text}
-                    style={clippedCellTextStyle(
-                      column,
-                      isSorted ? colors.text : column.headerColor ?? colors.textDim,
-                      TextAttributes.BOLD,
-                    )}
-                  >
-                    {text}
-                  </span>
-                </div>
-              );
-            })}
-          </div>
+          <WebDataTableHeader
+            columns={columns}
+            focusPane={focusPane}
+            gridTemplateColumns={gridTemplateColumns}
+            onHeaderClick={onHeaderClick}
+            sortColumnId={sortColumnId}
+            sortDirection={sortDirection}
+          />
           {items.length === 0 ? (
             emptyContent ?? (
               <div
                 style={{
                   width: "100%",
                   padding: `${WEB_CELL_HEIGHT}px ${WEB_CELL_WIDTH}px`,
-                  color: colors.textDim,
+                  color: CSS_TEXT_DIM,
                   lineHeight: "var(--cell-h)",
                 }}
               >
-                <div style={cellTextStyle(colors.textBright, TextAttributes.BOLD)}>
+                <div style={cellTextStyle(CSS_TEXT_BRIGHT, TextAttributes.BOLD)}>
                   {emptyStateTitle}
                 </div>
                 {emptyStateHint ? (
-                  <div style={cellTextStyle(colors.textDim, TextAttributes.NONE)}>
+                  <div style={cellTextStyle(CSS_TEXT_DIM, TextAttributes.NONE)}>
                     {emptyStateHint}
                   </div>
                 ) : null}

package/src/renderers/electrobun/view/desktop-controls.tsx

@@ -4,6 +4,7 @@ import { Box, Input, ScrollBox, Text, Textarea, editableTextContextMenuItems, us
 import { TextAttributes, type InputRenderable, type ScrollBoxRenderable } from "../../../ui";
 import { useShortcut } from "../../../react/input";
 import { blendHex, colors, hoverBg } from "../../../theme/colors";
+import { useThemeColors } from "../../../theme/theme-context";
 import { isDetailBackNavigationKey } from "../../../utils/back-navigation";
 import type { ButtonProps } from "../../../components/ui/button";
 import type { TextFieldProps } from "../../../components/ui/fields";
@@ -14,13 +15,27 @@ import type { PageStackViewProps } from "../../../components/ui/page-stack-view"
 import type { SegmentedControlProps } from "../../../components/ui/toggle";
 
 const CONTROL_RADIUS = 6;
-const PANEL_BORDER = blendHex(colors.border, colors.borderFocused, 0.18);
-const PANEL_FILL = blendHex(colors.panel, colors.bg, 0.22);
+
+function panelBorder(): string {
+  return blendHex(colors.border, colors.borderFocused, 0.18);
+}
+
+function panelFill(): string {
+  return blendHex(colors.panel, colors.bg, 0.22);
+}
+
+function subtlePanelFill(): string {
+  return blendHex(colors.panel, colors.bg, 0.42);
+}
+
+function selectedPanelFill(): string {
+  return blendHex(colors.selected, colors.bg, 0.42);
+}
 
 function controlBorderColor(focused = false, active = false): string {
   if (active) return colors.borderFocused;
   if (focused) return blendHex(colors.borderFocused, colors.textBright, 0.24);
-  return PANEL_BORDER;
+  return panelBorder();
 }
 
 function controlShadow(active = false): string {
@@ -33,8 +48,8 @@ function buttonPalette(props: Pick<ButtonProps, "variant" | "active" | "disabled
   if (props.disabled) {
     return {
       fg: colors.textMuted,
-      bg: "rgba(63, 72, 82, 0.35)",
-      border: PANEL_BORDER,
+      bg: subtlePanelFill(),
+      border: panelBorder(),
     };
   }
   if (props.active) {
@@ -62,14 +77,14 @@ function buttonPalette(props: Pick<ButtonProps, "variant" | "active" | "disabled
       return {
         fg: colors.textDim,
         bg: "rgba(0, 0, 0, 0)",
-        border: PANEL_BORDER,
+        border: panelBorder(),
       };
     case "secondary":
     default:
       return {
         fg: colors.text,
-        bg: PANEL_FILL,
-        border: PANEL_BORDER,
+        bg: panelFill(),
+        border: panelBorder(),
       };
   }
 }
@@ -83,6 +98,7 @@ export function WebButton({
   shortcut,
   width,
 }: ButtonProps) {
+  useThemeColors();
   const palette = buttonPalette({ variant, active, disabled });
 
   return (
@@ -142,6 +158,7 @@ export function WebTextField({
   placeholderColor = colors.textDim,
   onMouseDown,
 }: TextFieldProps) {
+  useThemeColors();
   const localInputRef = useRef<InputRenderable>(null);
   const resolvedInputRef = inputRef ?? localInputRef;
   const renderer = useRendererHost();
@@ -231,6 +248,7 @@ export function WebMessageComposer({
   keyBindings,
   wrapText = false,
 }: MessageComposerProps) {
+  useThemeColors();
   const borderColor = focused
     ? blendHex(colors.borderFocused, colors.textBright, 0.24)
     : colors.border;
@@ -248,7 +266,7 @@ export function WebMessageComposer({
       flexDirection="row"
       width={width}
       height={height}
-      backgroundColor={PANEL_FILL}
+      backgroundColor={panelFill()}
       onMouseDown={requestFocus}
       data-gloom-role="desktop-message-composer"
       style={{
@@ -347,10 +365,11 @@ export function WebListView({
   scrollable = false,
   autoScrollToIndex = true,
 }: ListViewProps) {
+  useThemeColors();
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
   const scrollRef = useRef<ScrollBoxRenderable>(null);
   const baseBg = bgColor ?? colors.bg;
-  const activeBg = selectedBgColor ?? "rgba(84, 201, 159, 0.12)";
+  const activeBg = selectedBgColor ?? selectedPanelFill();
   const rowHoverBg = hoverBgColor ?? hoverBg();
   const selectedItem = selectedIndex >= 0 ? items[selectedIndex] : undefined;
   const activeScrollIndex = scrollIndex ?? selectedIndex;
@@ -435,10 +454,10 @@ export function WebListView({
               backgroundColor: "transparent",
             }
             : {
-              border: `1px solid ${PANEL_BORDER}`,
+              border: `1px solid ${panelBorder()}`,
               borderRadius: CONTROL_RADIUS,
               padding: 4,
-              backgroundColor: "rgba(9, 12, 15, 0.22)",
+              backgroundColor: subtlePanelFill(),
             }}
         >
           <Box flexDirection="column" gap={rowGap}>
@@ -454,9 +473,9 @@ export function WebListView({
       {showSelectedDescription && selectedItem?.description && (
         <Box
           flexDirection="row"
-          backgroundColor="rgba(9, 12, 15, 0.22)"
+          backgroundColor={subtlePanelFill()}
           style={{
-            border: `1px solid ${PANEL_BORDER}`,
+            border: `1px solid ${panelBorder()}`,
             borderRadius: CONTROL_RADIUS,
             paddingInline: 10,
           }}
@@ -475,12 +494,13 @@ export function WebSegmentedControl({
   value,
   onChange,
 }: SegmentedControlProps) {
+  useThemeColors();
   return (
     <Box
       flexDirection="row"
-      backgroundColor="rgba(8, 11, 14, 0.32)"
+      backgroundColor={panelFill()}
       style={{
-        border: `1px solid ${PANEL_BORDER}`,
+        border: `1px solid ${panelBorder()}`,
         borderRadius: CONTROL_RADIUS,
         padding: 2,
       }}
@@ -524,6 +544,7 @@ export function WebDialogFrame({
   footer,
   showTitleDivider = true,
 }: DialogFrameProps) {
+  useThemeColors();
   return (
     <Box flexDirection="column" style={{ padding: 14 }}>
       <Box
@@ -531,7 +552,7 @@ export function WebDialogFrame({
         flexDirection="row"
         alignItems="center"
         style={{
-          borderBottom: showTitleDivider ? `1px solid ${PANEL_BORDER}` : "none",
+          borderBottom: showTitleDivider ? `1px solid ${panelBorder()}` : "none",
           paddingBottom: showTitleDivider ? 8 : 0,
           marginBottom: showTitleDivider ? 10 : 14,
         }}
@@ -545,7 +566,7 @@ export function WebDialogFrame({
         <Box
           height={1}
           style={{
-            borderTop: `1px solid ${PANEL_BORDER}`,
+            borderTop: `1px solid ${panelBorder()}`,
             paddingTop: 8,
             marginTop: 10,
           }}
@@ -569,6 +590,7 @@ export function WebPageStackView({
   backLabel = "Back",
   backHint,
 }: PageStackViewProps) {
+  useThemeColors();
   useShortcut((event) => {
     if (!focused || !detailOpen || !isDetailBackNavigationKey(event)) return;
     event.stopPropagation?.();
@@ -600,7 +622,7 @@ export function WebPageStackView({
           height={1}
           flexDirection="row"
           alignItems="center"
-          backgroundColor={PANEL_FILL}
+          backgroundColor={panelFill()}
           onMouseDown={(event) => {
             event.preventDefault?.();
             event.stopPropagation?.();
@@ -608,7 +630,7 @@ export function WebPageStackView({
           }}
           data-gloom-interactive="true"
           style={{
-            border: `1px solid ${PANEL_BORDER}`,
+            border: `1px solid ${panelBorder()}`,
             borderRadius: CONTROL_RADIUS,
             paddingInline: 8,
             cursor: "pointer",

package/src/renderers/electrobun/view/desktop-window-bridge.ts

@@ -2,9 +2,10 @@ import type { PaneRuntimeState } from "../../../core/state/app-state";
 import type {
   DesktopDockPreviewState,
   DesktopSharedStateSnapshot,
+  DesktopThemePreviewState,
   DesktopWindowBridge,
 } from "../../../types/desktop-window";
-import { backendRequest, getElectrobunBackendInitSnapshot, onDesktopDockPreview, onDesktopState } from "./backend-rpc";
+import { backendRequest, getElectrobunBackendInitSnapshot, onDesktopDockPreview, onDesktopState, onDesktopThemePreview } from "./backend-rpc";
 import { detachedSnapshotKey, prepareDetachedSnapshot } from "./desktop-window-snapshot";
 
 export function createDesktopWindowBridge(kind: "main" | "detached", paneId?: string): DesktopWindowBridge {
@@ -21,6 +22,11 @@ export function createDesktopWindowBridge(kind: "main" | "detached", paneId?: st
         await backendRequest("desktop.syncMainState", { snapshot });
       }
       : undefined,
+    syncThemePreview: kind === "main"
+      ? async (preview: DesktopThemePreviewState) => {
+        await backendRequest("desktop.setThemePreview", { preview });
+      }
+      : undefined,
     replaceDetachedPaneState: kind === "detached"
       ? async (targetPaneId: string, paneState: PaneRuntimeState) => {
         await backendRequest("desktop.replaceDetachedPaneState", { paneId: targetPaneId, paneState });
@@ -55,5 +61,10 @@ export function createDesktopWindowBridge(kind: "main" | "detached", paneId?: st
         listener(message.preview);
       });
     },
+    subscribeThemePreview(listener: (preview: DesktopThemePreviewState) => void) {
+      return onDesktopThemePreview((message) => {
+        listener(message.preview);
+      });
+    },
   };
 }

package/src/renderers/electrobun/view/dialog-host.tsx

@@ -2,6 +2,8 @@
 /** @jsxImportSource react */
 import { useCallback, useMemo, useState, type ReactNode } from "react";
 import { DialogHostProvider, type DialogApi } from "../../../ui/dialog";
+import { blendHex, colors } from "../../../theme/colors";
+import { useThemeColors } from "../../../theme/theme-context";
 
 interface DialogState {
   id: string;
@@ -12,7 +14,10 @@ interface DialogState {
 let nextDialogId = 1;
 
 export function WebDialogHostProvider({ children }: { children: ReactNode }) {
+  useThemeColors();
   const [dialogState, setDialogState] = useState<DialogState | null>(null);
+  const dialogBorder = blendHex(colors.border, colors.borderFocused, 0.18);
+  const dialogBg = blendHex(colors.panel, colors.bg, 0.12);
 
   const close = useCallback((value?: unknown) => {
     setDialogState((current) => {
@@ -46,7 +51,14 @@ export function WebDialogHostProvider({ children }: { children: ReactNode }) {
             if (event.target === event.currentTarget) close(undefined);
           }}
         >
-          <div className="gloom-dialog">
+          <div
+            className="gloom-dialog"
+            style={{
+              borderColor: dialogBorder,
+              background: dialogBg,
+              color: colors.text,
+            }}
+          >
             {typeof dialogState.content === "function"
               ? dialogState.content({
                 dialogId: dialogState.id,