doodleui-react 0.6.0 → 0.6.1

package/dist/index.js

@@ -45,6 +45,9 @@ function toRoughOptions(props) {
   if (props.fill) {
     options.fill = props.fill;
     options.fillStyle = props.fillStyle ?? "hachure";
+    if (props.hachureGap !== void 0) options.hachureGap = props.hachureGap;
+    if (props.hachureAngle !== void 0) options.hachureAngle = props.hachureAngle;
+    if (props.fillWeight !== void 0) options.fillWeight = props.fillWeight;
   }
   return options;
 }
@@ -52,6 +55,10 @@ var DEFAULT_ROUGHNESS = 1.5;
 var DEFAULT_BOWING = 1;
 var DEFAULT_STROKE_WIDTH = 1.75;
 var DEFAULT_INK = "#1f1d1a";
+var DEFAULT_DARK_INK = "#f3f4f6";
+var DEFAULT_PAPER = "#f7f6f2";
+var DEFAULT_DARK_PAPER = "#131923";
+var DEFAULT_DARK_CARD_BG = "#131923";
 var DEFAULT_INSET = 3;
 var SKETCH_COLORS = {
   ink: DEFAULT_INK,
@@ -64,6 +71,19 @@ var SKETCH_COLORS = {
   error: "#c0392b",
   success: "#2d6a4f"
 };
+var DARK_SKETCH_COLORS = {
+  ink: DEFAULT_DARK_INK,
+  accent: "#f87171",
+  accentFill: "rgba(248, 113, 113, 0.22)",
+  secondaryFill: "rgba(255, 255, 255, 0.08)",
+  paper: DEFAULT_DARK_PAPER,
+  cardBg: DEFAULT_DARK_CARD_BG,
+  shadow: "#000000",
+  info: "#60a5fa",
+  warning: "#fbbf24",
+  error: "#f87171",
+  success: "#34d399"
+};
 
 // src/utils.ts
 function assignRef(ref, value) {
@@ -179,6 +199,9 @@ function RoughSvg({
   fillStyle,
   strokeWidth,
   fill,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   inset = DEFAULT_INSET,
   path,
   className,
@@ -202,7 +225,10 @@ function RoughSvg({
       bowing,
       fillStyle,
       strokeWidth,
-      fill
+      fill,
+      hachureGap,
+      hachureAngle,
+      fillWeight
     });
     const x = inset;
     const y = inset;
@@ -238,6 +264,9 @@ function RoughSvg({
     fillStyle,
     strokeWidth,
     fill,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     inset,
     path
   ]);
@@ -275,16 +304,17 @@ var DoodleUIContext = createContext(null);
 function DoodleUIProvider({
   children,
   animate = true,
-  forceAnimate = false
+  forceAnimate = false,
+  theme = "system"
 }) {
   const value = useMemo(
-    () => ({ animate, forceAnimate }),
-    [animate, forceAnimate]
+    () => ({ animate, forceAnimate, theme }),
+    [animate, forceAnimate, theme]
   );
   return /* @__PURE__ */ jsx(DoodleUIContext.Provider, { value, children });
 }
 function useDoodleUI() {
-  return useContext(DoodleUIContext) ?? { animate: true, forceAnimate: false };
+  return useContext(DoodleUIContext) ?? { animate: true, forceAnimate: false, theme: "system" };
 }
 
 // src/animations/resolveAnimate.ts
@@ -442,6 +472,93 @@ function useDrawIn(pathRef, duration = DRAW_IN_DURATION_MS, enabled = true, repl
     };
   }, [pathRef, duration, enabled, replayKey, delay]);
 }
+function checkIsDark() {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return false;
+  }
+  const root = document.documentElement;
+  if (root.classList.contains("dark")) return true;
+  const dataTheme = root.getAttribute("data-theme");
+  if (dataTheme === "dark") return true;
+  if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    return true;
+  }
+  return false;
+}
+function useSketchTheme(sketchColorOverride) {
+  const doodleContext = useDoodleUI();
+  const contextTheme = doodleContext?.theme;
+  const [isClientDark, setIsClientDark] = useState(() => {
+    if (contextTheme === "dark") return true;
+    if (contextTheme === "light") return false;
+    return checkIsDark();
+  });
+  useEffect(() => {
+    if (contextTheme === "dark") {
+      setIsClientDark(true);
+      return;
+    }
+    if (contextTheme === "light") {
+      setIsClientDark(false);
+      return;
+    }
+    const update = () => {
+      setIsClientDark(checkIsDark());
+    };
+    update();
+    const mediaQuery = window.matchMedia?.("(prefers-color-scheme: dark)");
+    mediaQuery?.addEventListener?.("change", update);
+    const observer = new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        if (m.attributeName === "class" || m.attributeName === "data-theme") {
+          update();
+          break;
+        }
+      }
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"]
+    });
+    return () => {
+      mediaQuery?.removeEventListener?.("change", update);
+      observer.disconnect();
+    };
+  }, [contextTheme]);
+  const isDark = contextTheme === "dark" ? true : contextTheme === "light" ? false : isClientDark;
+  const baseInk = isDark ? DEFAULT_DARK_INK : DEFAULT_INK;
+  const ink = sketchColorOverride ?? baseInk;
+  if (isDark) {
+    return {
+      isDark: true,
+      ink,
+      paper: DEFAULT_DARK_PAPER,
+      cardBg: DEFAULT_DARK_CARD_BG,
+      shadow: "rgba(0, 0, 0, 0.45)",
+      accent: DARK_SKETCH_COLORS.accent,
+      accentFill: DARK_SKETCH_COLORS.accentFill,
+      secondaryFill: DARK_SKETCH_COLORS.secondaryFill,
+      info: DARK_SKETCH_COLORS.info,
+      warning: DARK_SKETCH_COLORS.warning,
+      error: DARK_SKETCH_COLORS.error,
+      success: DARK_SKETCH_COLORS.success
+    };
+  }
+  return {
+    isDark: false,
+    ink,
+    paper: DEFAULT_PAPER,
+    cardBg: DEFAULT_PAPER,
+    shadow: sketchColorOverride ?? DEFAULT_INK,
+    accent: SKETCH_COLORS.accent,
+    accentFill: SKETCH_COLORS.accentFill,
+    secondaryFill: SKETCH_COLORS.secondaryFill,
+    info: SKETCH_COLORS.info,
+    warning: SKETCH_COLORS.warning,
+    error: SKETCH_COLORS.error,
+    success: SKETCH_COLORS.success
+  };
+}
 var SketchBox = forwardRef(
   function SketchBox2({
     children,
@@ -458,6 +575,9 @@ var SketchBox = forwardRef(
     sketchColor,
     bowing,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     inset,
     path,
     animate,
@@ -466,8 +586,14 @@ var SketchBox = forwardRef(
     ...rest
   }, ref) {
     const rootRef = useRef(null);
+    const theme = useSketchTheme(sketchColor);
+    const resolvedInk = sketchColor ?? theme.ink;
     const shouldAnimate = useAnimate(animate);
     useDrawIn(rootRef, drawInDuration, shouldAnimate, drawInKey);
+    const hasExplicitFill = fill !== void 0;
+    const resolvedFill = hasExplicitFill ? fill : shadow ? theme.cardBg : void 0;
+    const resolvedFillStyle = fillStyle ?? (resolvedFill ? "solid" : "solid");
+    const isPatternedFill = Boolean(resolvedFill && resolvedFillStyle !== "solid");
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -485,13 +611,31 @@ var SketchBox = forwardRef(
               shape,
               roughness: (roughness ?? 1.5) + 0.35,
               seed,
-              sketchColor,
+              sketchColor: theme.isDark ? "rgba(0, 0, 0, 0.45)" : resolvedInk,
               bowing,
               fillStyle: "hachure",
-              fill: sketchColor ?? "#1f1d1a",
+              fill: theme.isDark ? theme.shadow : resolvedInk ?? theme.ink,
               strokeWidth: 1,
+              hachureGap: 8,
               inset,
-              style: { transform: "translate(5px, 6px)", opacity: 0.16 }
+              style: {
+                transform: "translate(5px, 6px)",
+                opacity: theme.isDark ? 0.35 : 0.16
+              }
+            }
+          ) : null,
+          isPatternedFill ? /* @__PURE__ */ jsx(
+            RoughSvg,
+            {
+              shape,
+              roughness,
+              seed,
+              sketchColor: "transparent",
+              bowing,
+              fillStyle: "solid",
+              fill: theme.cardBg,
+              strokeWidth: 0,
+              inset
             }
           ) : null,
           /* @__PURE__ */ jsx(
@@ -500,11 +644,14 @@ var SketchBox = forwardRef(
               shape,
               roughness,
               seed,
-              sketchColor,
+              sketchColor: resolvedInk,
               bowing,
-              fillStyle: fill ? fillStyle : shadow ? "solid" : fillStyle,
-              fill: fill ?? (shadow ? "#f7f6f2" : void 0),
+              fillStyle: resolvedFill ? resolvedFillStyle : void 0,
+              fill: resolvedFill,
               strokeWidth,
+              hachureGap: hachureGap ?? (isPatternedFill ? 10 : void 0),
+              hachureAngle,
+              fillWeight: fillWeight ?? (isPatternedFill ? 0.9 : void 0),
               inset,
               path
             }
@@ -517,6 +664,7 @@ var SketchBox = forwardRef(
                 position: "relative",
                 zIndex: 1,
                 fontFamily: doodleUiFontFamily,
+                color: resolvedInk,
                 ...contentStyle
               },
               children
@@ -549,6 +697,9 @@ var Button = forwardRef(
     bowing,
     fillStyle,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     disabled,
     animate,
     onMouseEnter,
@@ -557,13 +708,15 @@ var Button = forwardRef(
   }, ref) {
     const rootRef = useRef(null);
     const [hovered, setHovered] = useState(false);
+    const theme = useSketchTheme(sketchColor);
     const shouldAnimate = useAnimate(animate);
     const resolvedSeed = useResolvedSeed(seed);
     const hoverSeed = deriveSeed(resolvedSeed, "hover");
     const sketchSeed = shouldAnimate && hovered && !disabled ? hoverSeed : resolvedSeed;
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
-    const fill = variant === "primary" ? SKETCH_COLORS.accentFill : variant === "secondary" ? SKETCH_COLORS.secondaryFill : void 0;
-    const stroke = variant === "ghost" && !hovered ? "transparent" : variant === "primary" ? sketchColor ?? SKETCH_COLORS.accent : ink;
+    const ink = sketchColor ?? theme.ink;
+    const fill = variant === "primary" ? theme.isDark ? sketchColor ? `${sketchColor}28` : theme.accentFill : theme.accentFill : variant === "secondary" ? theme.secondaryFill : hovered && variant === "ghost" ? theme.isDark ? "rgba(255,255,255,0.06)" : "rgba(31,29,26,0.05)" : void 0;
+    const stroke = variant === "ghost" && !hovered ? "transparent" : variant === "primary" ? sketchColor ?? theme.accent : ink;
+    const textColor = variant === "primary" ? sketchColor ?? (theme.isDark ? "#ffffff" : ink) : ink;
     useDrawIn(rootRef, DRAW_IN_DURATION_MS, shouldAnimate, sketchSeed);
     return /* @__PURE__ */ jsxs(
       "button",
@@ -592,7 +745,7 @@ var Button = forwardRef(
           border: "none",
           background: "transparent",
           cursor: disabled ? "not-allowed" : "pointer",
-          color: ink,
+          color: textColor,
           fontFamily: doodleUiFontFamily,
           fontWeight: doodleUiFontWeight(600),
           lineHeight: 1.2,
@@ -610,8 +763,11 @@ var Button = forwardRef(
               seed: sketchSeed,
               sketchColor: stroke,
               bowing,
-              fillStyle: fillStyle ?? "hachure",
+              fillStyle: fillStyle ?? (fill ? "hachure" : void 0),
               fill,
+              hachureGap: hachureGap ?? 7,
+              hachureAngle,
+              fillWeight: fillWeight ?? 1,
               strokeWidth: !shouldAnimate && hovered ? (strokeWidth ?? 1.75) + 0.4 : strokeWidth
             }
           ),
@@ -631,6 +787,9 @@ var Input = forwardRef(function Input2({
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   id,
   onFocus,
   onBlur,
@@ -639,11 +798,12 @@ var Input = forwardRef(function Input2({
 }, ref) {
   const [focused, setFocused] = useState(false);
   const fieldRef = useRef(null);
+  const theme = useSketchTheme(sketchColor);
   const shouldAnimate = useAnimate(animate);
   const resolvedSeed = useResolvedSeed(seed);
   const focusSeed = deriveSeed(resolvedSeed, "focus");
   const sketchSeed = shouldAnimate && focused ? focusSeed : resolvedSeed;
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const ink = sketchColor ?? theme.ink;
   const inputId = id;
   useDrawIn(fieldRef, DRAW_IN_DURATION_MS, shouldAnimate, sketchSeed);
   return /* @__PURE__ */ jsxs(
@@ -676,9 +836,12 @@ var Input = forwardRef(function Input2({
               shape: "rectangle",
               roughness,
               seed: sketchSeed,
-              sketchColor: focused ? SKETCH_COLORS.accent : ink,
+              sketchColor: focused ? sketchColor ?? theme.accent : ink,
               bowing,
               fillStyle,
+              hachureGap,
+              hachureAngle,
+              fillWeight,
               strokeWidth: focused && !shouldAnimate ? (strokeWidth ?? 1.75) + 0.35 : focused ? (strokeWidth ?? 1.75) + 0.2 : strokeWidth
             }
           ),
@@ -729,6 +892,9 @@ var Textarea = forwardRef(
     bowing,
     fillStyle,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     id,
     rows = 4,
     onFocus,
@@ -738,11 +904,12 @@ var Textarea = forwardRef(
   }, ref) {
     const [focused, setFocused] = useState(false);
     const fieldRef = useRef(null);
+    const theme = useSketchTheme(sketchColor);
     const shouldAnimate = useAnimate(animate);
     const resolvedSeed = useResolvedSeed(seed);
     const focusSeed = deriveSeed(resolvedSeed, "focus");
     const sketchSeed = shouldAnimate && focused ? focusSeed : resolvedSeed;
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const ink = sketchColor ?? theme.ink;
     useDrawIn(fieldRef, DRAW_IN_DURATION_MS, shouldAnimate, sketchSeed);
     return /* @__PURE__ */ jsxs(
       "label",
@@ -774,9 +941,12 @@ var Textarea = forwardRef(
                 shape: "rectangle",
                 roughness,
                 seed: sketchSeed,
-                sketchColor: focused ? SKETCH_COLORS.accent : ink,
+                sketchColor: focused ? sketchColor ?? theme.accent : ink,
                 bowing,
                 fillStyle,
+                hachureGap,
+                hachureAngle,
+                fillWeight,
                 strokeWidth: focused && !shouldAnimate ? (strokeWidth ?? 1.75) + 0.35 : focused ? (strokeWidth ?? 1.75) + 0.2 : strokeWidth
               }
             ),
@@ -806,8 +976,7 @@ var Textarea = forwardRef(
                   color: ink,
                   fontFamily: doodleUiFontFamily,
                   fontSize: 15,
-                  lineHeight: 1.5,
-                  padding: "10px 12px",
+                  padding: "8px 12px",
                   resize: "vertical",
                   ...style
                 },
@@ -825,6 +994,7 @@ var CHECK_PATH = "M 4.5 10.5 L 8.5 14.5 L 15.5 5.5";
 function CheckMark({
   roughness,
   seed,
+  sketchColor,
   bowing,
   strokeWidth,
   shouldAnimate
@@ -843,7 +1013,7 @@ function CheckMark({
           path: CHECK_PATH,
           roughness: (roughness ?? 1.5) * 0.7,
           seed,
-          sketchColor: SKETCH_COLORS.accent,
+          sketchColor,
           bowing,
           strokeWidth: (strokeWidth ?? 1.6) + 0.4,
           inset: 0
@@ -857,12 +1027,16 @@ var Checkbox = forwardRef(
     className,
     style,
     label,
+    fill,
     roughness,
     seed,
     sketchColor,
     bowing,
     fillStyle,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     checked,
     defaultChecked,
     onCheckedChange,
@@ -870,7 +1044,9 @@ var Checkbox = forwardRef(
     animate,
     ...rest
   }, ref) {
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
+    const accent = sketchColor ?? theme.accent;
     const generatedId = useId();
     const inputId = id ?? generatedId;
     const boxRef = useRef(null);
@@ -886,6 +1062,7 @@ var Checkbox = forwardRef(
           gap: 8,
           cursor: "pointer",
           userSelect: "none",
+          color: ink,
           ...style
         },
         children: [
@@ -922,8 +1099,12 @@ var Checkbox = forwardRef(
                         seed,
                         sketchColor: ink,
                         bowing,
-                        fillStyle,
+                        fillStyle: fillStyle ?? (fill ? "solid" : void 0),
+                        fill,
                         strokeWidth: strokeWidth ?? 1.6,
+                        hachureGap,
+                        hachureAngle,
+                        fillWeight,
                         inset: 1.5
                       }
                     )
@@ -942,6 +1123,7 @@ var Checkbox = forwardRef(
                       {
                         roughness,
                         seed,
+                        sketchColor: accent,
                         bowing,
                         strokeWidth,
                         shouldAnimate
@@ -956,7 +1138,7 @@ var Checkbox = forwardRef(
             "label",
             {
               htmlFor: inputId,
-              style: { fontSize: 15, cursor: "pointer", fontFamily: doodleUiFontFamily },
+              style: { fontSize: 15, cursor: "pointer", fontFamily: doodleUiFontFamily, color: ink },
               children: label
             }
           ) : null
@@ -988,6 +1170,7 @@ var SIZE = 20;
 function RadioDot({
   roughness,
   seed,
+  sketchColor,
   bowing,
   shouldAnimate
 }) {
@@ -1021,8 +1204,8 @@ function RadioDot({
           shape: "ellipse",
           roughness: (roughness ?? 1.5) + 0.2,
           seed,
-          sketchColor: SKETCH_COLORS.accent,
-          fill: SKETCH_COLORS.accent,
+          sketchColor,
+          fill: sketchColor,
           fillStyle: "solid",
           bowing,
           strokeWidth: 1,
@@ -1036,17 +1219,23 @@ var Radio = forwardRef(function Radio2({
   className,
   style,
   label,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   id,
   animate,
   ...rest
 }, ref) {
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
+  const accent = sketchColor ?? theme.accent;
   const generatedId = useId();
   const inputId = id ?? generatedId;
   const ringRef = useRef(null);
@@ -1062,6 +1251,7 @@ var Radio = forwardRef(function Radio2({
         gap: 8,
         cursor: "pointer",
         userSelect: "none",
+        color: ink,
         ...style
       },
       children: [
@@ -1096,8 +1286,12 @@ var Radio = forwardRef(function Radio2({
                       seed,
                       sketchColor: ink,
                       bowing,
-                      fillStyle,
+                      fillStyle: fillStyle ?? (fill ? "solid" : void 0),
+                      fill,
                       strokeWidth: strokeWidth ?? 1.6,
+                      hachureGap,
+                      hachureAngle,
+                      fillWeight,
                       inset: 1.5
                     }
                   )
@@ -1116,6 +1310,7 @@ var Radio = forwardRef(function Radio2({
                     {
                       roughness,
                       seed,
+                      sketchColor: accent,
                       bowing,
                       shouldAnimate
                     }
@@ -1129,7 +1324,7 @@ var Radio = forwardRef(function Radio2({
           "label",
           {
             htmlFor: inputId,
-            style: { fontSize: 15, cursor: "pointer", fontFamily: doodleUiFontFamily },
+            style: { fontSize: 15, cursor: "pointer", fontFamily: doodleUiFontFamily, color: ink },
             children: label
           }
         ) : null
@@ -1151,18 +1346,26 @@ var Card = forwardRef(function Card2({
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }, ref) {
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   const boxProps = {
     shadow,
     fill,
     roughness,
     seed,
-    sketchColor: sketchColor ?? SKETCH_COLORS.ink,
+    sketchColor: ink,
     bowing,
     fillStyle,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     animate
   };
   return /* @__PURE__ */ jsxs(
@@ -1170,7 +1373,10 @@ var Card = forwardRef(function Card2({
     {
       ref,
       className: cn(className),
-      style,
+      style: {
+        color: ink,
+        ...style
+      },
       contentStyle: { padding: "16px 18px" },
       ...boxProps,
       ...rest,
@@ -1181,13 +1387,14 @@ var Card = forwardRef(function Card2({
             style: {
               fontWeight: doodleUiFontWeight(700),
               fontSize: 16,
-              marginBottom: 10
+              marginBottom: 10,
+              color: ink
             },
             children: title
           }
         ) : null,
         children,
-        footer ? /* @__PURE__ */ jsx("div", { style: { marginTop: 14, fontSize: 13, opacity: 0.8 }, children: footer }) : null
+        footer ? /* @__PURE__ */ jsx("div", { style: { marginTop: 14, fontSize: 13, opacity: 0.8, color: ink }, children: footer }) : null
       ]
     }
   );
@@ -1203,11 +1410,15 @@ var Badge = forwardRef(function Badge2({
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }, ref) {
-  const ink = variant === "accent" ? sketchColor ?? SKETCH_COLORS.accent : sketchColor ?? SKETCH_COLORS.ink;
-  const fill = variant === "accent" ? SKETCH_COLORS.accentFill : variant === "outline" ? void 0 : SKETCH_COLORS.secondaryFill;
+  const theme = useSketchTheme(sketchColor);
+  const ink = variant === "accent" ? sketchColor ?? theme.accent : sketchColor ?? theme.ink;
+  const fill = variant === "accent" ? theme.isDark ? sketchColor ? `${sketchColor}25` : theme.accentFill : theme.accentFill : variant === "outline" ? void 0 : theme.secondaryFill;
   return /* @__PURE__ */ jsx(
     SketchBox,
     {
@@ -1222,10 +1433,14 @@ var Badge = forwardRef(function Badge2({
         fontSize: 12,
         fontWeight: doodleUiFontWeight(650),
         lineHeight: 1.4,
-        letterSpacing: "0.01em"
+        letterSpacing: "0.01em",
+        color: ink
       },
       fill,
-      fillStyle: fillStyle ?? "hachure",
+      fillStyle: fillStyle ?? (fill ? "hachure" : void 0),
+      hachureGap: hachureGap ?? 6,
+      hachureAngle,
+      fillWeight: fillWeight ?? 0.9,
       roughness,
       seed,
       sketchColor: ink,
@@ -1237,35 +1452,42 @@ var Badge = forwardRef(function Badge2({
     }
   );
 });
-var VARIANT_COLOR = {
-  info: SKETCH_COLORS.info,
-  warning: SKETCH_COLORS.warning,
-  error: SKETCH_COLORS.error,
-  success: SKETCH_COLORS.success
-};
-var VARIANT_FILL = {
+var LIGHT_VARIANT_FILL = {
   info: "#d2deec",
   warning: "#f3e2c0",
   error: "#f3d0cc",
   success: "#d3e8dc"
 };
+var DARK_VARIANT_FILL = {
+  info: "rgba(96, 165, 250, 0.16)",
+  warning: "rgba(251, 191, 36, 0.16)",
+  error: "rgba(248, 113, 113, 0.16)",
+  success: "rgba(52, 211, 153, 0.16)"
+};
 var Alert = forwardRef(function Alert2({
   children,
   className,
   style,
   variant = "info",
   title,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   role = "status",
   animate,
   ...rest
 }, ref) {
-  const color = sketchColor ?? VARIANT_COLOR[variant];
+  const theme = useSketchTheme(sketchColor);
+  const color = sketchColor ?? theme[variant];
+  const defaultFill = theme.isDark ? DARK_VARIANT_FILL[variant] : LIGHT_VARIANT_FILL[variant];
+  const resolvedFill = fill ?? defaultFill;
   return /* @__PURE__ */ jsxs(
     SketchBox,
     {
@@ -1273,14 +1495,17 @@ var Alert = forwardRef(function Alert2({
       role,
       className: cn(className),
       style: { color, ...style },
-      contentStyle: { padding: "12px 16px" },
+      contentStyle: { padding: "12px 16px", color: theme.ink },
       roughness,
       seed,
       sketchColor: color,
       bowing,
       fillStyle: fillStyle ?? "hachure",
-      fill: VARIANT_FILL[variant],
+      fill: resolvedFill,
       strokeWidth,
+      hachureGap: hachureGap ?? 9,
+      hachureAngle,
+      fillWeight: fillWeight ?? 0.85,
       animate,
       drawInDuration: DRAW_IN_ALERT_MS,
       ...rest,
@@ -1291,12 +1516,13 @@ var Alert = forwardRef(function Alert2({
             style: {
               fontWeight: doodleUiFontWeight(700),
               marginBottom: 4,
-              fontSize: 15
+              fontSize: 15,
+              color
             },
             children: title
           }
         ) : null,
-        /* @__PURE__ */ jsx("div", { style: { fontSize: 14, lineHeight: 1.5, color: SKETCH_COLORS.ink }, children })
+        /* @__PURE__ */ jsx("div", { style: { fontSize: 14, lineHeight: 1.5, color: theme.ink }, children })
       ]
     }
   );
@@ -1310,15 +1536,20 @@ function Modal({
   description,
   children,
   className,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate
 }) {
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   const [uncontrolled, setUncontrolled] = useState(defaultOpen === true);
   const isOpen = open ?? uncontrolled;
   const shouldAnimate = useAnimate(animate);
@@ -1339,7 +1570,7 @@ function Modal({
           style: {
             position: "fixed",
             inset: 0,
-            background: "rgba(31, 29, 26, 0.38)",
+            background: theme.isDark ? "rgba(0, 0, 0, 0.65)" : "rgba(31, 29, 26, 0.38)",
             zIndex: 70
           }
         }
@@ -1368,7 +1599,8 @@ function Modal({
               style: {
                 width: "min(480px, calc(100vw - 32px))",
                 outline: "none",
-                pointerEvents: "auto"
+                pointerEvents: "auto",
+                color: ink
               },
               children: /* @__PURE__ */ jsxs(
                 SketchBox,
@@ -1378,11 +1610,14 @@ function Modal({
                   sketchColor: ink,
                   bowing,
                   fillStyle: fillStyle ?? "solid",
-                  fill: "#f7f6f2",
+                  fill: fill ?? theme.paper,
                   strokeWidth: strokeWidth ?? 2,
+                  hachureGap,
+                  hachureAngle,
+                  fillWeight,
                   shadow: true,
                   animate,
-                  contentStyle: { padding: "20px 22px 18px" },
+                  contentStyle: { padding: "20px 22px 18px", color: ink },
                   children: [
                     /* @__PURE__ */ jsxs(
                       "div",
@@ -1425,12 +1660,10 @@ function Modal({
                             {
                               variant: "ghost",
                               size: "sm",
-                              roughness,
-                              seed,
                               sketchColor: ink,
-                              animate,
-                              "aria-label": "Close",
-                              children: "Close"
+                              "aria-label": "Close dialog",
+                              style: { padding: "2px 8px", minHeight: 26 },
+                              children: "\u2715"
                             }
                           ) })
                         ]
@@ -1440,11 +1673,13 @@ function Modal({
                       Dialog.Description,
                       {
                         style: {
-                          margin: "0 0 14px",
+                          margin: 0,
+                          marginBottom: 14,
                           fontSize: 14,
-                          lineHeight: 1.5,
-                          color: ink,
-                          opacity: 0.8
+                          lineHeight: 1.4,
+                          opacity: 0.78,
+                          fontFamily: doodleUiFontFamily,
+                          color: ink
                         },
                         children: description
                       }
@@ -1475,10 +1710,15 @@ var Divider = forwardRef(
     sketchColor,
     bowing,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     animate,
     ...rest
   }, ref) {
     const rootRef = useRef(null);
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
     const shouldAnimate = useAnimate(animate);
     const horizontal = orientation === "horizontal";
     useDrawIn(rootRef, DRAW_IN_DURATION_MS, shouldAnimate);
@@ -1506,9 +1746,12 @@ var Divider = forwardRef(
             shape: horizontal ? "line" : "line-vertical",
             roughness: roughness ?? 1.8,
             seed,
-            sketchColor: sketchColor ?? SKETCH_COLORS.ink,
+            sketchColor: ink,
             bowing: bowing ?? 2,
             strokeWidth: strokeWidth ?? 1.5,
+            hachureGap,
+            hachureAngle,
+            fillWeight,
             inset: 4
           }
         )
@@ -1528,12 +1771,16 @@ var Progress = forwardRef(
     bowing,
     fillStyle,
     strokeWidth,
+    hachureGap,
+    fillWeight,
     animate,
     ...rest
   }, ref) {
     const rootRef = useRef(null);
     const trackRef = useRef(null);
-    const ink = sketchColor ?? SKETCH_COLORS.accent;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.accent;
+    const trackInk = sketchColor ?? (theme.isDark ? "rgba(243, 244, 246, 0.45)" : theme.ink);
     const clamped = Math.min(max, Math.max(0, value));
     const percent = max === 0 ? 0 : clamped / max * 100;
     const shouldAnimate = useAnimate(animate);
@@ -1573,7 +1820,7 @@ var Progress = forwardRef(
                   shape: "rectangle",
                   roughness,
                   seed: resolvedSeed,
-                  sketchColor: SKETCH_COLORS.ink,
+                  sketchColor: trackInk,
                   bowing,
                   strokeWidth: strokeWidth ?? 1.5,
                   inset: 2
@@ -1604,6 +1851,8 @@ var Progress = forwardRef(
                   fillStyle: fillStyle ?? "hachure",
                   bowing,
                   strokeWidth: 1.1,
+                  hachureGap: hachureGap ?? 5,
+                  fillWeight: fillWeight ?? 1.2,
                   inset: 1
                 }
               )
@@ -1621,15 +1870,20 @@ function Tooltip({
   side = "top",
   delayDuration = 200,
   className,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate
 }) {
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   return /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { delayDuration, children: [
     /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, children }),
     /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
@@ -1647,8 +1901,11 @@ function Tooltip({
             sketchColor: ink,
             bowing,
             fillStyle: fillStyle ?? "solid",
-            fill: "#f7f6f2",
+            fill: fill ?? theme.paper,
             strokeWidth: strokeWidth ?? 1.4,
+            hachureGap,
+            hachureAngle,
+            fillWeight,
             animate,
             drawInDuration: DRAW_IN_TOOLTIP_MS,
             contentStyle: {
@@ -1683,12 +1940,16 @@ function Select({
   placeholder = "Select\u2026",
   className,
   style,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   value,
   defaultValue,
   onValueChange,
@@ -1700,7 +1961,8 @@ function Select({
   const selectedValue = value ?? uncontrolled;
   const selectedLabel = options.find((option) => option.value === selectedValue)?.label;
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   return /* @__PURE__ */ jsx(
     SelectSketchContext.Provider,
     {
@@ -1711,8 +1973,13 @@ function Select({
         bowing,
         fillStyle,
         strokeWidth,
+        hachureGap,
+        hachureAngle,
+        fillWeight,
         resolvedSeed,
         ink,
+        paper: fill ?? theme.paper,
+        accent: theme.accent,
         selectedValue,
         selectedLabel,
         placeholder,
@@ -1798,7 +2065,7 @@ var SelectTrigger = forwardRef(
               shape: "rectangle",
               roughness: sketch.roughness,
               seed: sketch.resolvedSeed,
-              sketchColor: openish ? SKETCH_COLORS.accent : sketch.ink,
+              sketchColor: openish ? sketch.accent : sketch.ink,
               bowing: sketch.bowing,
               fillStyle: sketch.fillStyle,
               strokeWidth: openish ? (sketch.strokeWidth ?? 1.75) + 0.35 : sketch.strokeWidth
@@ -1849,7 +2116,7 @@ var SelectTrigger = forwardRef(
   }
 );
 var SelectContent = forwardRef(
-  function SelectContent2({ className, style, children, ...rest }, ref) {
+  function SelectContent2({ className, style, children, fill, ...rest }, ref) {
     const sketch = useSelectSketch();
     return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
       SelectPrimitive.Content,
@@ -1862,6 +2129,7 @@ var SelectContent = forwardRef(
           zIndex: 80,
           outline: "none",
           minWidth: "var(--radix-select-trigger-width)",
+          color: sketch.ink,
           ...style
         },
         ...rest,
@@ -1873,10 +2141,13 @@ var SelectContent = forwardRef(
             sketchColor: sketch.ink,
             bowing: sketch.bowing,
             fillStyle: sketch.fillStyle ?? "solid",
-            fill: "#f7f6f2",
+            fill: fill ?? sketch.paper,
             strokeWidth: sketch.strokeWidth ?? 1.5,
+            hachureGap: sketch.hachureGap,
+            hachureAngle: sketch.hachureAngle,
+            fillWeight: sketch.fillWeight,
             animate: sketch.animate,
-            contentStyle: { padding: "6px 4px" },
+            contentStyle: { padding: "6px 4px", color: sketch.ink },
             children: /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { children })
           }
         )
@@ -1922,7 +2193,7 @@ var SelectItem = forwardRef(
               shape: "line",
               roughness: (sketch.roughness ?? 1.5) + 0.4,
               seed: sketch.resolvedSeed,
-              sketchColor: selected ? SKETCH_COLORS.accent : sketch.ink,
+              sketchColor: selected ? sketch.accent : sketch.ink,
               bowing: sketch.bowing ?? 1.6,
               strokeWidth: selected ? 1.8 : 1.3,
               inset: UNDERLINE_INSET,
@@ -1971,7 +2242,10 @@ var Switch = forwardRef(
   }, ref) {
     const [uncontrolled, setUncontrolled] = useState(defaultChecked === true);
     const isOn = checked ?? uncontrolled;
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
+    const activeColor = sketchColor ?? theme.accent;
+    const activeFill = theme.isDark ? sketchColor ? `${sketchColor}25` : theme.accentFill : theme.accentFill;
     const resolvedSeed = useResolvedSeed(seed);
     const shouldAnimate = useAnimate(animate);
     const trackRef = useRef(null);
@@ -1987,6 +2261,7 @@ var Switch = forwardRef(
           gap: 8,
           cursor: "pointer",
           userSelect: "none",
+          color: ink,
           ...style
         },
         children: [
@@ -2025,10 +2300,10 @@ var Switch = forwardRef(
                         shape: "rectangle",
                         roughness,
                         seed: trackSeed,
-                        sketchColor: isOn ? SKETCH_COLORS.accent : ink,
+                        sketchColor: isOn ? activeColor : ink,
                         bowing: bowing ?? 1.4,
                         fillStyle: fillStyle ?? (isOn ? "hachure" : void 0),
-                        fill: isOn ? SKETCH_COLORS.accentFill : void 0,
+                        fill: isOn ? activeFill : void 0,
                         strokeWidth: strokeWidth ?? 1.6,
                         inset: 1.5
                       }
@@ -2056,8 +2331,8 @@ var Switch = forwardRef(
                         shape: "ellipse",
                         roughness: (roughness ?? 1.5) * 0.85,
                         seed: deriveSeed(resolvedSeed, "thumb"),
-                        sketchColor: isOn ? SKETCH_COLORS.accent : ink,
-                        fill: "#f7f6f2",
+                        sketchColor: isOn ? activeColor : ink,
+                        fill: theme.paper,
                         fillStyle: "solid",
                         bowing,
                         strokeWidth: (strokeWidth ?? 1.5) + 0.2,
@@ -2076,7 +2351,8 @@ var Switch = forwardRef(
               style: {
                 fontSize: 15,
                 cursor: "pointer",
-                fontFamily: doodleUiFontFamily
+                fontFamily: doodleUiFontFamily,
+                color: ink
               },
               children: label
             }
@@ -2113,7 +2389,9 @@ var Tabs = forwardRef(function Tabs2({
   const [uncontrolled, setUncontrolled] = useState(defaultValue);
   const current = value ?? uncontrolled;
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
+  const accent = sketchColor ?? theme.accent;
   const shouldAnimate = useAnimate(animate);
   return /* @__PURE__ */ jsx(
     TabsSketchContext.Provider,
@@ -2127,6 +2405,7 @@ var Tabs = forwardRef(function Tabs2({
         strokeWidth,
         resolvedSeed,
         ink,
+        accent,
         current,
         shouldAnimate
       },
@@ -2176,7 +2455,7 @@ function TabUnderline({
           shape: "line",
           roughness: (sketch.roughness ?? 1.5) + 0.35,
           seed,
-          sketchColor: SKETCH_COLORS.accent,
+          sketchColor: sketch.accent,
           bowing: sketch.bowing ?? 1.8,
           strokeWidth: (sketch.strokeWidth ?? 1.75) + 0.4,
           inset: 2
@@ -2259,7 +2538,7 @@ var Tab = forwardRef(function Tab2({ className, style, children, value, ...rest
         fontFamily: doodleUiFontFamily,
         fontSize: 15,
         fontWeight: active ? doodleUiFontWeight(650) : doodleUiFontWeight(400),
-        color: sketch.ink,
+        color: active ? sketch.accent : sketch.ink,
         outline: "none",
         ...style
       },
@@ -2357,7 +2636,8 @@ var Table = forwardRef(function Table2({
   const tableRef = useRef(null);
   const [lines, setLines] = useState([]);
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   const shouldAnimate = useAnimate(animate);
   useLayoutEffect(() => {
     const wrapper = wrapperRef.current;
@@ -2530,18 +2810,18 @@ var TableCell = forwardRef(
     );
   }
 );
-var VARIANT_COLOR2 = {
-  info: SKETCH_COLORS.info,
-  warning: SKETCH_COLORS.warning,
-  error: SKETCH_COLORS.error,
-  success: SKETCH_COLORS.success
-};
-var VARIANT_FILL2 = {
+var LIGHT_VARIANT_FILL2 = {
   info: "#d2deec",
   warning: "#f3e2c0",
   error: "#f3d0cc",
   success: "#d3e8dc"
 };
+var DARK_VARIANT_FILL2 = {
+  info: "rgba(96, 165, 250, 0.16)",
+  warning: "rgba(251, 191, 36, 0.16)",
+  error: "rgba(248, 113, 113, 0.16)",
+  success: "rgba(52, 211, 153, 0.16)"
+};
 var POSITION_STYLE = {
   "top-left": { top: 16, left: 16 },
   "top-right": { top: 16, right: 16 },
@@ -2593,6 +2873,7 @@ function Toast({
   title,
   children,
   variant = "info",
+  fill,
   duration,
   className,
   style,
@@ -2602,6 +2883,9 @@ function Toast({
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate
 }) {
   const position = useContext(ToastPositionContext);
@@ -2609,7 +2893,10 @@ function Toast({
   const [uncontrolled, setUncontrolled] = useState(defaultOpen ?? false);
   const isOpen = open ?? uncontrolled;
   const shouldAnimate = useAnimate(animate);
-  const color = sketchColor ?? VARIANT_COLOR2[variant];
+  const theme = useSketchTheme(sketchColor);
+  const color = sketchColor ?? theme[variant];
+  const defaultFill = theme.isDark ? DARK_VARIANT_FILL2[variant] : LIGHT_VARIANT_FILL2[variant];
+  const resolvedFill = fill ?? defaultFill;
   const offset = fromTop ? -14 : 14;
   function handleOpenChange(next) {
     setUncontrolled(next);
@@ -2644,11 +2931,14 @@ function Toast({
               sketchColor: color,
               bowing,
               fillStyle: fillStyle ?? "hachure",
-              fill: VARIANT_FILL2[variant],
+              fill: resolvedFill,
               strokeWidth: strokeWidth ?? 1.7,
+              hachureGap: hachureGap ?? 9,
+              hachureAngle,
+              fillWeight: fillWeight ?? 0.85,
               shadow: true,
               animate,
-              contentStyle: { padding: "12px 16px" },
+              contentStyle: { padding: "12px 16px", color: theme.ink },
               children: [
                 title ? /* @__PURE__ */ jsx(
                   ToastPrimitive.Title,
@@ -2672,7 +2962,7 @@ function Toast({
                       fontSize: 14,
                       lineHeight: 1.5,
                       fontFamily: doodleUiFontFamily,
-                      color: SKETCH_COLORS.ink
+                      color: theme.ink
                     },
                     children
                   }
@@ -2717,19 +3007,26 @@ var Accordion = forwardRef(
     sketchColor,
     bowing,
     fillStyle,
-    strokeWidth
+    strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight
   }, ref) {
     const resolvedSeed = useResolvedSeed(seed);
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
     const [uncontrolled, setUncontrolled] = useState(defaultValue ?? (type === "multiple" ? [] : void 0));
     const openValue = value ?? uncontrolled;
     const sketchValue = {
       roughness,
       seed: resolvedSeed,
-      sketchColor,
+      sketchColor: ink,
       bowing,
       fillStyle,
       strokeWidth,
+      hachureGap,
+      hachureAngle,
+      fillWeight,
       resolvedSeed,
       ink,
       openValue
@@ -2892,11 +3189,6 @@ var AccordionContent = forwardRef(function AccordionContent2({ className, style,
     }
   );
 });
-var STATUS_COLOR = {
-  online: SKETCH_COLORS.success,
-  offline: "#8a8680",
-  busy: SKETCH_COLORS.accent
-};
 var Avatar = forwardRef(
   function Avatar2({
     className,
@@ -2907,18 +3199,28 @@ var Avatar = forwardRef(
     size = 40,
     shape = "circle",
     status,
+    fill,
     roughness,
     seed,
     sketchColor,
     bowing,
     fillStyle,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     ...rest
   }, ref) {
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
     const resolvedSeed = useResolvedSeed(seed);
     const roughShape = shape === "circle" ? "ellipse" : "rectangle";
     const badge = 12;
+    const statusColors = {
+      online: theme.success,
+      offline: theme.isDark ? "#9ca3af" : "#8a8680",
+      busy: theme.accent
+    };
     const rootStyle = {
       position: "relative",
       display: "inline-flex",
@@ -2945,8 +3247,11 @@ var Avatar = forwardRef(
               sketchColor: ink,
               bowing,
               fillStyle: fillStyle ?? "solid",
-              fill: "#f7f6f2",
+              fill: fill ?? theme.paper,
               strokeWidth: strokeWidth ?? 1.6,
+              hachureGap,
+              hachureAngle,
+              fillWeight,
               inset: 1.5
             }
           ),
@@ -2990,7 +3295,7 @@ var Avatar = forwardRef(
                       fontWeight: doodleUiFontWeight(650),
                       fontSize: Math.max(12, size * 0.36),
                       color: ink,
-                      background: SKETCH_COLORS.secondaryFill
+                      background: theme.secondaryFill
                     },
                     children: fallback
                   }
@@ -3015,8 +3320,8 @@ var Avatar = forwardRef(
                   shape: "ellipse",
                   roughness: (roughness ?? 1.5) * 0.8,
                   seed: deriveSeed(resolvedSeed, "status"),
-                  sketchColor: STATUS_COLOR[status],
-                  fill: STATUS_COLOR[status],
+                  sketchColor: statusColors[status],
+                  fill: statusColors[status],
                   fillStyle: "solid",
                   bowing,
                   strokeWidth: 1,
@@ -3033,16 +3338,23 @@ var Avatar = forwardRef(
 var Slider = forwardRef(function Slider2({
   className,
   style,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   thumbShape = "circle",
   ...rest
 }, ref) {
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
+  const accent = sketchColor ?? theme.accent;
+  const trackInk = sketchColor ?? (theme.isDark ? "rgba(243, 244, 246, 0.4)" : theme.ink);
   const resolvedSeed = useResolvedSeed(seed);
   return /* @__PURE__ */ jsxs(
     SliderPrimitive.Root,
@@ -3057,6 +3369,7 @@ var Slider = forwardRef(function Slider2({
         height: 28,
         userSelect: "none",
         touchAction: "none",
+        color: ink,
         ...style
       },
       ...rest,
@@ -3076,7 +3389,7 @@ var Slider = forwardRef(function Slider2({
                   shape: "line",
                   roughness: roughness ?? 1.8,
                   seed: resolvedSeed,
-                  sketchColor: ink,
+                  sketchColor: trackInk,
                   bowing: bowing ?? 2,
                   strokeWidth: strokeWidth ?? 1.6,
                   inset: 4
@@ -3096,7 +3409,7 @@ var Slider = forwardRef(function Slider2({
                       shape: "line",
                       roughness: (roughness ?? 1.5) + 0.4,
                       seed: deriveSeed(resolvedSeed, "range"),
-                      sketchColor: SKETCH_COLORS.accent,
+                      sketchColor: accent,
                       bowing: bowing ?? 1.6,
                       strokeWidth: (strokeWidth ?? 1.6) + 0.6,
                       inset: 4
@@ -3124,11 +3437,14 @@ var Slider = forwardRef(function Slider2({
                 shape: thumbShape === "square" ? "rectangle" : "ellipse",
                 roughness: (roughness ?? 1.5) * 0.85,
                 seed: deriveSeed(resolvedSeed, "thumb"),
-                sketchColor: SKETCH_COLORS.accent,
-                fill: "#f7f6f2",
+                sketchColor: accent,
+                fill: fill ?? theme.paper,
                 fillStyle: fillStyle ?? "solid",
                 bowing,
                 strokeWidth: (strokeWidth ?? 1.5) + 0.3,
+                hachureGap,
+                hachureAngle,
+                fillWeight,
                 inset: 1
               }
             )
@@ -3167,7 +3483,10 @@ var Pagination = forwardRef(
     strokeWidth,
     ...rest
   }, ref) {
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
+    const accent = sketchColor ?? theme.accent;
+    const accentFill = theme.isDark ? sketchColor ? `${sketchColor}25` : theme.accentFill : theme.accentFill;
     const resolvedSeed = useResolvedSeed(seed);
     const items = pageItems(page, count);
     return /* @__PURE__ */ jsxs(
@@ -3180,6 +3499,7 @@ var Pagination = forwardRef(
           display: "inline-flex",
           alignItems: "center",
           gap: 4,
+          color: ink,
           ...style
         },
         ...rest,
@@ -3193,6 +3513,9 @@ var Pagination = forwardRef(
               roughness,
               seed: deriveSeed(resolvedSeed, "prev"),
               ink,
+              accent,
+              accentFill,
+              isDark: theme.isDark,
               bowing,
               strokeWidth,
               children: /* @__PURE__ */ jsx("span", { style: { position: "relative", width: 16, height: 16, display: "block" }, children: /* @__PURE__ */ jsx(
@@ -3232,6 +3555,9 @@ var Pagination = forwardRef(
                 roughness,
                 seed: deriveSeed(resolvedSeed, `page-${item}`),
                 ink,
+                accent,
+                accentFill,
+                isDark: theme.isDark,
                 bowing,
                 strokeWidth,
                 children: item
@@ -3248,6 +3574,9 @@ var Pagination = forwardRef(
               roughness,
               seed: deriveSeed(resolvedSeed, "next"),
               ink,
+              accent,
+              accentFill,
+              isDark: theme.isDark,
               bowing,
               strokeWidth,
               children: /* @__PURE__ */ jsx("span", { style: { position: "relative", width: 16, height: 16, display: "block" }, children: /* @__PURE__ */ jsx(
@@ -3278,10 +3607,15 @@ function PageButton({
   roughness,
   seed,
   ink,
+  accent,
+  accentFill,
+  isDark,
   bowing,
   strokeWidth,
   ...rest
 }) {
+  const activeColor = accent ?? ink;
+  const textColor = active ? isDark ? "#ffffff" : activeColor : ink;
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -3296,7 +3630,7 @@ function PageButton({
         border: "none",
         background: "transparent",
         cursor: disabled ? "not-allowed" : "pointer",
-        color: ink,
+        color: textColor,
         fontFamily: doodleUiFontFamily,
         fontWeight: active ? doodleUiFontWeight(700) : doodleUiFontWeight(400),
         fontSize: 14,
@@ -3312,9 +3646,9 @@ function PageButton({
             shape: "ellipse",
             roughness,
             seed,
-            sketchColor: active ? SKETCH_COLORS.accent : ink,
+            sketchColor: active ? activeColor : ink,
             bowing,
-            fill: active ? SKETCH_COLORS.accentFill : void 0,
+            fill: active ? accentFill : void 0,
             fillStyle: active ? "hachure" : void 0,
             strokeWidth: active ? (strokeWidth ?? 1.6) + 0.3 : strokeWidth ?? 1.4,
             inset: 1.5
@@ -3326,7 +3660,7 @@ function PageButton({
             shape: "ellipse",
             roughness: (roughness ?? 1.5) + 0.45,
             seed,
-            sketchColor: SKETCH_COLORS.accent,
+            sketchColor: activeColor,
             bowing: bowing ?? 1.6,
             strokeWidth: 1.1,
             inset: -1.5,
@@ -3359,9 +3693,13 @@ var Breadcrumb = forwardRef(
     sketchColor,
     bowing,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     ...rest
   }, ref) {
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
     const resolvedSeed = useResolvedSeed(seed);
     const items = Children.toArray(children).filter(isValidElement);
     return /* @__PURE__ */ jsx(
@@ -3370,9 +3708,12 @@ var Breadcrumb = forwardRef(
         value: {
           roughness,
           seed: resolvedSeed,
-          sketchColor,
+          sketchColor: ink,
           bowing,
           strokeWidth,
+          hachureGap,
+          hachureAngle,
+          fillWeight,
           resolvedSeed,
           ink,
           separator
@@ -3511,11 +3852,15 @@ var Skeleton = forwardRef(
     bowing,
     fillStyle,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     ...rest
   }, ref) {
     const base = useResolvedSeed(seed);
     const [tick, setTick] = useState(0);
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
     useEffect(() => {
       if (!pulse) return;
       const id = window.setInterval(() => {
@@ -3552,6 +3897,9 @@ var Skeleton = forwardRef(
             fillStyle: fillStyle ?? "hachure",
             bowing: bowing ?? 1.6,
             strokeWidth: strokeWidth ?? 1.1,
+            hachureGap,
+            hachureAngle,
+            fillWeight,
             inset: 2,
             style: { opacity: 0.28 }
           }
@@ -3572,15 +3920,21 @@ var Stepper = forwardRef(
     steps,
     current = 0,
     orientation = "horizontal",
+    fill,
     roughness,
     seed,
     sketchColor,
     bowing,
     fillStyle,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     ...rest
   }, ref) {
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
+    const accent = sketchColor ?? theme.accent;
     const resolvedSeed = useResolvedSeed(seed);
     const items = normalizeSteps(steps);
     const horizontal = orientation === "horizontal";
@@ -3594,13 +3948,15 @@ var Stepper = forwardRef(
           display: "flex",
           flexDirection: horizontal ? "row" : "column",
           alignItems: horizontal ? "flex-start" : "stretch",
+          color: ink,
           ...style
         },
         ...rest,
         children: items.map((step, index) => {
           const complete = index < current;
           const active = index === current;
-          const markerColor = complete || active ? SKETCH_COLORS.accent : ink;
+          const markerColor = complete || active ? accent : ink;
+          const completeFill = theme.isDark ? sketchColor ? `${sketchColor}25` : theme.accentFill : theme.accentFill;
           return /* @__PURE__ */ jsxs(
             "div",
             {
@@ -3648,10 +4004,13 @@ var Stepper = forwardRef(
                                 roughness,
                                 seed: deriveSeed(resolvedSeed, `step-${index}`),
                                 sketchColor: markerColor,
-                                fill: complete ? SKETCH_COLORS.accentFill : active ? "#f7f6f2" : void 0,
+                                fill: complete ? completeFill : active ? fill ?? theme.paper : void 0,
                                 fillStyle: complete || active ? fillStyle ?? "hachure" : void 0,
                                 bowing,
                                 strokeWidth: active ? (strokeWidth ?? 1.6) + 0.4 : strokeWidth ?? 1.5,
+                                hachureGap,
+                                hachureAngle,
+                                fillWeight,
                                 inset: 1.5
                               }
                             ),
@@ -3676,7 +4035,7 @@ var Stepper = forwardRef(
                               shape: horizontal ? "line" : "line-vertical",
                               roughness: (roughness ?? 1.5) + 0.3,
                               seed: deriveSeed(resolvedSeed, `connector-${index}`),
-                              sketchColor: complete ? SKETCH_COLORS.accent : ink,
+                              sketchColor: complete ? accent : theme.isDark ? "rgba(243, 244, 246, 0.35)" : ink,
                               bowing: bowing ?? 2,
                               strokeWidth: strokeWidth ?? 1.4,
                               inset: 2
@@ -3724,10 +4083,14 @@ var Label2 = forwardRef(function Label3({
   sketchColor,
   bowing,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }, ref) {
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   const resolvedSeed = useResolvedSeed(seed);
   const shouldAnimate = useAnimate(animate);
   const markRef = useRef(null);
@@ -3763,11 +4126,14 @@ var Label2 = forwardRef(function Label3({
                 shape: "ellipse",
                 roughness: (roughness ?? 1.5) * 0.9,
                 seed: resolvedSeed,
-                sketchColor: SKETCH_COLORS.accent,
+                sketchColor: theme.accent,
                 bowing,
                 fillStyle: "solid",
-                fill: SKETCH_COLORS.accent,
+                fill: theme.accent,
                 strokeWidth: strokeWidth ?? 1.2,
+                hachureGap,
+                hachureAngle,
+                fillWeight,
                 inset: 1
               }
             )
@@ -3803,10 +4169,14 @@ var Collapsible = forwardRef(
     bowing,
     fillStyle,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     ...rest
   }, ref) {
     const resolvedSeed = useResolvedSeed(seed);
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
     const [uncontrolled, setUncontrolled] = useState(defaultOpen ?? false);
     const isOpen = open ?? uncontrolled;
     return /* @__PURE__ */ jsx(
@@ -3815,10 +4185,13 @@ var Collapsible = forwardRef(
         value: {
           roughness,
           seed: resolvedSeed,
-          sketchColor,
+          sketchColor: ink,
           bowing,
           fillStyle,
           strokeWidth,
+          hachureGap,
+          hachureAngle,
+          fillWeight,
           resolvedSeed,
           ink,
           open: isOpen
@@ -3933,17 +4306,22 @@ function usePopoverSketch() {
 }
 function Popover({
   children,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }) {
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   return /* @__PURE__ */ jsx(
     PopoverSketchContext.Provider,
     {
@@ -3954,8 +4332,12 @@ function Popover({
         bowing,
         fillStyle,
         strokeWidth,
+        hachureGap,
+        hachureAngle,
+        fillWeight,
         resolvedSeed,
         ink,
+        paper: fill ?? theme.paper,
         animate
       },
       children: /* @__PURE__ */ jsx(PopoverPrimitive.Root, { ...rest, children })
@@ -3966,7 +4348,7 @@ var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
 var PopoverClose = PopoverPrimitive.Close;
 var PopoverContent = forwardRef(
-  function PopoverContent2({ className, style, children, sideOffset = 8, ...rest }, ref) {
+  function PopoverContent2({ className, style, children, fill, sideOffset = 8, ...rest }, ref) {
     const sketch = usePopoverSketch();
     return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
       PopoverPrimitive.Content,
@@ -3974,7 +4356,7 @@ var PopoverContent = forwardRef(
         ref,
         sideOffset,
         className: cn(className),
-        style: { zIndex: 80, outline: "none", ...style },
+        style: { zIndex: 80, outline: "none", color: sketch.ink, ...style },
         ...rest,
         children: /* @__PURE__ */ jsx(
           SketchBox,
@@ -3984,11 +4366,14 @@ var PopoverContent = forwardRef(
             sketchColor: sketch.ink,
             bowing: sketch.bowing,
             fillStyle: sketch.fillStyle ?? "solid",
-            fill: "#f7f6f2",
+            fill: fill ?? sketch.paper,
             strokeWidth: sketch.strokeWidth ?? 1.5,
+            hachureGap: sketch.hachureGap,
+            hachureAngle: sketch.hachureAngle,
+            fillWeight: sketch.fillWeight,
             shadow: true,
             animate: sketch.animate,
-            contentStyle: { padding: "14px 16px", minWidth: 200 },
+            contentStyle: { padding: "14px 16px", minWidth: 200, color: sketch.ink },
             children
           }
         )
@@ -3996,12 +4381,9 @@ var PopoverContent = forwardRef(
     ) });
   }
 );
-var PopoverArrow = forwardRef(
-  function PopoverArrow2(props, ref) {
-    const sketch = usePopoverSketch();
-    return /* @__PURE__ */ jsx(PopoverPrimitive.Arrow, { ref, fill: sketch.ink, ...props });
-  }
-);
+function PopoverArrow(props) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Arrow, { ...props });
+}
 var DropdownMenuSketchContext = createContext(null);
 function useDropdownMenuSketch() {
   const ctx = useContext(DropdownMenuSketchContext);
@@ -4014,17 +4396,22 @@ function useDropdownMenuSketch() {
 }
 function DropdownMenu({
   children,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }) {
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   return /* @__PURE__ */ jsx(
     DropdownMenuSketchContext.Provider,
     {
@@ -4035,8 +4422,13 @@ function DropdownMenu({
         bowing,
         fillStyle,
         strokeWidth,
+        hachureGap,
+        hachureAngle,
+        fillWeight,
         resolvedSeed,
         ink,
+        paper: fill ?? theme.paper,
+        accent: theme.accent,
         animate
       },
       children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, { ...rest, children })
@@ -4047,7 +4439,7 @@ var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownMenuGroup = DropdownMenuPrimitive.Group;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
-var DropdownMenuContent = forwardRef(function DropdownMenuContent2({ className, style, children, sideOffset = 6, align = "start", ...rest }, ref) {
+var DropdownMenuContent = forwardRef(function DropdownMenuContent2({ className, style, children, fill, sideOffset = 6, align = "start", ...rest }, ref) {
   const sketch = useDropdownMenuSketch();
   return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Content,
@@ -4056,7 +4448,7 @@ var DropdownMenuContent = forwardRef(function DropdownMenuContent2({ className,
       sideOffset,
       align,
       className: cn(className),
-      style: { zIndex: 80, outline: "none", minWidth: 180, ...style },
+      style: { zIndex: 80, outline: "none", minWidth: 180, color: sketch.ink, ...style },
       ...rest,
       children: /* @__PURE__ */ jsx(
         SketchBox,
@@ -4066,11 +4458,14 @@ var DropdownMenuContent = forwardRef(function DropdownMenuContent2({ className,
           sketchColor: sketch.ink,
           bowing: sketch.bowing,
           fillStyle: sketch.fillStyle ?? "solid",
-          fill: "#f7f6f2",
+          fill: fill ?? sketch.paper,
           strokeWidth: sketch.strokeWidth ?? 1.5,
+          hachureGap: sketch.hachureGap,
+          hachureAngle: sketch.hachureAngle,
+          fillWeight: sketch.fillWeight,
           shadow: true,
           animate: sketch.animate,
-          contentStyle: { padding: "6px 4px" },
+          contentStyle: { padding: "6px 4px", color: sketch.ink },
           children
         }
       )
@@ -4185,7 +4580,7 @@ var DropdownMenuCheckboxItem = forwardRef(function DropdownMenuCheckboxItem2({ c
                 path: CHECK_PATH2,
                 roughness: (sketch.roughness ?? 1.5) * 0.7,
                 seed: deriveSeed(sketch.resolvedSeed, "checkbox-mark"),
-                sketchColor: SKETCH_COLORS.accent,
+                sketchColor: sketch.accent,
                 bowing: sketch.bowing,
                 strokeWidth: 1.6,
                 inset: 0
@@ -4253,10 +4648,10 @@ var DropdownMenuRadioItem = forwardRef(function DropdownMenuRadioItem2({ classNa
                 shape: "ellipse",
                 roughness: (sketch.roughness ?? 1.5) * 0.8,
                 seed: deriveSeed(sketch.resolvedSeed, "radio-mark"),
-                sketchColor: SKETCH_COLORS.accent,
+                sketchColor: sketch.accent,
                 bowing: sketch.bowing,
                 fillStyle: "solid",
-                fill: SKETCH_COLORS.accent,
+                fill: sketch.accent,
                 strokeWidth: 1.2,
                 inset: 0
               }
@@ -4331,17 +4726,22 @@ function Dialog2({
   open,
   defaultOpen,
   onOpenChange,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }) {
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   const [uncontrolled, setUncontrolled] = useState(defaultOpen === true);
   const isOpen = open ?? uncontrolled;
   return /* @__PURE__ */ jsx(
@@ -4354,8 +4754,13 @@ function Dialog2({
         bowing,
         fillStyle,
         strokeWidth,
+        hachureGap,
+        hachureAngle,
+        fillWeight,
         resolvedSeed,
         ink,
+        paper: fill ?? theme.paper,
+        isDark: theme.isDark,
         animate,
         open: isOpen
       },
@@ -4391,7 +4796,7 @@ var DialogOverlay = forwardRef(
         style: {
           position: "fixed",
           inset: 0,
-          background: "rgba(31, 29, 26, 0.38)",
+          background: sketch.isDark ? "rgba(0, 0, 0, 0.65)" : "rgba(31, 29, 26, 0.38)",
           zIndex: 70,
           ...style
         }
@@ -4400,7 +4805,7 @@ var DialogOverlay = forwardRef(
   }
 );
 var DialogContent = forwardRef(
-  function DialogContent2({ className, style, contentStyle, children, ...rest }, ref) {
+  function DialogContent2({ className, style, contentStyle, fill, children, ...rest }, ref) {
     const sketch = useDialogSketch();
     const shouldAnimate = useAnimate(sketch.animate);
     return /* @__PURE__ */ jsx(AnimatePresence, { children: sketch.open ? /* @__PURE__ */ jsxs(Dialog.Portal, { forceMount: true, children: [
@@ -4430,6 +4835,7 @@ var DialogContent = forwardRef(
                 width: "min(420px, calc(100vw - 32px))",
                 outline: "none",
                 pointerEvents: "auto",
+                color: sketch.ink,
                 ...style
               },
               children: /* @__PURE__ */ jsx(
@@ -4440,10 +4846,13 @@ var DialogContent = forwardRef(
                   sketchColor: sketch.ink,
                   bowing: sketch.bowing,
                   fillStyle: sketch.fillStyle ?? "solid",
-                  fill: "#f7f6f2",
+                  fill: fill ?? sketch.paper,
                   strokeWidth: sketch.strokeWidth ?? 2,
+                  hachureGap: sketch.hachureGap,
+                  hachureAngle: sketch.hachureAngle,
+                  fillWeight: sketch.fillWeight,
                   animate: sketch.animate,
-                  contentStyle: { padding: 20, ...contentStyle },
+                  contentStyle: { padding: 20, color: sketch.ink, ...contentStyle },
                   children
                 }
               )
@@ -4540,17 +4949,22 @@ function AlertDialog({
   open,
   defaultOpen,
   onOpenChange,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }) {
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   const [uncontrolled, setUncontrolled] = useState(defaultOpen === true);
   const isOpen = open ?? uncontrolled;
   return /* @__PURE__ */ jsx(
@@ -4563,8 +4977,13 @@ function AlertDialog({
         bowing,
         fillStyle,
         strokeWidth,
+        hachureGap,
+        hachureAngle,
+        fillWeight,
         resolvedSeed,
         ink,
+        paper: fill ?? theme.paper,
+        isDark: theme.isDark,
         animate,
         open: isOpen
       },
@@ -4598,14 +5017,14 @@ var AlertDialogOverlay = forwardRef(function AlertDialogOverlay2({ style, ...res
       style: {
         position: "fixed",
         inset: 0,
-        background: "rgba(31, 29, 26, 0.38)",
+        background: sketch.isDark ? "rgba(0, 0, 0, 0.65)" : "rgba(31, 29, 26, 0.38)",
         zIndex: 70,
         ...style
       }
     }
   ) });
 });
-var AlertDialogContent = forwardRef(function AlertDialogContent2({ className, style, contentStyle, children, ...rest }, ref) {
+var AlertDialogContent = forwardRef(function AlertDialogContent2({ className, style, contentStyle, fill, children, ...rest }, ref) {
   const sketch = useAlertDialogSketch();
   const shouldAnimate = useAnimate(sketch.animate);
   return /* @__PURE__ */ jsx(AnimatePresence, { children: sketch.open ? /* @__PURE__ */ jsxs(AlertDialogPrimitive.Portal, { forceMount: true, children: [
@@ -4635,6 +5054,7 @@ var AlertDialogContent = forwardRef(function AlertDialogContent2({ className, st
               width: "min(420px, calc(100vw - 32px))",
               outline: "none",
               pointerEvents: "auto",
+              color: sketch.ink,
               ...style
             },
             children: /* @__PURE__ */ jsx(
@@ -4645,10 +5065,13 @@ var AlertDialogContent = forwardRef(function AlertDialogContent2({ className, st
                 sketchColor: sketch.ink,
                 bowing: sketch.bowing,
                 fillStyle: sketch.fillStyle ?? "solid",
-                fill: "#f7f6f2",
+                fill: fill ?? sketch.paper,
                 strokeWidth: sketch.strokeWidth ?? 2,
+                hachureGap: sketch.hachureGap,
+                hachureAngle: sketch.hachureAngle,
+                fillWeight: sketch.fillWeight,
                 animate: sketch.animate,
-                contentStyle: { padding: 20, ...contentStyle },
+                contentStyle: { padding: 20, color: sketch.ink, ...contentStyle },
                 children
               }
             )
@@ -4790,11 +5213,15 @@ var Command = forwardRef(
     bowing,
     fillStyle,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     animate,
     ...rest
   }, ref) {
     const resolvedSeed = useResolvedSeed(seed);
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
     return /* @__PURE__ */ jsx(
       CommandSketchContext.Provider,
       {
@@ -4805,24 +5232,31 @@ var Command = forwardRef(
           bowing,
           fillStyle,
           strokeWidth,
+          hachureGap,
+          hachureAngle,
+          fillWeight,
           resolvedSeed,
           ink,
+          paper: theme.paper,
           animate
         },
         children: /* @__PURE__ */ jsx(
           SketchBox,
           {
             className: cn(className),
-            style,
+            style: { color: ink, ...style },
             roughness,
             seed: resolvedSeed,
             sketchColor: ink,
             bowing,
             fillStyle: fillStyle ?? "solid",
-            fill: "#f7f6f2",
+            fill: theme.paper,
             strokeWidth: strokeWidth ?? 1.5,
+            hachureGap,
+            hachureAngle,
+            fillWeight,
             animate,
-            contentStyle: { padding: 0, display: "flex", flexDirection: "column" },
+            contentStyle: { padding: 0, display: "flex", flexDirection: "column", color: ink },
             children: /* @__PURE__ */ jsx(Command$1, { ref, ...rest, children })
           }
         )
@@ -5043,6 +5477,9 @@ function Combobox({
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   "aria-label": ariaLabel
 }) {
@@ -5052,7 +5489,8 @@ function Combobox({
   const selectedOption = options.find(
     (option) => option.value === selectedValue
   );
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   const resolvedSeed = useResolvedSeed(seed);
   const shouldAnimate = useAnimate(animate);
   const triggerRef = useRef(null);
@@ -5102,9 +5540,12 @@ function Combobox({
               shape: "rectangle",
               roughness,
               seed: resolvedSeed,
-              sketchColor: open ? SKETCH_COLORS.accent : ink,
+              sketchColor: open ? theme.accent : ink,
               bowing,
               fillStyle,
+              hachureGap,
+              hachureAngle,
+              fillWeight,
               strokeWidth: open ? (strokeWidth ?? 1.75) + 0.35 : strokeWidth
             }
           ),
@@ -5163,6 +5604,9 @@ function Combobox({
             bowing,
             fillStyle,
             strokeWidth,
+            hachureGap,
+            hachureAngle,
+            fillWeight,
             animate,
             children: [
               /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder }),
@@ -5190,16 +5634,21 @@ var Kbd = forwardRef(function Kbd2({
   children,
   className,
   style,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }, ref) {
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   return /* @__PURE__ */ jsx(
     SketchBox,
     {
@@ -5207,6 +5656,7 @@ var Kbd = forwardRef(function Kbd2({
       style: {
         display: "inline-flex",
         verticalAlign: "middle",
+        color: ink,
         ...style
       },
       contentStyle: {
@@ -5214,10 +5664,14 @@ var Kbd = forwardRef(function Kbd2({
         fontSize: 11,
         fontFamily: doodleUiFontFamily,
         lineHeight: 1.35,
-        letterSpacing: "0.04em"
+        letterSpacing: "0.04em",
+        color: ink
       },
-      fill: SKETCH_COLORS.secondaryFill,
+      fill: fill ?? theme.secondaryFill,
       fillStyle: fillStyle ?? "hachure",
+      hachureGap: hachureGap ?? 6,
+      hachureAngle,
+      fillWeight: fillWeight ?? 0.8,
       roughness,
       seed,
       sketchColor: ink,
@@ -5264,7 +5718,8 @@ var Spinner = forwardRef(
   }, ref) {
     const px = SIZE_PX[size];
     const resolvedSeed = useResolvedSeed(seed);
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
     const shouldSpin = useAnimate(animate);
     const boxStyle = {
       position: "relative",
@@ -5332,6 +5787,9 @@ var Toggle = forwardRef(
     bowing,
     fillStyle,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     pressed,
     defaultPressed,
     onPressedChange,
@@ -5343,7 +5801,10 @@ var Toggle = forwardRef(
     const rootRef = useRef(null);
     const [uncontrolled, setUncontrolled] = useState(defaultPressed === true);
     const isPressed = pressed ?? uncontrolled;
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
+    const accent = sketchColor ?? theme.accent;
+    const accentFill = theme.isDark ? sketchColor ? `${sketchColor}25` : theme.accentFill : theme.accentFill;
     const resolvedSeed = useResolvedSeed(seed);
     const shouldAnimate = useAnimate(animate);
     const pressSeed = deriveSeed(resolvedSeed, isPressed ? "on" : "off");
@@ -5372,7 +5833,7 @@ var Toggle = forwardRef(
           border: "none",
           background: "transparent",
           cursor: disabled ? "not-allowed" : "pointer",
-          color: ink,
+          color: isPressed ? theme.isDark ? "#ffffff" : accent : ink,
           fontFamily: doodleUiFontFamily,
           fontWeight: doodleUiFontWeight(600),
           opacity: disabled ? 0.45 : 1,
@@ -5388,11 +5849,14 @@ var Toggle = forwardRef(
               shape: "rectangle",
               roughness,
               seed: sketchSeed,
-              sketchColor: isPressed ? SKETCH_COLORS.accent : ink,
+              sketchColor: isPressed ? accent : ink,
               bowing,
               fillStyle: fillStyle ?? "hachure",
-              fill: isPressed ? SKETCH_COLORS.accentFill : void 0,
-              strokeWidth: strokeWidth ?? 1.6
+              fill: isPressed ? accentFill : void 0,
+              strokeWidth: strokeWidth ?? 1.6,
+              hachureGap: hachureGap ?? 7,
+              hachureAngle,
+              fillWeight: fillWeight ?? 1
             }
           ),
           /* @__PURE__ */ jsx("span", { style: { position: "relative", zIndex: 1 }, children })
@@ -5418,13 +5882,19 @@ function ToggleGroup(props) {
     bowing,
     fillStyle,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     size = "md",
     animate,
     type = "single",
     ...rest
   } = props;
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
+  const accent = sketchColor ?? theme.accent;
+  const accentFill = theme.isDark ? sketchColor ? `${sketchColor}25` : theme.accentFill : theme.accentFill;
   const rootStyle = { display: "inline-flex", gap: 6, flexWrap: "wrap" };
   return /* @__PURE__ */ jsx(
     ToggleGroupSketchContext.Provider,
@@ -5436,8 +5906,14 @@ function ToggleGroup(props) {
         bowing,
         fillStyle,
         strokeWidth,
+        hachureGap,
+        hachureAngle,
+        fillWeight,
         resolvedSeed,
         ink,
+        accent,
+        accentFill,
+        isDark: theme.isDark,
         animate,
         size
       },
@@ -5486,6 +5962,7 @@ var ToggleGroupItem = forwardRef(function ToggleGroupItem2({ className, style, c
     return () => obs.disconnect();
   }, [value]);
   useDrawIn(rootRef, DRAW_IN_DURATION_MS, shouldAnimate, sketchSeed);
+  const textColor = pressed ? sketch.isDark ? "#ffffff" : sketch.accent : sketch.ink;
   return /* @__PURE__ */ jsxs(
     ToggleGroupPrimitive.Item,
     {
@@ -5504,7 +5981,7 @@ var ToggleGroupItem = forwardRef(function ToggleGroupItem2({ className, style, c
         border: "none",
         background: "transparent",
         cursor: disabled ? "not-allowed" : "pointer",
-        color: sketch.ink,
+        color: textColor,
         fontFamily: doodleUiFontFamily,
         fontWeight: doodleUiFontWeight(600),
         opacity: disabled ? 0.45 : 1,
@@ -5520,11 +5997,14 @@ var ToggleGroupItem = forwardRef(function ToggleGroupItem2({ className, style, c
             shape: "rectangle",
             roughness: sketch.roughness,
             seed: sketchSeed,
-            sketchColor: pressed ? SKETCH_COLORS.accent : sketch.ink,
+            sketchColor: pressed ? sketch.accent : sketch.ink,
             bowing: sketch.bowing,
             fillStyle: sketch.fillStyle ?? "hachure",
-            fill: pressed ? SKETCH_COLORS.accentFill : void 0,
-            strokeWidth: sketch.strokeWidth ?? 1.6
+            fill: pressed ? sketch.accentFill : void 0,
+            strokeWidth: sketch.strokeWidth ?? 1.6,
+            hachureGap: sketch.hachureGap ?? 7,
+            hachureAngle: sketch.hachureAngle,
+            fillWeight: sketch.fillWeight ?? 1
           }
         ),
         /* @__PURE__ */ jsx("span", { style: { position: "relative", zIndex: 1 }, children })
@@ -5550,13 +6030,17 @@ function InputGroup({
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   onFocus,
   onBlur,
   ...rest
 }) {
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   const [focused, setFocused] = useState(false);
   const shouldAnimate = useAnimate(animate);
   const focusSeed = deriveSeed(resolvedSeed, "focus");
@@ -5567,12 +6051,16 @@ function InputGroup({
       value: {
         roughness,
         seed: resolvedSeed,
-        sketchColor,
+        sketchColor: ink,
         bowing,
         fillStyle,
         strokeWidth,
+        hachureGap,
+        hachureAngle,
+        fillWeight,
         resolvedSeed,
         ink,
+        accent: theme.accent,
         animate,
         focused,
         setFocused
@@ -5598,10 +6086,13 @@ function InputGroup({
             {
               roughness,
               seed: sketchSeed,
-              sketchColor: focused ? SKETCH_COLORS.accent : ink,
+              sketchColor: focused ? theme.accent : ink,
               bowing,
               fillStyle,
               strokeWidth: focused && !shouldAnimate ? (strokeWidth ?? 1.75) + 0.35 : strokeWidth,
+              hachureGap,
+              hachureAngle,
+              fillWeight,
               animate,
               drawInKey: sketchSeed,
               contentStyle: {
@@ -5701,24 +6192,35 @@ var InputOTP = forwardRef(
     bowing,
     fillStyle,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
+    fill,
     animate,
     children,
     ...rest
   }, ref) {
     const resolvedSeed = useResolvedSeed(seed);
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
     return /* @__PURE__ */ jsx(
       InputOTPSketchContext.Provider,
       {
         value: {
           roughness,
           seed: resolvedSeed,
-          sketchColor,
+          sketchColor: ink,
           bowing,
           fillStyle,
           strokeWidth,
+          hachureGap,
+          hachureAngle,
+          fillWeight,
+          fill,
           resolvedSeed,
           ink,
+          accent: theme.accent,
+          paper: theme.paper,
           animate
         },
         children: /* @__PURE__ */ jsx(
@@ -5795,9 +6297,13 @@ var InputOTPSlot = forwardRef(
               shape: "rectangle",
               roughness: sketch.roughness,
               seed: slotSeed,
-              sketchColor: isActive ? SKETCH_COLORS.accent : sketch.ink,
+              sketchColor: isActive ? sketch.accent : sketch.ink,
               bowing: sketch.bowing,
               fillStyle: sketch.fillStyle,
+              fill: sketch.fill,
+              hachureGap: sketch.hachureGap,
+              hachureAngle: sketch.hachureAngle,
+              fillWeight: sketch.fillWeight,
               strokeWidth: isActive ? (sketch.strokeWidth ?? 1.75) + 0.15 : sketch.strokeWidth
             }
           ),
@@ -5857,17 +6363,22 @@ var ScrollArea = forwardRef(function ScrollArea2({
   className,
   style,
   children,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }, ref) {
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   return /* @__PURE__ */ jsx(
     ScrollAreaSketchContext.Provider,
     {
@@ -5878,8 +6389,12 @@ var ScrollArea = forwardRef(function ScrollArea2({
         bowing,
         fillStyle,
         strokeWidth,
+        hachureGap,
+        hachureAngle,
+        fillWeight,
         resolvedSeed,
         ink,
+        paper: fill ?? theme.paper,
         animate
       },
       children: /* @__PURE__ */ jsx(
@@ -5887,7 +6402,7 @@ var ScrollArea = forwardRef(function ScrollArea2({
         {
           ref,
           className: cn(className),
-          style: { position: "relative", overflow: "hidden", ...style },
+          style: { position: "relative", overflow: "hidden", color: ink, ...style },
           ...rest,
           children: /* @__PURE__ */ jsx(
             SketchBox,
@@ -5897,10 +6412,13 @@ var ScrollArea = forwardRef(function ScrollArea2({
               sketchColor: ink,
               bowing,
               fillStyle: fillStyle ?? "solid",
-              fill: "#f7f6f2",
+              fill: fill ?? theme.paper,
               strokeWidth: strokeWidth ?? 1.5,
+              hachureGap,
+              hachureAngle,
+              fillWeight,
               animate,
-              contentStyle: { padding: 0, height: "100%" },
+              contentStyle: { padding: 0, height: "100%", color: ink },
               style: { height: "100%" },
               children
             }
@@ -5989,7 +6507,8 @@ function ResizableHandle({
   ...rest
 }) {
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   const handleSeed = deriveSeed(resolvedSeed, "handle");
   const base = {
     position: "relative",
@@ -6063,17 +6582,22 @@ function useHoverCardSketch() {
 }
 function HoverCard({
   children,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }) {
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   return /* @__PURE__ */ jsx(
     HoverCardSketchContext.Provider,
     {
@@ -6084,8 +6608,12 @@ function HoverCard({
         bowing,
         fillStyle,
         strokeWidth,
+        hachureGap,
+        hachureAngle,
+        fillWeight,
         resolvedSeed,
         ink,
+        paper: fill ?? theme.paper,
         animate
       },
       children: /* @__PURE__ */ jsx(HoverCardPrimitive.Root, { ...rest, children })
@@ -6093,7 +6621,7 @@ function HoverCard({
   );
 }
 var HoverCardTrigger = HoverCardPrimitive.Trigger;
-var HoverCardContent = forwardRef(function HoverCardContent2({ className, style, children, sideOffset = 6, align = "center", ...rest }, ref) {
+var HoverCardContent = forwardRef(function HoverCardContent2({ className, style, children, fill, sideOffset = 6, align = "center", ...rest }, ref) {
   const sketch = useHoverCardSketch();
   return /* @__PURE__ */ jsx(HoverCardPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     HoverCardPrimitive.Content,
@@ -6102,7 +6630,7 @@ var HoverCardContent = forwardRef(function HoverCardContent2({ className, style,
       sideOffset,
       align,
       className: cn(className),
-      style: { zIndex: 75, outline: "none", ...style },
+      style: { zIndex: 75, outline: "none", color: sketch.ink, ...style },
       ...rest,
       children: /* @__PURE__ */ jsx(
         SketchBox,
@@ -6112,11 +6640,14 @@ var HoverCardContent = forwardRef(function HoverCardContent2({ className, style,
           sketchColor: sketch.ink,
           bowing: sketch.bowing,
           fillStyle: sketch.fillStyle ?? "solid",
-          fill: "#f7f6f2",
+          fill: fill ?? sketch.paper,
           strokeWidth: sketch.strokeWidth ?? 1.5,
+          hachureGap: sketch.hachureGap,
+          hachureAngle: sketch.hachureAngle,
+          fillWeight: sketch.fillWeight,
           shadow: true,
           animate: sketch.animate,
-          contentStyle: { padding: 14, maxWidth: 320, fontSize: 14 },
+          contentStyle: { padding: 14, maxWidth: 320, fontSize: 14, color: sketch.ink },
           children
         }
       )
@@ -6136,17 +6667,22 @@ function useContextMenuSketch() {
 }
 function ContextMenu({
   children,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }) {
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   return /* @__PURE__ */ jsx(
     ContextMenuSketchContext.Provider,
     {
@@ -6157,8 +6693,13 @@ function ContextMenu({
         bowing,
         fillStyle,
         strokeWidth,
+        hachureGap,
+        hachureAngle,
+        fillWeight,
         resolvedSeed,
         ink,
+        paper: fill ?? theme.paper,
+        accent: theme.accent,
         animate
       },
       children: /* @__PURE__ */ jsx(ContextMenuPrimitive.Root, { ...rest, children })
@@ -6169,14 +6710,14 @@ var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 var ContextMenuGroup = ContextMenuPrimitive.Group;
 var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 var ContextMenuSub = ContextMenuPrimitive.Sub;
-var ContextMenuContent = forwardRef(function ContextMenuContent2({ className, style, children, ...rest }, ref) {
+var ContextMenuContent = forwardRef(function ContextMenuContent2({ className, style, children, fill, ...rest }, ref) {
   const sketch = useContextMenuSketch();
   return /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     ContextMenuPrimitive.Content,
     {
       ref,
       className: cn(className),
-      style: { zIndex: 80, outline: "none", minWidth: 180, ...style },
+      style: { zIndex: 80, outline: "none", minWidth: 180, color: sketch.ink, ...style },
       ...rest,
       children: /* @__PURE__ */ jsx(
         SketchBox,
@@ -6186,11 +6727,14 @@ var ContextMenuContent = forwardRef(function ContextMenuContent2({ className, st
           sketchColor: sketch.ink,
           bowing: sketch.bowing,
           fillStyle: sketch.fillStyle ?? "solid",
-          fill: "#f7f6f2",
+          fill: fill ?? sketch.paper,
           strokeWidth: sketch.strokeWidth ?? 1.5,
+          hachureGap: sketch.hachureGap,
+          hachureAngle: sketch.hachureAngle,
+          fillWeight: sketch.fillWeight,
           shadow: true,
           animate: sketch.animate,
-          contentStyle: { padding: "6px 4px" },
+          contentStyle: { padding: "6px 4px", color: sketch.ink },
           children
         }
       )
@@ -6305,7 +6849,7 @@ var ContextMenuCheckboxItem = forwardRef(function ContextMenuCheckboxItem2({ cla
                 path: CHECK_PATH3,
                 roughness: (sketch.roughness ?? 1.5) * 0.7,
                 seed: deriveSeed(sketch.resolvedSeed, "checkbox-mark"),
-                sketchColor: SKETCH_COLORS.accent,
+                sketchColor: sketch.accent,
                 bowing: sketch.bowing,
                 strokeWidth: 1.6,
                 inset: 0
@@ -6373,10 +6917,10 @@ var ContextMenuRadioItem = forwardRef(function ContextMenuRadioItem2({ className
                 shape: "ellipse",
                 roughness: (sketch.roughness ?? 1.5) * 0.8,
                 seed: deriveSeed(sketch.resolvedSeed, "radio-mark"),
-                sketchColor: SKETCH_COLORS.accent,
+                sketchColor: sketch.accent,
                 bowing: sketch.bowing,
                 fillStyle: "solid",
-                fill: SKETCH_COLORS.accent,
+                fill: sketch.accent,
                 strokeWidth: 1.2,
                 inset: 0
               }
@@ -6446,17 +6990,22 @@ function useNavigationMenuSketch() {
 }
 function NavigationMenu({
   children,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }) {
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   return /* @__PURE__ */ jsx(
     NavigationMenuSketchContext.Provider,
     {
@@ -6467,8 +7016,12 @@ function NavigationMenu({
         bowing,
         fillStyle,
         strokeWidth,
+        hachureGap,
+        hachureAngle,
+        fillWeight,
         resolvedSeed,
         ink,
+        paper: fill ?? theme.paper,
         animate
       },
       children: /* @__PURE__ */ jsxs(NavigationMenuPrimitive.Root, { ...rest, children: [
@@ -6523,14 +7076,14 @@ var NavigationMenuTrigger = forwardRef(function NavigationMenuTrigger2({ classNa
     }
   );
 });
-var NavigationMenuContent = forwardRef(function NavigationMenuContent2({ className, style, children, ...rest }, ref) {
+var NavigationMenuContent = forwardRef(function NavigationMenuContent2({ className, style, children, fill, ...rest }, ref) {
   const sketch = useNavigationMenuSketch();
   return /* @__PURE__ */ jsx(
     NavigationMenuPrimitive.Content,
     {
       ref,
       className: cn(className),
-      style: { outline: "none", ...style },
+      style: { outline: "none", color: sketch.ink, ...style },
       ...rest,
       children: /* @__PURE__ */ jsx(
         SketchBox,
@@ -6540,11 +7093,14 @@ var NavigationMenuContent = forwardRef(function NavigationMenuContent2({ classNa
           sketchColor: sketch.ink,
           bowing: sketch.bowing,
           fillStyle: sketch.fillStyle ?? "solid",
-          fill: "#f7f6f2",
+          fill: fill ?? sketch.paper,
           strokeWidth: sketch.strokeWidth ?? 1.5,
+          hachureGap: sketch.hachureGap,
+          hachureAngle: sketch.hachureAngle,
+          fillWeight: sketch.fillWeight,
           shadow: true,
           animate: sketch.animate,
-          contentStyle: { padding: 12, minWidth: 200 },
+          contentStyle: { padding: 12, minWidth: 200, color: sketch.ink },
           children
         }
       )
@@ -6646,17 +7202,22 @@ function Menubar({
   children,
   className,
   style,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }) {
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   return /* @__PURE__ */ jsx(
     MenubarSketchContext.Provider,
     {
@@ -6667,8 +7228,12 @@ function Menubar({
         bowing,
         fillStyle,
         strokeWidth,
+        hachureGap,
+        hachureAngle,
+        fillWeight,
         resolvedSeed,
         ink,
+        paper: fill ?? theme.paper,
         animate
       },
       children: /* @__PURE__ */ jsx(
@@ -6713,7 +7278,7 @@ var MenubarTrigger = forwardRef(function MenubarTrigger2({ className, style, chi
     }
   );
 });
-var MenubarContent = forwardRef(function MenubarContent2({ className, style, children, align = "start", sideOffset = 6, ...rest }, ref) {
+var MenubarContent = forwardRef(function MenubarContent2({ className, style, children, fill, align = "start", sideOffset = 6, ...rest }, ref) {
   const sketch = useMenubarSketch();
   return /* @__PURE__ */ jsx(MenubarPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     MenubarPrimitive.Content,
@@ -6722,7 +7287,7 @@ var MenubarContent = forwardRef(function MenubarContent2({ className, style, chi
       align,
       sideOffset,
       className: cn(className),
-      style: { zIndex: 80, outline: "none", minWidth: 180, ...style },
+      style: { zIndex: 80, outline: "none", minWidth: 180, color: sketch.ink, ...style },
       ...rest,
       children: /* @__PURE__ */ jsx(
         SketchBox,
@@ -6732,11 +7297,14 @@ var MenubarContent = forwardRef(function MenubarContent2({ className, style, chi
           sketchColor: sketch.ink,
           bowing: sketch.bowing,
           fillStyle: sketch.fillStyle ?? "solid",
-          fill: "#f7f6f2",
+          fill: fill ?? sketch.paper,
           strokeWidth: sketch.strokeWidth ?? 1.5,
+          hachureGap: sketch.hachureGap,
+          hachureAngle: sketch.hachureAngle,
+          fillWeight: sketch.fillWeight,
           shadow: true,
           animate: sketch.animate,
-          contentStyle: { padding: "6px 4px" },
+          contentStyle: { padding: "6px 4px", color: sketch.ink },
           children
         }
       )
@@ -6875,17 +7443,22 @@ function SlidingPanelRoot({
   defaultOpen,
   onOpenChange,
   side = "right",
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }) {
   const resolvedSeed = useResolvedSeed(seed);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   const [uncontrolled, setUncontrolled] = useState(defaultOpen === true);
   const isOpen = open ?? uncontrolled;
   return /* @__PURE__ */ jsx(
@@ -6898,8 +7471,13 @@ function SlidingPanelRoot({
         bowing,
         fillStyle,
         strokeWidth,
+        hachureGap,
+        hachureAngle,
+        fillWeight,
         resolvedSeed,
         ink,
+        paper: fill ?? theme.paper,
+        isDark: theme.isDark,
         animate,
         open: isOpen,
         side
@@ -6977,14 +7555,14 @@ var SlidingPanelOverlay = forwardRef(function SlidingPanelOverlay2({ style, ...r
       style: {
         position: "fixed",
         inset: 0,
-        background: "rgba(31, 29, 26, 0.38)",
+        background: sketch.isDark ? "rgba(0, 0, 0, 0.65)" : "rgba(31, 29, 26, 0.38)",
         zIndex: 70,
         ...style
       }
     }
   ) });
 });
-var SlidingPanelContent = forwardRef(function SlidingPanelContent2({ className, style, contentStyle, children, chrome, ...rest }, ref) {
+var SlidingPanelContent = forwardRef(function SlidingPanelContent2({ className, style, contentStyle, fill, children, chrome, ...rest }, ref) {
   const sketch = useSlidingPanelSketch();
   const shouldAnimate = useAnimate(sketch.animate);
   const variants = slideVariants(sketch.side, shouldAnimate);
@@ -7015,8 +7593,11 @@ var SlidingPanelContent = forwardRef(function SlidingPanelContent2({ className,
             sketchColor: sketch.ink,
             bowing: sketch.bowing,
             fillStyle: sketch.fillStyle ?? "solid",
-            fill: "#f7f6f2",
+            fill: fill ?? sketch.paper,
             strokeWidth: sketch.strokeWidth ?? 2,
+            hachureGap: sketch.hachureGap,
+            hachureAngle: sketch.hachureAngle,
+            fillWeight: sketch.fillWeight,
             animate: sketch.animate,
             contentStyle: {
               padding: 20,
@@ -7024,6 +7605,7 @@ var SlidingPanelContent = forwardRef(function SlidingPanelContent2({ className,
               boxSizing: "border-box",
               display: "flex",
               flexDirection: "column",
+              color: sketch.ink,
               ...contentStyle
             },
             style: { height: "100%" },
@@ -7155,7 +7737,7 @@ var DrawerHandle = forwardRef(
             shape: "line",
             roughness: (sketch.roughness ?? 1.5) + 0.3,
             seed: deriveSeed(sketch.resolvedSeed, "drawer-handle"),
-            sketchColor: sketch.sketchColor ?? SKETCH_COLORS.ink,
+            sketchColor: sketch.sketchColor ?? sketch.ink,
             bowing: sketch.bowing ?? 1.6,
             strokeWidth: 2.4,
             width: 48,
@@ -7191,14 +7773,20 @@ function AspectRatio({
   className,
   style,
   children,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate
 }) {
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   const inner = /* @__PURE__ */ jsx(
     AspectRatioPrimitive.Root,
     {
@@ -7207,6 +7795,7 @@ function AspectRatio({
       style: {
         width: "100%",
         overflow: "hidden",
+        color: ink,
         ...style
       },
       children: /* @__PURE__ */ jsx("div", { style: { width: "100%", height: "100%" }, children })
@@ -7219,13 +7808,16 @@ function AspectRatio({
     SketchBox,
     {
       className: cn(className),
-      style: { width: "100%", ...style },
-      contentStyle: { padding: 0, width: "100%" },
-      fill: SKETCH_COLORS.paper,
-      fillStyle: fillStyle ?? "hachure",
+      style: { width: "100%", color: ink, ...style },
+      contentStyle: { padding: 0, width: "100%", color: ink },
+      fill: fill ?? theme.paper,
+      fillStyle: fillStyle ?? "solid",
+      hachureGap,
+      hachureAngle,
+      fillWeight,
       roughness,
       seed,
-      sketchColor,
+      sketchColor: ink,
       bowing,
       strokeWidth,
       animate,
@@ -7240,12 +7832,16 @@ var NativeSelect = forwardRef(
     style,
     options,
     children,
+    fill,
     roughness,
     seed,
     sketchColor,
     bowing,
     fillStyle,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     animate,
     disabled,
     ...rest
@@ -7253,7 +7849,8 @@ var NativeSelect = forwardRef(
     const fieldRef = useRef(null);
     const shouldAnimate = useAnimate(animate);
     const resolvedSeed = useResolvedSeed(seed);
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
     useDrawIn(fieldRef, DRAW_IN_DURATION_MS, shouldAnimate);
     return /* @__PURE__ */ jsx(
       "span",
@@ -7264,6 +7861,7 @@ var NativeSelect = forwardRef(
           display: "block",
           width: "100%",
           opacity: disabled ? 0.6 : 1,
+          color: ink,
           ...style
         },
         children: /* @__PURE__ */ jsxs("span", { ref: fieldRef, style: { position: "relative", display: "block" }, children: [
@@ -7275,9 +7873,12 @@ var NativeSelect = forwardRef(
               seed: resolvedSeed,
               sketchColor: ink,
               bowing,
-              fillStyle,
-              fill: SKETCH_COLORS.paper,
-              strokeWidth
+              fillStyle: fillStyle ?? "solid",
+              fill: fill ?? theme.paper,
+              strokeWidth,
+              hachureGap,
+              hachureAngle,
+              fillWeight
             }
           ),
           /* @__PURE__ */ jsx(
@@ -7350,7 +7951,8 @@ var NativeSelect = forwardRef(
 var EmptyContext = createContext(null);
 function useEmptyInk() {
   const ctx = useContext(EmptyContext);
-  return ctx?.ink ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme();
+  return ctx?.ink ?? theme.ink;
 }
 var emptyContentStyle = {
   display: "flex",
@@ -7368,22 +7970,27 @@ var Empty = forwardRef(function Empty2({
   style,
   children,
   bordered = true,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   fillStyle,
   strokeWidth,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate,
   ...rest
 }, ref) {
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
   const inner = /* @__PURE__ */ jsx(EmptyContext.Provider, { value: { ink }, children: /* @__PURE__ */ jsx(
     "div",
     {
       ref: bordered ? void 0 : ref,
       className: cn(className),
-      style: { ...emptyContentStyle, ...style },
+      style: { ...emptyContentStyle, color: ink, ...style },
       ...bordered ? {} : rest,
       children
     }
@@ -7396,13 +8003,16 @@ var Empty = forwardRef(function Empty2({
     {
       ref,
       className: cn(className),
-      style: { width: "100%", ...style },
-      contentStyle: emptyContentStyle,
-      fill: SKETCH_COLORS.secondaryFill,
+      style: { width: "100%", color: ink, ...style },
+      contentStyle: { ...emptyContentStyle, color: ink },
+      fill: fill ?? theme.secondaryFill,
       fillStyle: fillStyle ?? "hachure",
+      hachureGap: hachureGap ?? 8,
+      hachureAngle,
+      fillWeight: fillWeight ?? 0.85,
       roughness,
       seed,
-      sketchColor,
+      sketchColor: ink,
       bowing,
       strokeWidth,
       animate,
@@ -7554,6 +8164,7 @@ function FieldDescription({
   ...rest
 }) {
   const { descriptionId } = useField();
+  const theme = useSketchTheme();
   return /* @__PURE__ */ jsx(
     "p",
     {
@@ -7564,7 +8175,7 @@ function FieldDescription({
         fontFamily: doodleUiFontFamily,
         fontSize: 12,
         lineHeight: 1.45,
-        color: SKETCH_COLORS.ink,
+        color: theme.ink,
         opacity: 0.75,
         ...style
       },
@@ -7580,6 +8191,7 @@ function FieldError({
   ...rest
 }) {
   const { error, errorId } = useField();
+  const theme = useSketchTheme();
   const message = children ?? error;
   if (!message) return null;
   return /* @__PURE__ */ jsx(
@@ -7593,7 +8205,7 @@ function FieldError({
         fontFamily: doodleUiFontFamily,
         fontSize: 12,
         lineHeight: 1.45,
-        color: SKETCH_COLORS.error,
+        color: theme.error,
         ...style
       },
       ...rest,
@@ -7639,7 +8251,10 @@ var Heading = forwardRef(
     ...rest
   }, ref) {
     const Tag = `h${level}`;
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
+    const accentColor = sketchColor ?? theme.accent;
+    const accentFill = theme.isDark ? sketchColor ? `${sketchColor}25` : theme.accentFill : theme.accentFill;
     const resolvedSeed = useResolvedSeed(seed);
     const shouldAnimate = useAnimate(animate);
     const accentRef = useRef(null);
@@ -7682,8 +8297,8 @@ var Heading = forwardRef(
                     shape: "rectangle",
                     roughness,
                     seed: resolvedSeed,
-                    sketchColor: SKETCH_COLORS.accent,
-                    fill: SKETCH_COLORS.accentFill,
+                    sketchColor: accentColor,
+                    fill: accentFill,
                     fillStyle: "solid",
                     bowing,
                     strokeWidth: strokeWidth ?? 1.2
@@ -7712,7 +8327,7 @@ var Heading = forwardRef(
                   path: "M 2 4 Q 40 1 80 5 T 160 3",
                   roughness,
                   seed: resolvedSeed,
-                  sketchColor: ink,
+                  sketchColor: accentColor,
                   bowing,
                   strokeWidth: strokeWidth ?? 1.5
                 }
@@ -7725,6 +8340,7 @@ var Heading = forwardRef(
   }
 );
 var Text = forwardRef(function Text2({ variant = "body", className, style, children, ...rest }, ref) {
+  const theme = useSketchTheme();
   const sizes = { body: 14, lead: 17, muted: 13 };
   const opacity = variant === "muted" ? 0.75 : 1;
   return /* @__PURE__ */ jsx(
@@ -7738,7 +8354,7 @@ var Text = forwardRef(function Text2({ variant = "body", className, style, child
         fontSize: sizes[variant],
         fontWeight: doodleUiFontWeight(variant === "lead" ? 500 : 400),
         lineHeight: 1.55,
-        color: SKETCH_COLORS.ink,
+        color: theme.ink,
         opacity,
         ...style
       },
@@ -7761,7 +8377,9 @@ var Blockquote = forwardRef(
     animate,
     ...rest
   }, ref) {
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
+    const accent = sketchColor ?? theme.accent;
     const resolvedSeed = useResolvedSeed(seed);
     const shouldAnimate = useAnimate(animate);
     const ruleRef = useRef(null);
@@ -7797,7 +8415,7 @@ var Blockquote = forwardRef(
                   shape: "line-vertical",
                   roughness,
                   seed: resolvedSeed,
-                  sketchColor: ink,
+                  sketchColor: accent,
                   bowing,
                   strokeWidth: strokeWidth ?? 2
                 }
@@ -7815,33 +8433,42 @@ var InlineCode = forwardRef(
     className,
     style,
     children,
+    fill,
     roughness,
     seed,
     sketchColor,
     bowing,
     fillStyle,
     strokeWidth,
+    hachureGap,
+    hachureAngle,
+    fillWeight,
     animate,
     ...rest
   }, ref) {
-    const ink = sketchColor ?? SKETCH_COLORS.ink;
+    const theme = useSketchTheme(sketchColor);
+    const ink = sketchColor ?? theme.ink;
     return /* @__PURE__ */ jsx(
       SketchBox,
       {
         className: cn(className),
-        style: { display: "inline-flex", verticalAlign: "baseline", ...style },
+        style: { display: "inline-flex", verticalAlign: "baseline", color: ink, ...style },
         contentStyle: {
           padding: "1px 6px",
           fontSize: "0.9em",
-          fontFamily: "ui-monospace, monospace"
+          fontFamily: "ui-monospace, monospace",
+          color: ink
         },
-        fill: SKETCH_COLORS.paper,
-        fillStyle: fillStyle ?? "hachure",
+        fill: fill ?? theme.paper,
+        fillStyle: fillStyle ?? "solid",
         roughness,
         seed,
         sketchColor: ink,
         bowing,
         strokeWidth: strokeWidth ?? 1.2,
+        hachureGap,
+        hachureAngle,
+        fillWeight,
         animate,
         ...rest,
         children: /* @__PURE__ */ jsx(
@@ -7867,6 +8494,7 @@ var Highlight = forwardRef(
     className,
     style,
     children,
+    fill,
     roughness,
     seed,
     sketchColor,
@@ -7876,6 +8504,9 @@ var Highlight = forwardRef(
     ...rest
   }, ref) {
     const resolvedSeed = useResolvedSeed(seed);
+    const theme = useSketchTheme(sketchColor);
+    const accent = sketchColor ?? theme.accent;
+    const accentFill = fill ?? (theme.isDark ? sketchColor ? `${sketchColor}25` : theme.accentFill : theme.accentFill);
     const shouldAnimate = useAnimate(animate);
     const markRef = useRef(null);
     useDrawIn(markRef, DRAW_IN_MARK_MS, shouldAnimate);
@@ -7906,8 +8537,8 @@ var Highlight = forwardRef(
                   shape: "rectangle",
                   roughness,
                   seed: resolvedSeed,
-                  sketchColor: sketchColor ?? SKETCH_COLORS.accent,
-                  fill: SKETCH_COLORS.accentFill,
+                  sketchColor: accent,
+                  fill: accentFill,
                   fillStyle: "solid",
                   bowing,
                   strokeWidth: strokeWidth ?? 1
@@ -7958,7 +8589,9 @@ function SidebarProvider({
   const toggleCollapsed = useCallback(() => {
     setCollapsed((c) => !c);
   }, []);
-  const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
+  const paper = theme.paper;
   const value = useMemo(
     () => ({
       open,
@@ -7966,7 +8599,8 @@ function SidebarProvider({
       collapsed,
       toggleCollapsed,
       ink,
-      sketch: { roughness, seed, sketchColor, bowing, strokeWidth }
+      paper,
+      sketch: { roughness, seed, sketchColor: ink, bowing, strokeWidth }
     }),
     [
       open,
@@ -7974,17 +8608,17 @@ function SidebarProvider({
       collapsed,
       toggleCollapsed,
       ink,
+      paper,
       roughness,
       seed,
-      sketchColor,
       bowing,
       strokeWidth
     ]
   );
   return /* @__PURE__ */ jsx(SidebarContext.Provider, { value, children });
 }
-var Sidebar = forwardRef(function Sidebar2({ className, style, children, side = "left", ...rest }, ref) {
-  const { open, collapsed, sketch } = useSidebar();
+var Sidebar = forwardRef(function Sidebar2({ className, style, children, fill, side = "left", ...rest }, ref) {
+  const { open, collapsed, ink, paper, sketch } = useSidebar();
   const resolvedSeed = useResolvedSeed(sketch.seed);
   const width = collapsed ? SIDEBAR_WIDTH_COLLAPSED : SIDEBAR_WIDTH;
   if (!open) {
@@ -8003,7 +8637,8 @@ var Sidebar = forwardRef(function Sidebar2({ className, style, children, side =
         transition: "width 200ms ease",
         display: "flex",
         flexDirection: "column",
-        background: SKETCH_COLORS.paper,
+        background: fill ?? paper,
+        color: ink,
         ...style
       },
       "data-side": side,
@@ -8028,7 +8663,7 @@ var Sidebar = forwardRef(function Sidebar2({ className, style, children, side =
                 shape: "line-vertical",
                 roughness: sketch.roughness,
                 seed: resolvedSeed,
-                sketchColor: sketch.sketchColor ?? SKETCH_COLORS.ink,
+                sketchColor: sketch.sketchColor ?? ink,
                 bowing: sketch.bowing,
                 strokeWidth: sketch.strokeWidth ?? 1.5
               }
@@ -8045,14 +8680,14 @@ function SidebarHeader({
   children,
   ...rest
 }) {
-  const { collapsed } = useSidebar();
+  const { collapsed, ink } = useSidebar();
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(className),
       style: {
         padding: collapsed ? "12px 8px" : "16px 14px",
-        borderBottom: `1px solid ${SKETCH_COLORS.ink}22`,
+        borderBottom: `1px solid ${ink}22`,
         ...style
       },
       ...rest,
@@ -8087,13 +8722,14 @@ function SidebarFooter({
   children,
   ...rest
 }) {
+  const { ink } = useSidebar();
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(className),
       style: {
         padding: "12px 10px",
-        borderTop: `1px solid ${SKETCH_COLORS.ink}22`,
+        borderTop: `1px solid ${ink}22`,
         ...style
       },
       ...rest,
@@ -8250,12 +8886,16 @@ function Carousel({
   style,
   children,
   setApi,
+  fill,
   roughness,
   seed,
   sketchColor,
   bowing,
   strokeWidth,
   fillStyle,
+  hachureGap,
+  hachureAngle,
+  fillWeight,
   animate
 }) {
   const [emblaRef, api] = useEmblaCarousel(
@@ -8267,6 +8907,9 @@ function Carousel({
   );
   const [canScrollPrev, setCanScrollPrev] = useState(false);
   const [canScrollNext, setCanScrollNext] = useState(false);
+  const theme = useSketchTheme(sketchColor);
+  const ink = sketchColor ?? theme.ink;
+  const paper = fill ?? theme.paper;
   const scrollPrev = useCallback(() => api?.scrollPrev(), [api]);
   const scrollNext = useCallback(() => api?.scrollNext(), [api]);
   const onSelect = useCallback(() => {
@@ -8316,11 +8959,16 @@ function Carousel({
     sketch: {
       roughness,
       seed,
-      sketchColor,
+      sketchColor: ink,
       bowing,
       strokeWidth,
       fillStyle,
-      animate
+      hachureGap,
+      hachureAngle,
+      fillWeight,
+      animate,
+      paper,
+      ink
     },
     bordered
   };
@@ -8335,6 +8983,8 @@ function Carousel({
       style: {
         position: "relative",
         width: "100%",
+        outline: "none",
+        color: ink,
         ...style
       },
       children
@@ -8366,15 +9016,18 @@ var CarouselContent = forwardRef(
     return /* @__PURE__ */ jsx(
       SketchBox,
       {
-        fill: SKETCH_COLORS.paper,
-        fillStyle: sketch.fillStyle ?? "hachure",
+        fill: sketch.paper,
+        fillStyle: sketch.fillStyle ?? "solid",
         roughness: sketch.roughness,
         seed: sketch.seed,
         sketchColor: sketch.sketchColor,
         bowing: sketch.bowing,
         strokeWidth: sketch.strokeWidth,
+        hachureGap: sketch.hachureGap,
+        hachureAngle: sketch.hachureAngle,
+        fillWeight: sketch.fillWeight,
         animate: sketch.animate,
-        contentStyle: { padding: 8 },
+        contentStyle: { padding: 8, color: sketch.ink },
         children: viewport
       }
     );
@@ -8417,7 +9070,7 @@ var CarouselArrow = forwardRef(function CarouselArrow2({ className, style, direc
     orientation
   } = useCarousel();
   const resolvedSeed = useResolvedSeed(sketch.seed);
-  const ink = sketch.sketchColor ?? SKETCH_COLORS.ink;
+  const ink = sketch.sketchColor ?? sketch.ink;
   const isPrev = direction === "prev";
   const disabled = isPrev ? !canScrollPrev : !canScrollNext;
   const shouldAnimate = useAnimate(sketch.animate);
@@ -8470,7 +9123,7 @@ var CarouselArrow = forwardRef(function CarouselArrow2({ className, style, direc
             seed: sketchSeed,
             sketchColor: ink,
             bowing: sketch.bowing,
-            fill: SKETCH_COLORS.paper,
+            fill: sketch.paper,
             fillStyle: "solid",
             strokeWidth: sketch.strokeWidth ?? 1.5,
             inset: 1.5
@@ -8515,6 +9168,6 @@ var CarouselNext = forwardRef(
   }
 );
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AspectRatio, Avatar, Badge, Blockquote, Breadcrumb, BreadcrumbItem, Button, Card, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuTrigger, DEFAULT_BOWING, DEFAULT_INK, DEFAULT_ROUGHNESS, DEFAULT_STROKE_WIDTH, DRAW_IN_ALERT_MS, DRAW_IN_DURATION_MS, DRAW_IN_MARK_MS, DRAW_IN_TOOLTIP_MS, Dialog2 as Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DoodleUIProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHandle, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuTrigger, Empty, EmptyAction, EmptyDescription, EmptyMedia, EmptyTitle, Field, FieldControl, FieldDescription, FieldError, FieldLabel, Heading, Highlight, HoverCard, HoverCardArrow, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, Label2 as Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, ModalClose, ModalDescription, ModalRoot, ModalTitle, ModalTrigger, NativeSelect, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuItemLink, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, Paragraph, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger, Progress, Radio, RadioGroup, ResizableHandle, ResizablePanel, ResizablePanelGroup, RoughSvg, SKETCH_COLORS, ScrollArea, ScrollAreaCorner, ScrollAreaViewport, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectSeparator, SelectTrigger, SelectValue, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader, SidebarInset, SidebarItem, SidebarLayout, SidebarProvider, SidebarTrigger, Skeleton, SketchBox, SketchSeedProvider, Slider, Spinner, Stepper, Switch, TABLE_STAGGER_MS, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, Tabs, Text, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastRoot, ToastTitle, ToastViewport, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipProvider, deriveSeed, toRoughOptions, useAnimate, useCarousel, useDoodleUI, useDrawIn, useResolvedSeed, useSidebar, useSketchSeed };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AspectRatio, Avatar, Badge, Blockquote, Breadcrumb, BreadcrumbItem, Button, Card, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuTrigger, DARK_SKETCH_COLORS, DEFAULT_BOWING, DEFAULT_DARK_CARD_BG, DEFAULT_DARK_INK, DEFAULT_DARK_PAPER, DEFAULT_INK, DEFAULT_PAPER, DEFAULT_ROUGHNESS, DEFAULT_STROKE_WIDTH, DRAW_IN_ALERT_MS, DRAW_IN_DURATION_MS, DRAW_IN_MARK_MS, DRAW_IN_TOOLTIP_MS, Dialog2 as Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DoodleUIProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHandle, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuTrigger, Empty, EmptyAction, EmptyDescription, EmptyMedia, EmptyTitle, Field, FieldControl, FieldDescription, FieldError, FieldLabel, Heading, Highlight, HoverCard, HoverCardArrow, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, Label2 as Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, ModalClose, ModalDescription, ModalRoot, ModalTitle, ModalTrigger, NativeSelect, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuItemLink, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, Paragraph, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger, Progress, Radio, RadioGroup, ResizableHandle, ResizablePanel, ResizablePanelGroup, RoughSvg, SKETCH_COLORS, ScrollArea, ScrollAreaCorner, ScrollAreaViewport, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectSeparator, SelectTrigger, SelectValue, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader, SidebarInset, SidebarItem, SidebarLayout, SidebarProvider, SidebarTrigger, Skeleton, SketchBox, SketchSeedProvider, Slider, Spinner, Stepper, Switch, TABLE_STAGGER_MS, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, Tabs, Text, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastRoot, ToastTitle, ToastViewport, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipProvider, deriveSeed, toRoughOptions, useAnimate, useCarousel, useDoodleUI, useDrawIn, useResolvedSeed, useSidebar, useSketchSeed, useSketchTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map