Skip to content

feat: add all Draw.io themes to settings panel (#499) #513

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
xinyang20 wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat: add all Draw.io themes to settings panel (#499) #513

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
801974a
feat: add all Draw.io themes to settings panel (#499)
xinyang20 Jan 4, 2026
783cb4a
fix:resolve the Copilot-suggested changes
xinyang20 Jan 4, 2026
b723406
Merge branch 'main' into feature/add-more-themes
xinyang20 Jan 12, 2026
a8ff1ea
fix:add missing DRAWIO_THEMES import in settings-dialog
xinyang20 Jan 12, 2026
de0ba6b
Merge branch 'feature/add-more-themes' of github.com:xinyang20/next-a…
xinyang20 Jan 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 12 additions & 6 deletions app/[lang]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@ import {
ResizablePanelGroup,
} from "@/components/ui/resizable"
import { useDiagram } from "@/contexts/diagram-context"
import {
DEFAULT_DRAWIO_THEME,
DRAWIO_THEMES,
type DrawioTheme,
} from "@/lib/drawio-themes"
import { i18n, type Locale } from "@/lib/i18n/config"

const drawioBaseUrl =
Expand All @@ -24,7 +29,7 @@ export default function Home() {
const currentLang = (pathname.split("/")[1] || i18n.defaultLocale) as Locale
const [isMobile, setIsMobile] = useState(false)
const [isChatVisible, setIsChatVisible] = useState(true)
const [drawioUi, setDrawioUi] = useState<"min" | "sketch">("min")
const [drawioUi, setDrawioUi] = useState<DrawioTheme>(DEFAULT_DRAWIO_THEME)
const [darkMode, setDarkMode] = useState(false)
const [isLoaded, setIsLoaded] = useState(false)
const [isDrawioReady, setIsDrawioReady] = useState(false)
Expand All @@ -46,8 +51,10 @@ export default function Home() {
}
}

const savedUi = localStorage.getItem("drawio-theme")
if (savedUi === "min" || savedUi === "sketch") {
const savedUi = localStorage.getItem(
"drawio-theme",
) as DrawioTheme | null
if (savedUi && DRAWIO_THEMES.includes(savedUi)) {
setDrawioUi(savedUi)
}

Expand Down Expand Up @@ -81,8 +88,7 @@ export default function Home() {
resetDrawioReady()
}

const handleDrawioUiChange = () => {
const newUi = drawioUi === "min" ? "sketch" : "min"
const handleDrawioUiChange = (newUi: DrawioTheme) => {
localStorage.setItem("drawio-theme", newUi)
setDrawioUi(newUi)
setIsDrawioReady(false)
Expand Down Expand Up @@ -216,7 +222,7 @@ export default function Home() {
isVisible={isChatVisible}
onToggleVisibility={toggleChatPanel}
drawioUi={drawioUi}
onToggleDrawioUi={handleDrawioUiChange}
onDrawioUiChange={handleDrawioUiChange}
darkMode={darkMode}
onToggleDarkMode={handleDarkModeChange}
isMobile={isMobile}
Expand Down
8 changes: 4 additions & 4 deletions components/chat-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,8 @@ interface ChatMessage {
interface ChatPanelProps {
isVisible: boolean
onToggleVisibility: () => void
drawioUi: "min" | "sketch"
onToggleDrawioUi: () => void
drawioUi: import("@/lib/drawio-themes").DrawioTheme
onDrawioUiChange: (theme: import("@/lib/drawio-themes").DrawioTheme) => void
Copy link
Owner

@DayuanJiang DayuanJiang Jan 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works but is unconventional. Better to add an explicit import.

darkMode: boolean
onToggleDarkMode: () => void
isMobile?: boolean
Expand Down Expand Up @@ -106,7 +106,7 @@ export default function ChatPanel({
isVisible,
onToggleVisibility,
drawioUi,
onToggleDrawioUi,
onDrawioUiChange,
darkMode,
onToggleDarkMode,
isMobile = false,
Expand Down Expand Up @@ -1295,7 +1295,7 @@ export default function ChatPanel({
open={showSettingsDialog}
onOpenChange={setShowSettingsDialog}
drawioUi={drawioUi}
onToggleDrawioUi={onToggleDrawioUi}
onDrawioUiChange={onDrawioUiChange}
darkMode={darkMode}
onToggleDarkMode={onToggleDarkMode}
minimalStyle={minimalStyle}
Expand Down
61 changes: 43 additions & 18 deletions components/settings-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {
import { Switch } from "@/components/ui/switch"
import { useDictionary } from "@/hooks/use-dictionary"
import { getApiEndpoint } from "@/lib/base-path"
import { DRAWIO_THEMES, type DrawioTheme } from "@/lib/drawio-themes"
import { i18n, type Locale } from "@/lib/i18n/config"
import { STORAGE_KEYS } from "@/lib/storage"

Expand Down Expand Up @@ -58,11 +59,24 @@ const LANGUAGE_LABELS: Record<Locale, string> = {
ja: "日本語",
}

// Mapping of Draw.io theme values to their translation dictionary keys
const DRAWIO_THEME_LABELS: Record<
DrawioTheme,
keyof typeof DRAWIO_THEMES | string
> = {
Comment on lines +63 to +66
Copy link

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Incorrect type definition in DRAWIO_THEME_LABELS. The type 'keyof typeof DRAWIO_THEMES | string' is incorrect because DRAWIO_THEMES is an array, not an object with named keys. The values should simply be 'string' type since they represent translation dictionary keys like "classic", "simple", etc.

Suggested change
const DRAWIO_THEME_LABELS: Record<
DrawioTheme,
keyof typeof DRAWIO_THEMES | string
> = {
const DRAWIO_THEME_LABELS: Record<DrawioTheme, string> = {

Copilot uses AI. Check for mistakes.
Copy link
Owner

@DayuanJiang DayuanJiang Jan 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot is correct. It is better to apply its sugguestion.

kennedy: "classic",
simple: "simple",
min: "minimal",
sketch: "sketch",
atlas: "atlas",
}

interface SettingsDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
drawioUi: "min" | "sketch"
onToggleDrawioUi: () => void
onCloseProtectionChange?: (enabled: boolean) => void
drawioUi: DrawioTheme
onDrawioUiChange: (theme: DrawioTheme) => void
darkMode: boolean
onToggleDarkMode: () => void
minimalStyle?: boolean
Expand All @@ -83,7 +97,7 @@ function SettingsContent({
open,
onOpenChange,
drawioUi,
onToggleDrawioUi,
onDrawioUiChange,
darkMode,
onToggleDarkMode,
minimalStyle = false,
Expand Down Expand Up @@ -365,23 +379,34 @@ function SettingsContent({
{/* Draw.io Style */}
<SettingItem
label={dict.settings.drawioStyle}
description={`${dict.settings.drawioStyleDescription} ${
drawioUi === "min"
? dict.settings.minimal
: dict.settings.sketch
}`}
description={dict.settings.drawioStyleDescription}
>
<Button
id="drawio-ui"
variant="outline"
onClick={onToggleDrawioUi}
className="h-9 w-[120px] rounded-xl border-border-subtle hover:bg-interactive-hover font-normal"
<Select
value={drawioUi}
onValueChange={(value) =>
onDrawioUiChange(value as DrawioTheme)
}
>
{dict.settings.switchTo}{" "}
{drawioUi === "min"
? dict.settings.sketch
: dict.settings.minimal}
</Button>
<SelectTrigger
id="drawio-ui"
className="w-[120px] h-9 rounded-xl"
>
<SelectValue />
</SelectTrigger>
<SelectContent>
{DRAWIO_THEMES.map((theme) => (
<SelectItem key={theme} value={theme}>
{
dict.settings.themes[
DRAWIO_THEME_LABELS[
theme
] as keyof typeof dict.settings.themes
]
}
</SelectItem>
))}
</SelectContent>
</Select>
</SettingItem>

{/* Diagram Style */}
Expand Down
12 changes: 12 additions & 0 deletions lib/drawio-themes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
// Draw.io UI themes configuration
export type DrawioTheme = "kennedy" | "simple" | "min" | "sketch" | "atlas"

export const DRAWIO_THEMES: DrawioTheme[] = [
"kennedy",
"simple",
"min",
"sketch",
"atlas",
]

export const DEFAULT_DRAWIO_THEME: DrawioTheme = "min"
14 changes: 10 additions & 4 deletions lib/i18n/dictionaries/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,10 +96,16 @@
"theme": "Theme",
"themeDescription": "Dark/Light mode for interface and DrawIO canvas.",
"drawioStyle": "DrawIO Style",
"drawioStyleDescription": "Canvas style:",
"switchTo": "Switch to",
"minimal": "Minimal",
"sketch": "Sketch",
"drawioStyleDescription": "Choose canvas UI theme.",
"themes": {
"classic": "Classic",
"simple": "Simple",
"minimal": "Minimal",
"sketch": "Sketch",
"atlas": "Atlas"
},
"closeProtection": "Close Protection",
Copy link
Owner

@DayuanJiang DayuanJiang Jan 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The close projection has been delete from the main. Could you rebase on the latest main first?

"closeProtectionDescription": "Show confirmation when leaving the page.",
"diagramStyle": "Diagram Style",
"diagramStyleDescription": "Toggle between minimal and styled diagram output.",
"sendShortcut": "Send Shortcut",
Expand Down
14 changes: 10 additions & 4 deletions lib/i18n/dictionaries/ja.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,10 +96,16 @@
"theme": "テーマ",
"themeDescription": "インターフェースと DrawIO キャンバスのダーク/ライトモード。",
"drawioStyle": "DrawIO スタイル",
"drawioStyleDescription": "キャンバススタイル：",
"switchTo": "切り替え",
"minimal": "ミニマル",
"sketch": "スケッチ",
"drawioStyleDescription": "キャンバスUIテーマを選択。",
"themes": {
"classic": "クラシック",
"simple": "シンプル",
"minimal": "ミニマル",
"sketch": "スケッチ",
"atlas": "アトラス"
},
"closeProtection": "ページ離脱確認",
"closeProtectionDescription": "ページを離れる際に確認を表示します。",
"diagramStyle": "ダイアグラムスタイル",
"diagramStyleDescription": "ミニマルとスタイル付きの出力を切り替えます。",
"sendShortcut": "送信ショートカット",
Expand Down
14 changes: 10 additions & 4 deletions lib/i18n/dictionaries/zh.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,10 +96,16 @@
"theme": "主题",
"themeDescription": "界面和 DrawIO 画布的深色/浅色模式。",
"drawioStyle": "DrawIO 样式",
"drawioStyleDescription": "画布样式：",
"switchTo": "切换到",
"minimal": "简约",
"sketch": "草图",
"drawioStyleDescription": "选择画布 UI 主题。",
"themes": {
"classic": "经典",
"simple": "简易",
"minimal": "极简",
"sketch": "草图",
"atlas": "现代"
},
"closeProtection": "关闭确认",
"closeProtectionDescription": "离开页面时显示确认。",
"diagramStyle": "图表样式",
"diagramStyleDescription": "切换简约与精致图表输出模式。",
"sendShortcut": "发送快捷键",
Expand Down