export declare const themeMdxTemplate = "---\ntitle: \"Theme\"\ndescription: \"Customize the documentation UI colors with a theme.json file.\"\ndate: \"2026-02-19\"\nupdated: \"2026-08-04\"\ncategory: \"Configuration\"\ncategoryOrder: 2\norder: 5\n---\n# Theme\n\nDefine your site\u2019s color system with a `theme.json` file. This lets you tailor the look and feel of your documentation without changing content.\n\n## theme.json\n\nPlace a `theme.json` at your project root (the same directory where you execute `npx doccupine`). It supports multiple modes. Define a `default` mode and a `dark` mode.\n\n```json\n{\n  \"default\": {\n    \"primaryLight\": \"#93c5fd\",\n    \"primary\": \"#2563eb\",\n    \"primaryDark\": \"#1e40af\",\n    \"secondaryLight\": \"#c4b5fd\",\n    \"secondary\": \"#8b5cf6\",\n    \"secondaryDark\": \"#5b21b6\",\n    \"tertiaryLight\": \"#fbbf24\",\n    \"tertiary\": \"#f59e0b\",\n    \"tertiaryDark\": \"#d97706\",\n    \"grayLight\": \"#f3f4f6\",\n    \"gray\": \"#9ca3af\",\n    \"grayDark\": \"#374151\",\n    \"success\": \"#10b981\",\n    \"error\": \"#f43f5e\",\n    \"warning\": \"#f59e0b\",\n    \"info\": \"#3b82f6\",\n    \"dark\": \"#000000\",\n    \"light\": \"#ffffff\"\n  },\n  \"dark\": {\n    \"primaryLight\": \"#9bcaff\",\n    \"primary\": \"#1e7ae0\",\n    \"primaryDark\": \"#033d7e\",\n    \"secondaryLight\": \"#ddd6fe\",\n    \"secondary\": \"#a78bfa\",\n    \"secondaryDark\": \"#7c3aed\",\n    \"tertiaryLight\": \"#fed7aa\",\n    \"tertiary\": \"#fb923c\",\n    \"tertiaryDark\": \"#ea580c\",\n    \"grayLight\": \"#1f2937\",\n    \"gray\": \"#6b7280\",\n    \"grayDark\": \"#9ca3af\",\n    \"success\": \"#10b981\",\n    \"error\": \"#f43f5e\",\n    \"warning\": \"#f59e0b\",\n    \"info\": \"#3b82f6\",\n    \"dark\": \"#ffffff\",\n    \"light\": \"#000000\"\n  },\n  \"logo\": {\n    \"dark\": \"https://docs.doccupine.com/logo-dark.svg\",\n    \"light\": \"https://docs.doccupine.com/logo-light.svg\"\n  }\n}\n```\n\n## Modes\n\n- **default**: The base color palette for your site.\n- **dark**: Dark\u2011mode palette.\n\n## Fields\n\n- **primaryLight**: A lighter variant of your brand color, used for subtle accents and backgrounds.\n- **primary**: The main brand color.\n- **primaryDark**: A darker variant of your brand color for emphasis and hover states.\n- **secondaryLight**: A lighter variant of your secondary color, used for subtle accents and backgrounds.\n- **secondary**: The secondary brand color used for highlights and UI accents.\n- **secondaryDark**: A darker variant of your secondary color for emphasis and hover states.\n- **tertiaryLight**: A lighter variant of your tertiary color, used for subtle accents and backgrounds.\n- **tertiary**: The tertiary accent color.\n- **tertiaryDark**: A darker variant of your tertiary color for emphasis and hover states.\n- **grayLight**: Light gray for surfaces and borders.\n- **gray**: Neutral gray for text and UI elements.\n- **grayDark**: Dark gray for headings or high\u2011contrast text.\n- **success**: Positive/confirmation color.\n- **error**: Error/destructive color.\n- **warning**: Warning/attention color.\n- **info**: Informational/highlight color.\n- **dark**: The darkest/base color (often page background in dark mode).\n- **light**: The lightest/base color (often page background in light mode).\n- **logo.light**: Path or URL to the logo used on light backgrounds. Recommended size: 164\u00D730 px.\n- **logo.dark**: Path or URL to the logo used on dark backgrounds. Recommended size: 164\u00D730 px.\n\n## Behavior\n\n- **Placement**: Put `theme.json` in the project root alongside `config.json`.\n- **Partial palettes**: If a key is missing in a mode, consumers may fall back to the `default` value.\n- **Logo size**: Recommended dimensions are 164px width and 30px height.\n- **Browser chrome**: The `theme-color` shown in browser UI (such as the iOS Safari status bar) is derived from each mode's `primary` token, so it carries your brand color in both modes.\n\n<Callout type=\"warning\">\n  Use valid hex colors (e.g., `#22c55e`). Invalid color values may cause unexpected rendering.\n</Callout>\n\n## Tips\n\n- **Contrast**: Ensure sufficient contrast between text and backgrounds for readability.\n- **Branding**: Start with your brand\u2019s `primary` color, then derive `primaryLight` and `primaryDark`.\n- **Iterate**: Adjust colors and refresh the site to preview changes quickly.\n\n# Demo\n\nIn the following demos, you can see how the theme can be changed. To override the theme, create a `theme.json` file in the project root and copy paste the code below.\n\n<DemoTheme variant=\"purple\" />\n<DemoTheme variant=\"green\" />\n<DemoTheme variant=\"yellow\" />\n<DemoTheme />\n\n## Purple\n\n```json\n{\n  \"default\": {\n    \"primaryLight\": \"#c4b5fd\",\n    \"primary\": \"#8b5cf6\",\n    \"primaryDark\": \"#5b21b6\",\n    \"secondaryLight\": \"#86efac\",\n    \"secondary\": \"#22c55e\",\n    \"secondaryDark\": \"#15803d\",\n    \"tertiaryLight\": \"#fbbf24\",\n    \"tertiary\": \"#f59e0b\",\n    \"tertiaryDark\": \"#d97706\",\n    \"grayLight\": \"#f3f4f6\",\n    \"gray\": \"#9ca3af\",\n    \"grayDark\": \"#374151\",\n    \"success\": \"#10b981\",\n    \"error\": \"#f43f5e\",\n    \"warning\": \"#f59e0b\",\n    \"info\": \"#3b82f6\",\n    \"dark\": \"#000000\",\n    \"light\": \"#ffffff\"\n  },\n  \"dark\": {\n    \"primaryLight\": \"#ddd6fe\",\n    \"primary\": \"#a78bfa\",\n    \"primaryDark\": \"#7c3aed\",\n    \"secondaryLight\": \"#6ee7b7\",\n    \"secondary\": \"#10b981\",\n    \"secondaryDark\": \"#065f46\",\n    \"tertiaryLight\": \"#fed7aa\",\n    \"tertiary\": \"#fb923c\",\n    \"tertiaryDark\": \"#ea580c\",\n    \"grayLight\": \"#1f2937\",\n    \"gray\": \"#6b7280\",\n    \"grayDark\": \"#9ca3af\",\n    \"success\": \"#10b981\",\n    \"error\": \"#f43f5e\",\n    \"warning\": \"#f59e0b\",\n    \"info\": \"#3b82f6\",\n    \"dark\": \"#ffffff\",\n    \"light\": \"#000000\"\n  }\n}\n```\n\n<DemoTheme variant=\"purple\" />\n\n## Green\n\n```json\n{\n  \"default\": {\n    \"primaryLight\": \"#86efac\",\n    \"primary\": \"#22c55e\",\n    \"primaryDark\": \"#15803d\",\n    \"secondaryLight\": \"#c4b5fd\",\n    \"secondary\": \"#8b5cf6\",\n    \"secondaryDark\": \"#5b21b6\",\n    \"tertiaryLight\": \"#fbbf24\",\n    \"tertiary\": \"#f59e0b\",\n    \"tertiaryDark\": \"#d97706\",\n    \"grayLight\": \"#f3f4f6\",\n    \"gray\": \"#9ca3af\",\n    \"grayDark\": \"#374151\",\n    \"success\": \"#10b981\",\n    \"error\": \"#f43f5e\",\n    \"warning\": \"#f59e0b\",\n    \"info\": \"#3b82f6\",\n    \"dark\": \"#000000\",\n    \"light\": \"#ffffff\"\n  },\n  \"dark\": {\n    \"primaryLight\": \"#6ee7b7\",\n    \"primary\": \"#10b981\",\n    \"primaryDark\": \"#065f46\",\n    \"secondaryLight\": \"#ddd6fe\",\n    \"secondary\": \"#a78bfa\",\n    \"secondaryDark\": \"#7c3aed\",\n    \"tertiaryLight\": \"#fed7aa\",\n    \"tertiary\": \"#fb923c\",\n    \"tertiaryDark\": \"#ea580c\",\n    \"grayLight\": \"#1f2937\",\n    \"gray\": \"#6b7280\",\n    \"grayDark\": \"#9ca3af\",\n    \"success\": \"#10b981\",\n    \"error\": \"#f43f5e\",\n    \"warning\": \"#f59e0b\",\n    \"info\": \"#3b82f6\",\n    \"dark\": \"#ffffff\",\n    \"light\": \"#000000\"\n  }\n}\n```\n\n<DemoTheme variant=\"green\" />\n\n## Yellow\n\n```json\n{\n  \"default\": {\n    \"primaryLight\": \"#fbbf24\",\n    \"primary\": \"#f59e0b\",\n    \"primaryDark\": \"#d97706\",\n    \"secondaryLight\": \"#c4b5fd\",\n    \"secondary\": \"#8b5cf6\",\n    \"secondaryDark\": \"#5b21b6\",\n    \"tertiaryLight\": \"#86efac\",\n    \"tertiary\": \"#22c55e\",\n    \"tertiaryDark\": \"#15803d\",\n    \"grayLight\": \"#f3f4f6\",\n    \"gray\": \"#9ca3af\",\n    \"grayDark\": \"#374151\",\n    \"success\": \"#10b981\",\n    \"error\": \"#f43f5e\",\n    \"warning\": \"#f59e0b\",\n    \"info\": \"#3b82f6\",\n    \"dark\": \"#000000\",\n    \"light\": \"#ffffff\"\n  },\n  \"dark\": {\n    \"primaryLight\": \"#fed7aa\",\n    \"primary\": \"#fb923c\",\n    \"primaryDark\": \"#ea580c\",\n    \"secondaryLight\": \"#ddd6fe\",\n    \"secondary\": \"#a78bfa\",\n    \"secondaryDark\": \"#7c3aed\",\n    \"tertiaryLight\": \"#6ee7b7\",\n    \"tertiary\": \"#10b981\",\n    \"tertiaryDark\": \"#065f46\",\n    \"grayLight\": \"#1f2937\",\n    \"gray\": \"#6b7280\",\n    \"grayDark\": \"#9ca3af\",\n    \"success\": \"#10b981\",\n    \"error\": \"#f43f5e\",\n    \"warning\": \"#f59e0b\",\n    \"info\": \"#3b82f6\",\n    \"dark\": \"#ffffff\",\n    \"light\": \"#000000\"\n  }\n}\n```\n\n<DemoTheme variant=\"yellow\" />";