Theming & Dark Mode

Both @filekit-studio/sketch and @filekit-studio/diagram feature automatic dual-theme visual balance with real-time contrast resolution.

1. Live Light vs. Dark Mode ComparisonCopy Anchor Link

Notice how element strokes, text, and fill patterns automatically adapt between themes:

Light ThemeCopy Anchor Link

2. Setting Canvas Theme in CodeCopy Anchor Link

Pass theme="dark" or theme="light" to <SketchEditor />, <SketchViewer />, or <Diagram />:

"use client";

import React from "react";
import { Diagram, type DiagramData } from "@filekit-studio/diagram";

export function ThemedCanvas({ data, isDark }: { data: DiagramData; isDark: boolean }) {
  return (
    <div className="w-full h-[400px] rounded-xl overflow-hidden border">
      <Diagram
        data={data}
        mode="viewer"
        theme={isDark ? "dark" : "light"}
        canvasBackground={isDark ? "#12141a" : "#f0f4f8"}
        gridStyle="dots"
      />
    </div>
  );
}

3. Dedicated Scoped CSS BundlesCopy Anchor Link

@filekit-studio/sketch exports three standalone, fully scoped theme stylesheets:

1. Modern Minimal (Default):

   import "@filekit-studio/sketch/styles.css";

2. Classic White Theme:

   import "@filekit-studio/sketch/classic.css";
   // Pair with:
   <SketchEditor panelVariant="classic" />

3. Neumorphic Soft 3D Theme:

   import "@filekit-studio/sketch/neumorphic.css";
   // Pair with:
   <SketchEditor panelVariant="neumorphic" />

[!NOTE] All CSS classes in these bundles are scoped strictly inside .fk-sketch-root, guaranteeing zero CSS variable or style leaks into your host Tailwind or global CSS.

4. Recommended Background PalettesCopy Anchor Link