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

xinyang20 · 2026-01-04T11:43:59Z

Summary

Expand Draw.io style options from 2 to 5 themes (Classic, Simple, Minimal, Sketch, Atlas)
Replace toggle button with dropdown selector in settings dialog
Add i18n support for all theme names (English, Chinese, Japanese)
Add CSS fix for Chrome touch events on iframe

Closes #499

Changes

app/[lang]/page.tsx: Add DrawioTheme type and DRAWIO_THEMES constant
components/chat-panel.tsx: Update props type for theme selection
components/settings-dialog.tsx: Replace Button with Select dropdown
lib/i18n/dictionaries/*.json: Add theme translations
app/globals.css: Add touch-action fix for Chrome

Test plan

Verify all 5 themes work correctly in Draw.io editor
Test theme persistence after page refresh
Verify theme names display correctly in all 3 languages
Test dark mode + theme combinations
Test on Edge browsers

Copilot

Pull request overview

This PR enhances the Draw.io theme selection functionality by expanding from 2 themes to 5 themes (Classic, Simple, Minimal, Sketch, Atlas) and replacing the toggle button with a more scalable dropdown selector. The changes include proper internationalization support for all theme names across English, Chinese, and Japanese languages.

Introduced a new theme configuration module with DrawioTheme type and constants
Replaced toggle button UI with Select dropdown component for better scalability
Added complete i18n translations for all 5 theme names in three languages
Added CSS fix for Chrome iframe touch events (though implementation is incomplete)

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
`lib/drawio-themes.ts`	New configuration file defining DrawioTheme type and available themes array
`app/[lang]/page.tsx`	Updated theme type from binary choice to DrawioTheme enum, modified change handler to accept theme parameter instead of toggling
`components/settings-dialog.tsx`	Replaced Button toggle with Select dropdown, updated to use new theme selection API
`components/chat-panel.tsx`	Updated props interface to use DrawioTheme type and theme change handler
`lib/i18n/dictionaries/en.json`	Added theme name translations under nested themes object
`lib/i18n/dictionaries/zh.json`	Added Chinese translations for all 5 theme names
`lib/i18n/dictionaries/ja.json`	Added Japanese translations for all 5 theme names
`app/globals.css`	Added diagrams-iframe CSS class with touch-action property for Chrome compatibility

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

app/[lang]/page.tsx

components/settings-dialog.tsx

components/chat-panel.tsx

app/globals.css

components/settings-dialog.tsx

Biki-dev · 2026-01-04T12:02:16Z

@xinyang20, please try to resolve the Copilot-suggested changes.

xinyang20 · 2026-01-04T12:05:03Z

Okay, got it.

xinyang20 · 2026-01-04T12:16:16Z

@Biki-dev I have resolved all Copilot-suggested changes, please review my code again, thanks.

DayuanJiang · 2026-01-04T13:00:24Z

@xinyang20 Thanks for the contribution, could you also check the CI result?

xinyang20 · 2026-01-04T13:05:05Z

Okey, I will check and fix it later.

Copilot

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

components/settings-dialog.tsx

Copilot · 2026-01-12T14:19:01Z

components/settings-dialog.tsx

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


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 is correct. It is better to apply its sugguestion.

components/settings-dialog.tsx

…i-draw-io into feature/add-more-themes

xinyang20 · 2026-01-12T14:45:29Z

@DayuanJiang Hello! I have fixed the previous issues.

As shown in the checks, all code-level workflows (including E2E Tests, Docker Build, and Lint) have passed successfully. The only failure is the Vercel deployment, which explicitly shows the error: Account is blocked.

This appears to be an infrastructure configuration issue unrelated to my changes. Could you please check your Vercel account status so that this PR can be merged? Thanks!

DayuanJiang

@xinyang20 Thanks for the fix! I tested it locally and it works well. However, I spotted a few minor issues. Once you address them, I'll merge the PR.

Also, please update the PR description—it mentions change to global.css, but there aren't any in this PR.

DayuanJiang · 2026-01-13T12:26:03Z

components/settings-dialog.tsx

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


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

DayuanJiang · 2026-01-13T12:27:28Z

components/chat-panel.tsx

-    drawioUi: "min" | "sketch"
-    onToggleDrawioUi: () => void
+    drawioUi: import("@/lib/drawio-themes").DrawioTheme
+    onDrawioUiChange: (theme: import("@/lib/drawio-themes").DrawioTheme) => void


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

DayuanJiang · 2026-01-13T12:31:44Z

lib/i18n/dictionaries/en.json

+            "sketch": "Sketch",
+            "atlas": "Atlas"
+        },
+        "closeProtection": "Close Protection",


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

xinyang20 · 2026-01-13T12:59:19Z

Got it. I'll work on these changes and commit soon.

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

801974a

Copilot AI review requested due to automatic review settings January 4, 2026 11:44

Copilot started reviewing on behalf of xinyang20 January 4, 2026 11:44 View session

Copilot AI reviewed Jan 4, 2026

View reviewed changes

xinyang20 mentioned this pull request Jan 4, 2026

[Feature] Add all Draw.io themes to settings panel #499

Open

fix:resolve the Copilot-suggested changes

783cb4a

Biki-dev requested a review from DayuanJiang January 4, 2026 12:19

Merge branch 'main' into feature/add-more-themes

b723406

Copilot AI review requested due to automatic review settings January 12, 2026 14:15

Copilot started reviewing on behalf of xinyang20 January 12, 2026 14:16 View session

fix:add missing DRAWIO_THEMES import in settings-dialog

a8ff1ea

Copilot AI reviewed Jan 12, 2026

View reviewed changes

Merge branch 'feature/add-more-themes' of github.com:xinyang20/next-a…

de0ba6b

…i-draw-io into feature/add-more-themes

DayuanJiang requested changes Jan 13, 2026

View reviewed changes

Uh oh!

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

Are you sure you want to change the base?

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

Conversation

xinyang20 commented Jan 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Test plan

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Biki-dev commented Jan 4, 2026

Uh oh!

xinyang20 commented Jan 4, 2026

Uh oh!

xinyang20 commented Jan 4, 2026

Uh oh!

DayuanJiang commented Jan 4, 2026

Uh oh!

xinyang20 commented Jan 4, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

DayuanJiang Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

xinyang20 commented Jan 12, 2026

Uh oh!

DayuanJiang left a comment

Choose a reason for hiding this comment

Uh oh!

DayuanJiang Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

DayuanJiang Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

DayuanJiang Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

xinyang20 commented Jan 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

xinyang20 commented Jan 4, 2026 •

edited

Loading