@tldraw/editor 4.6.0-next.20de11b7e238 → 4.6.0-next.241e87d4700a

package/dist-esm/lib/editor/managers/ThemeManager/defaultThemes.mjs

@@ -0,0 +1,568 @@
+import {
+  DefaultFontFamilies
+} from "@tldraw/tlschema";
+const DEFAULT_THEME = {
+  id: "default",
+  fontSize: 16,
+  lineHeight: 1.35,
+  strokeWidth: 2,
+  fonts: {
+    draw: {
+      fontFamily: DefaultFontFamilies.draw,
+      faces: [
+        { family: "tldraw_draw", src: { url: "tldraw_draw", format: "woff2" }, weight: "normal" },
+        {
+          family: "tldraw_draw",
+          src: { url: "tldraw_draw_bold", format: "woff2" },
+          weight: "bold"
+        },
+        {
+          family: "tldraw_draw",
+          src: { url: "tldraw_draw_italic", format: "woff2" },
+          weight: "normal",
+          style: "italic"
+        },
+        {
+          family: "tldraw_draw",
+          src: { url: "tldraw_draw_italic_bold", format: "woff2" },
+          weight: "bold",
+          style: "italic"
+        }
+      ]
+    },
+    sans: {
+      fontFamily: DefaultFontFamilies.sans,
+      faces: [
+        {
+          family: "tldraw_sans",
+          src: { url: "tldraw_sans", format: "woff2" },
+          weight: "normal",
+          style: "normal"
+        },
+        {
+          family: "tldraw_sans",
+          src: { url: "tldraw_sans_bold", format: "woff2" },
+          weight: "bold",
+          style: "normal"
+        },
+        {
+          family: "tldraw_sans",
+          src: { url: "tldraw_sans_italic", format: "woff2" },
+          weight: "normal",
+          style: "italic"
+        },
+        {
+          family: "tldraw_sans",
+          src: { url: "tldraw_sans_italic_bold", format: "woff2" },
+          weight: "bold",
+          style: "italic"
+        }
+      ]
+    },
+    serif: {
+      fontFamily: DefaultFontFamilies.serif,
+      faces: [
+        {
+          family: "tldraw_serif",
+          src: { url: "tldraw_serif", format: "woff2" },
+          weight: "normal",
+          style: "normal"
+        },
+        {
+          family: "tldraw_serif",
+          src: { url: "tldraw_serif_bold", format: "woff2" },
+          weight: "bold",
+          style: "normal"
+        },
+        {
+          family: "tldraw_serif",
+          src: { url: "tldraw_serif_italic", format: "woff2" },
+          weight: "normal",
+          style: "italic"
+        },
+        {
+          family: "tldraw_serif",
+          src: { url: "tldraw_serif_italic_bold", format: "woff2" },
+          weight: "bold",
+          style: "italic"
+        }
+      ]
+    },
+    mono: {
+      fontFamily: DefaultFontFamilies.mono,
+      faces: [
+        {
+          family: "tldraw_mono",
+          src: { url: "tldraw_mono", format: "woff2" },
+          weight: "normal",
+          style: "normal"
+        },
+        {
+          family: "tldraw_mono",
+          src: { url: "tldraw_mono_bold", format: "woff2" },
+          weight: "bold",
+          style: "normal"
+        },
+        {
+          family: "tldraw_mono",
+          src: { url: "tldraw_mono_italic", format: "woff2" },
+          weight: "normal",
+          style: "italic"
+        },
+        {
+          family: "tldraw_mono",
+          src: { url: "tldraw_mono_italic_bold", format: "woff2" },
+          weight: "bold",
+          style: "italic"
+        }
+      ]
+    }
+  },
+  colors: {
+    light: {
+      text: "#000000",
+      background: "#f9fafb",
+      negativeSpace: "#f9fafb",
+      solid: "#fcfffe",
+      cursor: "black",
+      noteBorder: "rgb(144, 144, 144)",
+      black: {
+        solid: "#1d1d1d",
+        fill: "#1d1d1d",
+        linedFill: "#363636",
+        frameHeadingStroke: "#717171",
+        frameHeadingFill: "#ffffff",
+        frameStroke: "#717171",
+        frameFill: "#ffffff",
+        frameText: "#000000",
+        noteFill: "#FCE19C",
+        noteText: "#000000",
+        semi: "#e8e8e8",
+        pattern: "#494949",
+        highlightSrgb: "#fddd00",
+        highlightP3: "color(display-p3 0.972 0.8205 0.05)"
+      },
+      blue: {
+        solid: "#4465e9",
+        fill: "#4465e9",
+        linedFill: "#6580ec",
+        frameHeadingStroke: "#6681ec",
+        frameHeadingFill: "#f9fafe",
+        frameStroke: "#6681ec",
+        frameFill: "#f9fafe",
+        frameText: "#000000",
+        noteFill: "#8AA3FF",
+        noteText: "#000000",
+        semi: "#dce1f8",
+        pattern: "#6681ee",
+        highlightSrgb: "#10acff",
+        highlightP3: "color(display-p3 0.308 0.6632 0.9996)"
+      },
+      green: {
+        solid: "#099268",
+        fill: "#099268",
+        linedFill: "#0bad7c",
+        frameHeadingStroke: "#37a684",
+        frameHeadingFill: "#f8fcfa",
+        frameStroke: "#37a684",
+        frameFill: "#f8fcfa",
+        frameText: "#000000",
+        noteFill: "#6FC896",
+        noteText: "#000000",
+        semi: "#d3e9e3",
+        pattern: "#39a785",
+        highlightSrgb: "#00ffc8",
+        highlightP3: "color(display-p3 0.2536 0.984 0.7981)"
+      },
+      grey: {
+        solid: "#9fa8b2",
+        fill: "#9fa8b2",
+        linedFill: "#bbc1c9",
+        frameHeadingStroke: "#aaaaab",
+        frameHeadingFill: "#fbfcfc",
+        frameStroke: "#aaaaab",
+        frameFill: "#fcfcfd",
+        frameText: "#000000",
+        noteFill: "#C0CAD3",
+        noteText: "#000000",
+        semi: "#eceef0",
+        pattern: "#bcc3c9",
+        highlightSrgb: "#cbe7f1",
+        highlightP3: "color(display-p3 0.8163 0.9023 0.9416)"
+      },
+      "light-blue": {
+        solid: "#4ba1f1",
+        fill: "#4ba1f1",
+        linedFill: "#7abaf5",
+        frameHeadingStroke: "#6cb2f3",
+        frameHeadingFill: "#f8fbfe",
+        frameStroke: "#6cb2f3",
+        frameFill: "#fafcff",
+        frameText: "#000000",
+        noteFill: "#9BC4FD",
+        noteText: "#000000",
+        semi: "#ddedfa",
+        pattern: "#6fbbf8",
+        highlightSrgb: "#00f4ff",
+        highlightP3: "color(display-p3 0.1512 0.9414 0.9996)"
+      },
+      "light-green": {
+        solid: "#4cb05e",
+        fill: "#4cb05e",
+        linedFill: "#7ec88c",
+        frameHeadingStroke: "#6dbe7c",
+        frameHeadingFill: "#f8fcf9",
+        frameStroke: "#6dbe7c",
+        frameFill: "#fafdfa",
+        frameText: "#000000",
+        noteFill: "#98D08A",
+        noteText: "#000000",
+        semi: "#dbf0e0",
+        pattern: "#65cb78",
+        highlightSrgb: "#65f641",
+        highlightP3: "color(display-p3 0.563 0.9495 0.3857)"
+      },
+      "light-red": {
+        solid: "#f87777",
+        fill: "#f87777",
+        linedFill: "#f99a9a",
+        frameHeadingStroke: "#f89090",
+        frameHeadingFill: "#fffafa",
+        frameStroke: "#f89090",
+        frameFill: "#fffbfb",
+        frameText: "#000000",
+        noteFill: "#F7A5A1",
+        noteText: "#000000",
+        semi: "#f4dadb",
+        pattern: "#fe9e9e",
+        highlightSrgb: "#ff7fa3",
+        highlightP3: "color(display-p3 0.9988 0.5301 0.6397)"
+      },
+      "light-violet": {
+        solid: "#e085f4",
+        fill: "#e085f4",
+        linedFill: "#e9abf7",
+        frameHeadingStroke: "#e59bf5",
+        frameHeadingFill: "#fefaff",
+        frameStroke: "#e59bf5",
+        frameFill: "#fefbff",
+        frameText: "#000000",
+        noteFill: "#DFB0F9",
+        noteText: "#000000",
+        semi: "#f5eafa",
+        pattern: "#e9acf8",
+        highlightSrgb: "#ff88ff",
+        highlightP3: "color(display-p3 0.9676 0.5652 0.9999)"
+      },
+      orange: {
+        solid: "#e16919",
+        fill: "#e16919",
+        linedFill: "#ea8643",
+        frameHeadingStroke: "#e68544",
+        frameHeadingFill: "#fef9f6",
+        frameStroke: "#e68544",
+        frameFill: "#fef9f6",
+        frameText: "#000000",
+        noteFill: "#FAA475",
+        noteText: "#000000",
+        semi: "#f8e2d4",
+        pattern: "#f78438",
+        highlightSrgb: "#ffa500",
+        highlightP3: "color(display-p3 0.9988 0.6905 0.266)"
+      },
+      red: {
+        solid: "#e03131",
+        fill: "#e03131",
+        linedFill: "#e75f5f",
+        frameHeadingStroke: "#e55757",
+        frameHeadingFill: "#fef7f7",
+        frameStroke: "#e55757",
+        frameFill: "#fef9f9",
+        frameText: "#000000",
+        noteFill: "#FC8282",
+        noteText: "#000000",
+        semi: "#f4dadb",
+        pattern: "#e55959",
+        highlightSrgb: "#ff636e",
+        highlightP3: "color(display-p3 0.9992 0.4376 0.45)"
+      },
+      violet: {
+        solid: "#ae3ec9",
+        fill: "#ae3ec9",
+        linedFill: "#be68d4",
+        frameHeadingStroke: "#bc62d3",
+        frameHeadingFill: "#fcf7fd",
+        frameStroke: "#bc62d3",
+        frameFill: "#fdf9fd",
+        frameText: "#000000",
+        noteFill: "#DB91FD",
+        noteText: "#000000",
+        semi: "#ecdcf2",
+        pattern: "#bd63d3",
+        highlightSrgb: "#c77cff",
+        highlightP3: "color(display-p3 0.7469 0.5089 0.9995)"
+      },
+      yellow: {
+        solid: "#f1ac4b",
+        fill: "#f1ac4b",
+        linedFill: "#f5c27a",
+        frameHeadingStroke: "#f3bb6c",
+        frameHeadingFill: "#fefcf8",
+        frameStroke: "#f3bb6c",
+        frameFill: "#fffdfa",
+        frameText: "#000000",
+        noteFill: "#FED49A",
+        noteText: "#000000",
+        semi: "#f9f0e6",
+        pattern: "#fecb92",
+        highlightSrgb: "#fddd00",
+        highlightP3: "color(display-p3 0.972 0.8705 0.05)"
+      },
+      white: {
+        solid: "#FFFFFF",
+        fill: "#FFFFFF",
+        linedFill: "#ffffff",
+        semi: "#f5f5f5",
+        pattern: "#f9f9f9",
+        frameHeadingStroke: "#7d7d7d",
+        frameHeadingFill: "#ffffff",
+        frameStroke: "#7d7d7d",
+        frameFill: "#ffffff",
+        frameText: "#000000",
+        noteFill: "#FFFFFF",
+        noteText: "#000000",
+        highlightSrgb: "#ffffff",
+        highlightP3: "color(display-p3 1 1 1)"
+      }
+    },
+    dark: {
+      text: "hsl(210, 17%, 98%)",
+      background: "hsl(240, 5%, 6.5%)",
+      negativeSpace: "hsl(240, 5%, 6.5%)",
+      solid: "#010403",
+      cursor: "white",
+      noteBorder: "rgb(20, 20, 20)",
+      black: {
+        solid: "#f2f2f2",
+        fill: "#f2f2f2",
+        linedFill: "#ffffff",
+        frameHeadingStroke: "#5c5c5c",
+        frameHeadingFill: "#252525",
+        frameStroke: "#5c5c5c",
+        frameFill: "#0c0c0c",
+        frameText: "#f2f2f2",
+        noteFill: "#2c2c2c",
+        noteText: "#f2f2f2",
+        semi: "#2c3036",
+        pattern: "#989898",
+        highlightSrgb: "#d2b700",
+        highlightP3: "color(display-p3 0.8078 0.6225 0.0312)"
+      },
+      blue: {
+        solid: "#4f72fc",
+        // 3c60f0
+        fill: "#4f72fc",
+        linedFill: "#3c5cdd",
+        frameHeadingStroke: "#384994",
+        frameHeadingFill: "#1C2036",
+        frameStroke: "#384994",
+        frameFill: "#11141f",
+        frameText: "#f2f2f2",
+        noteFill: "#2A3F98",
+        noteText: "#f2f2f2",
+        semi: "#262d40",
+        pattern: "#3a4b9e",
+        highlightSrgb: "#0079d2",
+        highlightP3: "color(display-p3 0.0032 0.4655 0.7991)"
+      },
+      green: {
+        solid: "#099268",
+        fill: "#099268",
+        linedFill: "#087856",
+        frameHeadingStroke: "#10513C",
+        frameHeadingFill: "#14241f",
+        frameStroke: "#10513C",
+        frameFill: "#0E1614",
+        frameText: "#f2f2f2",
+        noteFill: "#014429",
+        noteText: "#f2f2f2",
+        semi: "#253231",
+        pattern: "#366a53",
+        highlightSrgb: "#009774",
+        highlightP3: "color(display-p3 0.0085 0.582 0.4604)"
+      },
+      grey: {
+        solid: "#9398b0",
+        fill: "#9398b0",
+        linedFill: "#8388a5",
+        frameHeadingStroke: "#42474D",
+        frameHeadingFill: "#23262A",
+        frameStroke: "#42474D",
+        frameFill: "#151719",
+        frameText: "#f2f2f2",
+        noteFill: "#56595F",
+        noteText: "#f2f2f2",
+        semi: "#33373c",
+        pattern: "#7c8187",
+        highlightSrgb: "#9cb4cb",
+        highlightP3: "color(display-p3 0.6299 0.7012 0.7856)"
+      },
+      "light-blue": {
+        solid: "#4dabf7",
+        fill: "#4dabf7",
+        linedFill: "#2793ec",
+        frameHeadingStroke: "#075797",
+        frameHeadingFill: "#142839",
+        frameStroke: "#075797",
+        frameFill: "#0B1823",
+        frameText: "#f2f2f2",
+        noteFill: "#1F5495",
+        noteText: "#f2f2f2",
+        semi: "#2a3642",
+        pattern: "#4d7aa9",
+        highlightSrgb: "#00bdc8",
+        highlightP3: "color(display-p3 0.0023 0.7259 0.7735)"
+      },
+      "light-green": {
+        solid: "#40c057",
+        fill: "#40c057",
+        linedFill: "#37a44b",
+        frameHeadingStroke: "#1C5427",
+        frameHeadingFill: "#18251A",
+        frameStroke: "#1C5427",
+        frameFill: "#0F1911",
+        frameText: "#f2f2f2",
+        noteFill: "#21581D",
+        noteText: "#f2f2f2",
+        semi: "#2a3830",
+        pattern: "#4e874e",
+        highlightSrgb: "#00a000",
+        highlightP3: "color(display-p3 0.2711 0.6172 0.0195)"
+      },
+      "light-red": {
+        solid: "#ff8787",
+        fill: "#ff8787",
+        linedFill: "#ff6666",
+        frameHeadingStroke: "#6f3232",
+        frameHeadingFill: "#341818",
+        frameStroke: "#6f3232",
+        frameFill: "#181212",
+        frameText: "#f2f2f2",
+        noteFill: "#7a3333",
+        noteText: "#f2f2f2",
+        semi: "#3c2b2b",
+        pattern: "#a56767",
+        highlightSrgb: "#db005b",
+        highlightP3: "color(display-p3 0.7849 0.0585 0.3589)"
+      },
+      "light-violet": {
+        solid: "#e599f7",
+        fill: "#e599f7",
+        linedFill: "#dc71f4",
+        frameHeadingStroke: "#6c367a",
+        frameHeadingFill: "#2D2230",
+        frameStroke: "#6c367a",
+        frameFill: "#1C151E",
+        frameText: "#f2f2f2",
+        noteFill: "#762F8E",
+        noteText: "#f2f2f2",
+        semi: "#383442",
+        pattern: "#9770a9",
+        highlightSrgb: "#c400c7",
+        highlightP3: "color(display-p3 0.7024 0.0403 0.753)"
+      },
+      orange: {
+        solid: "#f76707",
+        fill: "#f76707",
+        linedFill: "#f54900",
+        frameHeadingStroke: "#773a0e",
+        frameHeadingFill: "#2f1d13",
+        frameStroke: "#773a0e",
+        frameFill: "#1c1512",
+        frameText: "#f2f2f2",
+        noteFill: "#7c3905",
+        noteText: "#f2f2f2",
+        semi: "#3b2e27",
+        pattern: "#9f552d",
+        highlightSrgb: "#d07a00",
+        highlightP3: "color(display-p3 0.7699 0.4937 0.0085)"
+      },
+      red: {
+        solid: "#e03131",
+        fill: "#e03131",
+        linedFill: "#c31d1d",
+        frameHeadingStroke: "#701e1e",
+        frameHeadingFill: "#301616",
+        frameStroke: "#701e1e",
+        frameFill: "#1b1313",
+        frameText: "#f2f2f2",
+        noteFill: "#7e201f",
+        noteText: "#f2f2f2",
+        semi: "#382726",
+        pattern: "#8f3734",
+        highlightSrgb: "#de002c",
+        highlightP3: "color(display-p3 0.7978 0.0509 0.2035)"
+      },
+      violet: {
+        solid: "#ae3ec9",
+        fill: "#ae3ec9",
+        linedFill: "#8f2fa7",
+        frameHeadingStroke: "#6d1583",
+        frameHeadingFill: "#27152e",
+        frameStroke: "#6d1583",
+        frameFill: "#1b0f21",
+        frameText: "#f2f2f2",
+        noteFill: "#5f1c70",
+        noteText: "#f2f2f2",
+        semi: "#342938",
+        pattern: "#763a8b",
+        highlightSrgb: "#9e00ee",
+        highlightP3: "color(display-p3 0.5651 0.0079 0.8986)"
+      },
+      yellow: {
+        solid: "#ffc034",
+        fill: "#ffc034",
+        linedFill: "#ffae00",
+        frameHeadingStroke: "#684e12",
+        frameHeadingFill: "#2a2113",
+        frameStroke: "#684e12",
+        frameFill: "#1e1911",
+        frameText: "#f2f2f2",
+        noteFill: "#8a5e1c",
+        noteText: "#f2f2f2",
+        semi: "#3b352b",
+        pattern: "#fecb92",
+        highlightSrgb: "#d2b700",
+        highlightP3: "color(display-p3 0.8078 0.7225 0.0312)"
+      },
+      white: {
+        solid: "#f3f3f3",
+        fill: "#f3f3f3",
+        linedFill: "#f3f3f3",
+        semi: "#f5f5f5",
+        pattern: "#f9f9f9",
+        frameHeadingStroke: "#ffffff",
+        frameHeadingFill: "#ffffff",
+        frameStroke: "#ffffff",
+        frameFill: "#ffffff",
+        frameText: "#000000",
+        noteFill: "#eaeaea",
+        noteText: "#1d1d1d",
+        highlightSrgb: "#ffffff",
+        highlightP3: "color(display-p3 1 1 1)"
+      }
+    }
+  }
+};
+function getColorValue(colors, color, variant) {
+  const colorEntry = colors[color];
+  if (!colorEntry || typeof colorEntry === "string") {
+    return color;
+  }
+  return colorEntry[variant];
+}
+export {
+  DEFAULT_THEME,
+  getColorValue
+};
+//# sourceMappingURL=defaultThemes.mjs.map

package/dist-esm/lib/editor/managers/ThemeManager/defaultThemes.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/editor/managers/ThemeManager/defaultThemes.ts"],
+  "sourcesContent": ["import {\n\tDefaultFontFamilies,\n\tTLDefaultColor,\n\tTLDefaultColorStyle,\n\tTLTheme,\n\tTLThemeColors,\n} from '@tldraw/tlschema'\n\n/**\n * The default theme definition containing color palettes for both light and dark modes.\n *\n * @public\n */\nexport const DEFAULT_THEME: TLTheme = {\n\tid: 'default',\n\tfontSize: 16,\n\tlineHeight: 1.35,\n\tstrokeWidth: 2,\n\tfonts: {\n\t\tdraw: {\n\t\t\tfontFamily: DefaultFontFamilies.draw,\n\t\t\tfaces: [\n\t\t\t\t{ family: 'tldraw_draw', src: { url: 'tldraw_draw', format: 'woff2' }, weight: 'normal' },\n\t\t\t\t{\n\t\t\t\t\tfamily: 'tldraw_draw',\n\t\t\t\t\tsrc: { url: 'tldraw_draw_bold', format: 'woff2' },\n\t\t\t\t\tweight: 'bold',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tfamily: 'tldraw_draw',\n\t\t\t\t\tsrc: { url: 'tldraw_draw_italic', format: 'woff2' },\n\t\t\t\t\tweight: 'normal',\n\t\t\t\t\tstyle: 'italic',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tfamily: 'tldraw_draw',\n\t\t\t\t\tsrc: { url: 'tldraw_draw_italic_bold', format: 'woff2' },\n\t\t\t\t\tweight: 'bold',\n\t\t\t\t\tstyle: 'italic',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\tsans: {\n\t\t\tfontFamily: DefaultFontFamilies.sans,\n\t\t\tfaces: [\n\t\t\t\t{\n\t\t\t\t\tfamily: 'tldraw_sans',\n\t\t\t\t\tsrc: { url: 'tldraw_sans', format: 'woff2' },\n\t\t\t\t\tweight: 'normal',\n\t\t\t\t\tstyle: 'normal',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tfamily: 'tldraw_sans',\n\t\t\t\t\tsrc: { url: 'tldraw_sans_bold', format: 'woff2' },\n\t\t\t\t\tweight: 'bold',\n\t\t\t\t\tstyle: 'normal',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tfamily: 'tldraw_sans',\n\t\t\t\t\tsrc: { url: 'tldraw_sans_italic', format: 'woff2' },\n\t\t\t\t\tweight: 'normal',\n\t\t\t\t\tstyle: 'italic',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tfamily: 'tldraw_sans',\n\t\t\t\t\tsrc: { url: 'tldraw_sans_italic_bold', format: 'woff2' },\n\t\t\t\t\tweight: 'bold',\n\t\t\t\t\tstyle: 'italic',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\tserif: {\n\t\t\tfontFamily: DefaultFontFamilies.serif,\n\t\t\tfaces: [\n\t\t\t\t{\n\t\t\t\t\tfamily: 'tldraw_serif',\n\t\t\t\t\tsrc: { url: 'tldraw_serif', format: 'woff2' },\n\t\t\t\t\tweight: 'normal',\n\t\t\t\t\tstyle: 'normal',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tfamily: 'tldraw_serif',\n\t\t\t\t\tsrc: { url: 'tldraw_serif_bold', format: 'woff2' },\n\t\t\t\t\tweight: 'bold',\n\t\t\t\t\tstyle: 'normal',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tfamily: 'tldraw_serif',\n\t\t\t\t\tsrc: { url: 'tldraw_serif_italic', format: 'woff2' },\n\t\t\t\t\tweight: 'normal',\n\t\t\t\t\tstyle: 'italic',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tfamily: 'tldraw_serif',\n\t\t\t\t\tsrc: { url: 'tldraw_serif_italic_bold', format: 'woff2' },\n\t\t\t\t\tweight: 'bold',\n\t\t\t\t\tstyle: 'italic',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\tmono: {\n\t\t\tfontFamily: DefaultFontFamilies.mono,\n\t\t\tfaces: [\n\t\t\t\t{\n\t\t\t\t\tfamily: 'tldraw_mono',\n\t\t\t\t\tsrc: { url: 'tldraw_mono', format: 'woff2' },\n\t\t\t\t\tweight: 'normal',\n\t\t\t\t\tstyle: 'normal',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tfamily: 'tldraw_mono',\n\t\t\t\t\tsrc: { url: 'tldraw_mono_bold', format: 'woff2' },\n\t\t\t\t\tweight: 'bold',\n\t\t\t\t\tstyle: 'normal',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tfamily: 'tldraw_mono',\n\t\t\t\t\tsrc: { url: 'tldraw_mono_italic', format: 'woff2' },\n\t\t\t\t\tweight: 'normal',\n\t\t\t\t\tstyle: 'italic',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tfamily: 'tldraw_mono',\n\t\t\t\t\tsrc: { url: 'tldraw_mono_italic_bold', format: 'woff2' },\n\t\t\t\t\tweight: 'bold',\n\t\t\t\t\tstyle: 'italic',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n\tcolors: {\n\t\tlight: {\n\t\t\ttext: '#000000',\n\t\t\tbackground: '#f9fafb',\n\t\t\tnegativeSpace: '#f9fafb',\n\t\t\tsolid: '#fcfffe',\n\t\t\tcursor: 'black',\n\t\t\tnoteBorder: 'rgb(144, 144, 144)',\n\t\t\tblack: {\n\t\t\t\tsolid: '#1d1d1d',\n\t\t\t\tfill: '#1d1d1d',\n\t\t\t\tlinedFill: '#363636',\n\t\t\t\tframeHeadingStroke: '#717171',\n\t\t\t\tframeHeadingFill: '#ffffff',\n\t\t\t\tframeStroke: '#717171',\n\t\t\t\tframeFill: '#ffffff',\n\t\t\t\tframeText: '#000000',\n\t\t\t\tnoteFill: '#FCE19C',\n\t\t\t\tnoteText: '#000000',\n\t\t\t\tsemi: '#e8e8e8',\n\t\t\t\tpattern: '#494949',\n\t\t\t\thighlightSrgb: '#fddd00',\n\t\t\t\thighlightP3: 'color(display-p3 0.972 0.8205 0.05)',\n\t\t\t},\n\t\t\tblue: {\n\t\t\t\tsolid: '#4465e9',\n\t\t\t\tfill: '#4465e9',\n\t\t\t\tlinedFill: '#6580ec',\n\t\t\t\tframeHeadingStroke: '#6681ec',\n\t\t\t\tframeHeadingFill: '#f9fafe',\n\t\t\t\tframeStroke: '#6681ec',\n\t\t\t\tframeFill: '#f9fafe',\n\t\t\t\tframeText: '#000000',\n\t\t\t\tnoteFill: '#8AA3FF',\n\t\t\t\tnoteText: '#000000',\n\t\t\t\tsemi: '#dce1f8',\n\t\t\t\tpattern: '#6681ee',\n\t\t\t\thighlightSrgb: '#10acff',\n\t\t\t\thighlightP3: 'color(display-p3 0.308 0.6632 0.9996)',\n\t\t\t},\n\t\t\tgreen: {\n\t\t\t\tsolid: '#099268',\n\t\t\t\tfill: '#099268',\n\t\t\t\tlinedFill: '#0bad7c',\n\t\t\t\tframeHeadingStroke: '#37a684',\n\t\t\t\tframeHeadingFill: '#f8fcfa',\n\t\t\t\tframeStroke: '#37a684',\n\t\t\t\tframeFill: '#f8fcfa',\n\t\t\t\tframeText: '#000000',\n\t\t\t\tnoteFill: '#6FC896',\n\t\t\t\tnoteText: '#000000',\n\t\t\t\tsemi: '#d3e9e3',\n\t\t\t\tpattern: '#39a785',\n\t\t\t\thighlightSrgb: '#00ffc8',\n\t\t\t\thighlightP3: 'color(display-p3 0.2536 0.984 0.7981)',\n\t\t\t},\n\t\t\tgrey: {\n\t\t\t\tsolid: '#9fa8b2',\n\t\t\t\tfill: '#9fa8b2',\n\t\t\t\tlinedFill: '#bbc1c9',\n\t\t\t\tframeHeadingStroke: '#aaaaab',\n\t\t\t\tframeHeadingFill: '#fbfcfc',\n\t\t\t\tframeStroke: '#aaaaab',\n\t\t\t\tframeFill: '#fcfcfd',\n\t\t\t\tframeText: '#000000',\n\t\t\t\tnoteFill: '#C0CAD3',\n\t\t\t\tnoteText: '#000000',\n\t\t\t\tsemi: '#eceef0',\n\t\t\t\tpattern: '#bcc3c9',\n\t\t\t\thighlightSrgb: '#cbe7f1',\n\t\t\t\thighlightP3: 'color(display-p3 0.8163 0.9023 0.9416)',\n\t\t\t},\n\t\t\t'light-blue': {\n\t\t\t\tsolid: '#4ba1f1',\n\t\t\t\tfill: '#4ba1f1',\n\t\t\t\tlinedFill: '#7abaf5',\n\t\t\t\tframeHeadingStroke: '#6cb2f3',\n\t\t\t\tframeHeadingFill: '#f8fbfe',\n\t\t\t\tframeStroke: '#6cb2f3',\n\t\t\t\tframeFill: '#fafcff',\n\t\t\t\tframeText: '#000000',\n\t\t\t\tnoteFill: '#9BC4FD',\n\t\t\t\tnoteText: '#000000',\n\t\t\t\tsemi: '#ddedfa',\n\t\t\t\tpattern: '#6fbbf8',\n\t\t\t\thighlightSrgb: '#00f4ff',\n\t\t\t\thighlightP3: 'color(display-p3 0.1512 0.9414 0.9996)',\n\t\t\t},\n\t\t\t'light-green': {\n\t\t\t\tsolid: '#4cb05e',\n\t\t\t\tfill: '#4cb05e',\n\t\t\t\tlinedFill: '#7ec88c',\n\t\t\t\tframeHeadingStroke: '#6dbe7c',\n\t\t\t\tframeHeadingFill: '#f8fcf9',\n\t\t\t\tframeStroke: '#6dbe7c',\n\t\t\t\tframeFill: '#fafdfa',\n\t\t\t\tframeText: '#000000',\n\t\t\t\tnoteFill: '#98D08A',\n\t\t\t\tnoteText: '#000000',\n\t\t\t\tsemi: '#dbf0e0',\n\t\t\t\tpattern: '#65cb78',\n\t\t\t\thighlightSrgb: '#65f641',\n\t\t\t\thighlightP3: 'color(display-p3 0.563 0.9495 0.3857)',\n\t\t\t},\n\t\t\t'light-red': {\n\t\t\t\tsolid: '#f87777',\n\t\t\t\tfill: '#f87777',\n\t\t\t\tlinedFill: '#f99a9a',\n\t\t\t\tframeHeadingStroke: '#f89090',\n\t\t\t\tframeHeadingFill: '#fffafa',\n\t\t\t\tframeStroke: '#f89090',\n\t\t\t\tframeFill: '#fffbfb',\n\t\t\t\tframeText: '#000000',\n\t\t\t\tnoteFill: '#F7A5A1',\n\t\t\t\tnoteText: '#000000',\n\t\t\t\tsemi: '#f4dadb',\n\t\t\t\tpattern: '#fe9e9e',\n\t\t\t\thighlightSrgb: '#ff7fa3',\n\t\t\t\thighlightP3: 'color(display-p3 0.9988 0.5301 0.6397)',\n\t\t\t},\n\t\t\t'light-violet': {\n\t\t\t\tsolid: '#e085f4',\n\t\t\t\tfill: '#e085f4',\n\t\t\t\tlinedFill: '#e9abf7',\n\t\t\t\tframeHeadingStroke: '#e59bf5',\n\t\t\t\tframeHeadingFill: '#fefaff',\n\t\t\t\tframeStroke: '#e59bf5',\n\t\t\t\tframeFill: '#fefbff',\n\t\t\t\tframeText: '#000000',\n\t\t\t\tnoteFill: '#DFB0F9',\n\t\t\t\tnoteText: '#000000',\n\t\t\t\tsemi: '#f5eafa',\n\t\t\t\tpattern: '#e9acf8',\n\t\t\t\thighlightSrgb: '#ff88ff',\n\t\t\t\thighlightP3: 'color(display-p3 0.9676 0.5652 0.9999)',\n\t\t\t},\n\t\t\torange: {\n\t\t\t\tsolid: '#e16919',\n\t\t\t\tfill: '#e16919',\n\t\t\t\tlinedFill: '#ea8643',\n\t\t\t\tframeHeadingStroke: '#e68544',\n\t\t\t\tframeHeadingFill: '#fef9f6',\n\t\t\t\tframeStroke: '#e68544',\n\t\t\t\tframeFill: '#fef9f6',\n\t\t\t\tframeText: '#000000',\n\t\t\t\tnoteFill: '#FAA475',\n\t\t\t\tnoteText: '#000000',\n\t\t\t\tsemi: '#f8e2d4',\n\t\t\t\tpattern: '#f78438',\n\t\t\t\thighlightSrgb: '#ffa500',\n\t\t\t\thighlightP3: 'color(display-p3 0.9988 0.6905 0.266)',\n\t\t\t},\n\t\t\tred: {\n\t\t\t\tsolid: '#e03131',\n\t\t\t\tfill: '#e03131',\n\t\t\t\tlinedFill: '#e75f5f',\n\t\t\t\tframeHeadingStroke: '#e55757',\n\t\t\t\tframeHeadingFill: '#fef7f7',\n\t\t\t\tframeStroke: '#e55757',\n\t\t\t\tframeFill: '#fef9f9',\n\t\t\t\tframeText: '#000000',\n\t\t\t\tnoteFill: '#FC8282',\n\t\t\t\tnoteText: '#000000',\n\t\t\t\tsemi: '#f4dadb',\n\t\t\t\tpattern: '#e55959',\n\t\t\t\thighlightSrgb: '#ff636e',\n\t\t\t\thighlightP3: 'color(display-p3 0.9992 0.4376 0.45)',\n\t\t\t},\n\t\t\tviolet: {\n\t\t\t\tsolid: '#ae3ec9',\n\t\t\t\tfill: '#ae3ec9',\n\t\t\t\tlinedFill: '#be68d4',\n\t\t\t\tframeHeadingStroke: '#bc62d3',\n\t\t\t\tframeHeadingFill: '#fcf7fd',\n\t\t\t\tframeStroke: '#bc62d3',\n\t\t\t\tframeFill: '#fdf9fd',\n\t\t\t\tframeText: '#000000',\n\t\t\t\tnoteFill: '#DB91FD',\n\t\t\t\tnoteText: '#000000',\n\t\t\t\tsemi: '#ecdcf2',\n\t\t\t\tpattern: '#bd63d3',\n\t\t\t\thighlightSrgb: '#c77cff',\n\t\t\t\thighlightP3: 'color(display-p3 0.7469 0.5089 0.9995)',\n\t\t\t},\n\t\t\tyellow: {\n\t\t\t\tsolid: '#f1ac4b',\n\t\t\t\tfill: '#f1ac4b',\n\t\t\t\tlinedFill: '#f5c27a',\n\t\t\t\tframeHeadingStroke: '#f3bb6c',\n\t\t\t\tframeHeadingFill: '#fefcf8',\n\t\t\t\tframeStroke: '#f3bb6c',\n\t\t\t\tframeFill: '#fffdfa',\n\t\t\t\tframeText: '#000000',\n\t\t\t\tnoteFill: '#FED49A',\n\t\t\t\tnoteText: '#000000',\n\t\t\t\tsemi: '#f9f0e6',\n\t\t\t\tpattern: '#fecb92',\n\t\t\t\thighlightSrgb: '#fddd00',\n\t\t\t\thighlightP3: 'color(display-p3 0.972 0.8705 0.05)',\n\t\t\t},\n\t\t\twhite: {\n\t\t\t\tsolid: '#FFFFFF',\n\t\t\t\tfill: '#FFFFFF',\n\t\t\t\tlinedFill: '#ffffff',\n\t\t\t\tsemi: '#f5f5f5',\n\t\t\t\tpattern: '#f9f9f9',\n\t\t\t\tframeHeadingStroke: '#7d7d7d',\n\t\t\t\tframeHeadingFill: '#ffffff',\n\t\t\t\tframeStroke: '#7d7d7d',\n\t\t\t\tframeFill: '#ffffff',\n\t\t\t\tframeText: '#000000',\n\t\t\t\tnoteFill: '#FFFFFF',\n\t\t\t\tnoteText: '#000000',\n\t\t\t\thighlightSrgb: '#ffffff',\n\t\t\t\thighlightP3: 'color(display-p3 1 1 1)',\n\t\t\t},\n\t\t},\n\t\tdark: {\n\t\t\ttext: 'hsl(210, 17%, 98%)',\n\t\t\tbackground: 'hsl(240, 5%, 6.5%)',\n\t\t\tnegativeSpace: 'hsl(240, 5%, 6.5%)',\n\t\t\tsolid: '#010403',\n\t\t\tcursor: 'white',\n\t\t\tnoteBorder: 'rgb(20, 20, 20)',\n\n\t\t\tblack: {\n\t\t\t\tsolid: '#f2f2f2',\n\t\t\t\tfill: '#f2f2f2',\n\t\t\t\tlinedFill: '#ffffff',\n\t\t\t\tframeHeadingStroke: '#5c5c5c',\n\t\t\t\tframeHeadingFill: '#252525',\n\t\t\t\tframeStroke: '#5c5c5c',\n\t\t\t\tframeFill: '#0c0c0c',\n\t\t\t\tframeText: '#f2f2f2',\n\t\t\t\tnoteFill: '#2c2c2c',\n\t\t\t\tnoteText: '#f2f2f2',\n\t\t\t\tsemi: '#2c3036',\n\t\t\t\tpattern: '#989898',\n\t\t\t\thighlightSrgb: '#d2b700',\n\t\t\t\thighlightP3: 'color(display-p3 0.8078 0.6225 0.0312)',\n\t\t\t},\n\t\t\tblue: {\n\t\t\t\tsolid: '#4f72fc', // 3c60f0\n\t\t\t\tfill: '#4f72fc',\n\t\t\t\tlinedFill: '#3c5cdd',\n\t\t\t\tframeHeadingStroke: '#384994',\n\t\t\t\tframeHeadingFill: '#1C2036',\n\t\t\t\tframeStroke: '#384994',\n\t\t\t\tframeFill: '#11141f',\n\t\t\t\tframeText: '#f2f2f2',\n\t\t\t\tnoteFill: '#2A3F98',\n\t\t\t\tnoteText: '#f2f2f2',\n\t\t\t\tsemi: '#262d40',\n\t\t\t\tpattern: '#3a4b9e',\n\t\t\t\thighlightSrgb: '#0079d2',\n\t\t\t\thighlightP3: 'color(display-p3 0.0032 0.4655 0.7991)',\n\t\t\t},\n\t\t\tgreen: {\n\t\t\t\tsolid: '#099268',\n\t\t\t\tfill: '#099268',\n\t\t\t\tlinedFill: '#087856',\n\t\t\t\tframeHeadingStroke: '#10513C',\n\t\t\t\tframeHeadingFill: '#14241f',\n\t\t\t\tframeStroke: '#10513C',\n\t\t\t\tframeFill: '#0E1614',\n\t\t\t\tframeText: '#f2f2f2',\n\t\t\t\tnoteFill: '#014429',\n\t\t\t\tnoteText: '#f2f2f2',\n\t\t\t\tsemi: '#253231',\n\t\t\t\tpattern: '#366a53',\n\t\t\t\thighlightSrgb: '#009774',\n\t\t\t\thighlightP3: 'color(display-p3 0.0085 0.582 0.4604)',\n\t\t\t},\n\t\t\tgrey: {\n\t\t\t\tsolid: '#9398b0',\n\t\t\t\tfill: '#9398b0',\n\t\t\t\tlinedFill: '#8388a5',\n\t\t\t\tframeHeadingStroke: '#42474D',\n\t\t\t\tframeHeadingFill: '#23262A',\n\t\t\t\tframeStroke: '#42474D',\n\t\t\t\tframeFill: '#151719',\n\t\t\t\tframeText: '#f2f2f2',\n\t\t\t\tnoteFill: '#56595F',\n\t\t\t\tnoteText: '#f2f2f2',\n\t\t\t\tsemi: '#33373c',\n\t\t\t\tpattern: '#7c8187',\n\t\t\t\thighlightSrgb: '#9cb4cb',\n\t\t\t\thighlightP3: 'color(display-p3 0.6299 0.7012 0.7856)',\n\t\t\t},\n\t\t\t'light-blue': {\n\t\t\t\tsolid: '#4dabf7',\n\t\t\t\tfill: '#4dabf7',\n\t\t\t\tlinedFill: '#2793ec',\n\t\t\t\tframeHeadingStroke: '#075797',\n\t\t\t\tframeHeadingFill: '#142839',\n\t\t\t\tframeStroke: '#075797',\n\t\t\t\tframeFill: '#0B1823',\n\t\t\t\tframeText: '#f2f2f2',\n\t\t\t\tnoteFill: '#1F5495',\n\t\t\t\tnoteText: '#f2f2f2',\n\t\t\t\tsemi: '#2a3642',\n\t\t\t\tpattern: '#4d7aa9',\n\t\t\t\thighlightSrgb: '#00bdc8',\n\t\t\t\thighlightP3: 'color(display-p3 0.0023 0.7259 0.7735)',\n\t\t\t},\n\t\t\t'light-green': {\n\t\t\t\tsolid: '#40c057',\n\t\t\t\tfill: '#40c057',\n\t\t\t\tlinedFill: '#37a44b',\n\t\t\t\tframeHeadingStroke: '#1C5427',\n\t\t\t\tframeHeadingFill: '#18251A',\n\t\t\t\tframeStroke: '#1C5427',\n\t\t\t\tframeFill: '#0F1911',\n\t\t\t\tframeText: '#f2f2f2',\n\t\t\t\tnoteFill: '#21581D',\n\t\t\t\tnoteText: '#f2f2f2',\n\t\t\t\tsemi: '#2a3830',\n\t\t\t\tpattern: '#4e874e',\n\t\t\t\thighlightSrgb: '#00a000',\n\t\t\t\thighlightP3: 'color(display-p3 0.2711 0.6172 0.0195)',\n\t\t\t},\n\t\t\t'light-red': {\n\t\t\t\tsolid: '#ff8787',\n\t\t\t\tfill: '#ff8787',\n\t\t\t\tlinedFill: '#ff6666',\n\t\t\t\tframeHeadingStroke: '#6f3232',\n\t\t\t\tframeHeadingFill: '#341818',\n\t\t\t\tframeStroke: '#6f3232',\n\t\t\t\tframeFill: '#181212',\n\t\t\t\tframeText: '#f2f2f2',\n\t\t\t\tnoteFill: '#7a3333',\n\t\t\t\tnoteText: '#f2f2f2',\n\t\t\t\tsemi: '#3c2b2b',\n\t\t\t\tpattern: '#a56767',\n\t\t\t\thighlightSrgb: '#db005b',\n\t\t\t\thighlightP3: 'color(display-p3 0.7849 0.0585 0.3589)',\n\t\t\t},\n\t\t\t'light-violet': {\n\t\t\t\tsolid: '#e599f7',\n\t\t\t\tfill: '#e599f7',\n\t\t\t\tlinedFill: '#dc71f4',\n\t\t\t\tframeHeadingStroke: '#6c367a',\n\t\t\t\tframeHeadingFill: '#2D2230',\n\t\t\t\tframeStroke: '#6c367a',\n\t\t\t\tframeFill: '#1C151E',\n\t\t\t\tframeText: '#f2f2f2',\n\t\t\t\tnoteFill: '#762F8E',\n\t\t\t\tnoteText: '#f2f2f2',\n\t\t\t\tsemi: '#383442',\n\t\t\t\tpattern: '#9770a9',\n\t\t\t\thighlightSrgb: '#c400c7',\n\t\t\t\thighlightP3: 'color(display-p3 0.7024 0.0403 0.753)',\n\t\t\t},\n\t\t\torange: {\n\t\t\t\tsolid: '#f76707',\n\t\t\t\tfill: '#f76707',\n\t\t\t\tlinedFill: '#f54900',\n\t\t\t\tframeHeadingStroke: '#773a0e',\n\t\t\t\tframeHeadingFill: '#2f1d13',\n\t\t\t\tframeStroke: '#773a0e',\n\t\t\t\tframeFill: '#1c1512',\n\t\t\t\tframeText: '#f2f2f2',\n\t\t\t\tnoteFill: '#7c3905',\n\t\t\t\tnoteText: '#f2f2f2',\n\t\t\t\tsemi: '#3b2e27',\n\t\t\t\tpattern: '#9f552d',\n\t\t\t\thighlightSrgb: '#d07a00',\n\t\t\t\thighlightP3: 'color(display-p3 0.7699 0.4937 0.0085)',\n\t\t\t},\n\t\t\tred: {\n\t\t\t\tsolid: '#e03131',\n\t\t\t\tfill: '#e03131',\n\t\t\t\tlinedFill: '#c31d1d',\n\t\t\t\tframeHeadingStroke: '#701e1e',\n\t\t\t\tframeHeadingFill: '#301616',\n\t\t\t\tframeStroke: '#701e1e',\n\t\t\t\tframeFill: '#1b1313',\n\t\t\t\tframeText: '#f2f2f2',\n\t\t\t\tnoteFill: '#7e201f',\n\t\t\t\tnoteText: '#f2f2f2',\n\t\t\t\tsemi: '#382726',\n\t\t\t\tpattern: '#8f3734',\n\t\t\t\thighlightSrgb: '#de002c',\n\t\t\t\thighlightP3: 'color(display-p3 0.7978 0.0509 0.2035)',\n\t\t\t},\n\t\t\tviolet: {\n\t\t\t\tsolid: '#ae3ec9',\n\t\t\t\tfill: '#ae3ec9',\n\t\t\t\tlinedFill: '#8f2fa7',\n\t\t\t\tframeHeadingStroke: '#6d1583',\n\t\t\t\tframeHeadingFill: '#27152e',\n\t\t\t\tframeStroke: '#6d1583',\n\t\t\t\tframeFill: '#1b0f21',\n\t\t\t\tframeText: '#f2f2f2',\n\t\t\t\tnoteFill: '#5f1c70',\n\t\t\t\tnoteText: '#f2f2f2',\n\t\t\t\tsemi: '#342938',\n\t\t\t\tpattern: '#763a8b',\n\t\t\t\thighlightSrgb: '#9e00ee',\n\t\t\t\thighlightP3: 'color(display-p3 0.5651 0.0079 0.8986)',\n\t\t\t},\n\t\t\tyellow: {\n\t\t\t\tsolid: '#ffc034',\n\t\t\t\tfill: '#ffc034',\n\t\t\t\tlinedFill: '#ffae00',\n\t\t\t\tframeHeadingStroke: '#684e12',\n\t\t\t\tframeHeadingFill: '#2a2113',\n\t\t\t\tframeStroke: '#684e12',\n\t\t\t\tframeFill: '#1e1911',\n\t\t\t\tframeText: '#f2f2f2',\n\t\t\t\tnoteFill: '#8a5e1c',\n\t\t\t\tnoteText: '#f2f2f2',\n\t\t\t\tsemi: '#3b352b',\n\t\t\t\tpattern: '#fecb92',\n\t\t\t\thighlightSrgb: '#d2b700',\n\t\t\t\thighlightP3: 'color(display-p3 0.8078 0.7225 0.0312)',\n\t\t\t},\n\t\t\twhite: {\n\t\t\t\tsolid: '#f3f3f3',\n\t\t\t\tfill: '#f3f3f3',\n\t\t\t\tlinedFill: '#f3f3f3',\n\t\t\t\tsemi: '#f5f5f5',\n\t\t\t\tpattern: '#f9f9f9',\n\t\t\t\tframeHeadingStroke: '#ffffff',\n\t\t\t\tframeHeadingFill: '#ffffff',\n\t\t\t\tframeStroke: '#ffffff',\n\t\t\t\tframeFill: '#ffffff',\n\t\t\t\tframeText: '#000000',\n\t\t\t\tnoteFill: '#eaeaea',\n\t\t\t\tnoteText: '#1d1d1d',\n\t\t\t\thighlightSrgb: '#ffffff',\n\t\t\t\thighlightP3: 'color(display-p3 1 1 1)',\n\t\t\t},\n\t\t},\n\t},\n}\n\n/**\n * Resolves a color style value to its actual CSS color string for a given theme and variant.\n * If the color is not a default theme color, returns the color value as-is.\n *\n * @param colors - The color palette for the current color mode (e.g. `theme.colors[colorMode]`)\n * @param color - The color style value to resolve\n * @param variant - Which variant of the color to return (solid, fill, pattern, etc.)\n * @returns The CSS color string for the specified color and variant\n *\n * @example\n * ```ts\n * import { getColorValue } from 'tldraw'\n *\n * const colors = editor.getCurrentTheme().colors[editor.getColorMode()]\n *\n * // Get the solid variant of red\n * const redSolid = getColorValue(colors, 'red', 'solid') // '#e03131'\n *\n * // Get the fill variant of blue\n * const blueFill = getColorValue(colors, 'blue', 'fill') // '#4465e9'\n *\n * // Custom color passes through unchanged\n * const customColor = getColorValue(colors, '#ff0000', 'solid') // '#ff0000'\n * ```\n *\n * @public\n */\nexport function getColorValue(\n\tcolors: TLThemeColors,\n\tcolor: TLDefaultColorStyle | string,\n\tvariant: keyof TLDefaultColor\n): string {\n\tconst colorEntry = colors[color as TLDefaultColorStyle]\n\tif (!colorEntry || typeof colorEntry === 'string') {\n\t\treturn color\n\t}\n\treturn colorEntry[variant]\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist-esm/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.mjs

@@ -12,9 +12,9 @@ import { atom, computed } from "@tldraw/state";
 import { defaultUserPreferences } from "../../../config/TLUserPreferences.mjs";
 import { getGlobalWindow } from "../../../utils/dom.mjs";
 class UserPreferencesManager {
-  constructor(user, inferDarkMode) {
+  constructor(user, colorScheme) {
     this.user = user;
-    this.inferDarkMode = inferDarkMode;
+    this.colorScheme = colorScheme;
     if (typeof window === "undefined" || !getGlobalWindow().matchMedia) return;
     const darkModeMediaQuery = getGlobalWindow().matchMedia("(prefers-color-scheme: dark)");
     if (darkModeMediaQuery?.matches) {
@@ -60,7 +60,9 @@ class UserPreferencesManager {
     };
   }
   getIsDarkMode() {
-    switch (this.user.userPreferences.get().colorScheme) {
+    const userColorScheme = this.user.userPreferences.get().colorScheme;
+    const scheme = userColorScheme ?? this.colorScheme;
+    switch (scheme) {
       case "dark":
         return true;
       case "light":
@@ -68,7 +70,7 @@ class UserPreferencesManager {
       case "system":
         return this.systemColorScheme.get() === "dark";
       default:
-        return this.inferDarkMode ? this.systemColorScheme.get() === "dark" : false;
+        return false;
     }
   }
   getEdgeScrollSpeed() {