feature: themes: add cyan-sinko

[giulianoliker]

Hi coderaiser! I was looking for a file manager for my Homelab and since I’ve used Total Commander for decades, I found that Cloud Commander is the first web file manager that really feels like it. I wanted the look of the app to fit my style, so I made cyan-sinko, a third theme next to light and dark. This one is using a navy UI, a cyan accent, line icons and a single bundled font. It’s CSS only, no JavaScript, no markup changes, and nothing changes for anyone who stays on the existing themes. I hope you will like it.

Enable it with --theme cyan-sinko, CLOUDCMD_THEME=cyan-sinko, or in the settings dialog (F10).

Screenshots

Panels	F9 menu

Dialog (F7)	Settings (F10)

Editor (F4)	Phone (375px)

Console (~)	Terminal (⇧~)

What the theme covers

• Panels: navy panels on a darker page, equal 16px gaps, full-height layout. The current file has a cyan chevron in the row padding, so names and icons never move while you navigate.
• Function keys: navy keys with cyan labels and icons and a pressed state. This includes the Console, Terminal and Contact keys when they are enabled. On narrow screens the keys wrap in rows of 5, with a partial last row centered.
• Icons: Lucide line icons (v0.460.0) as CSS masks for the keys, menus, path bar and file types. They follow the accent color.
• Menus: F9, the context menu and the F2 user menu.
• Dialogs: smalltalk dialogs, with OK as the filled primary button and Cancel as a text link. They keep the DOM order (OK, then Cancel), so the Tab order matches what you see, as in light and dark. The theme also styles the copy/move/delete progress bars, the upload spinner and the drag-and-drop highlight.
• Viewer and editor: F3 viewer card; F4 Ace editor colors (cyan cursor).
• Console: output and error lines as navy cards (errors in red), with the prompt and cursor in the theme colors.
• Terminal: the xterm canvas sits inset in the navy card, the same way the F4 editor does. The terminal colors come from gritty and are drawn in a canvas, so the theme frames the terminal instead of recoloring it.
• Settings (F10): the existing dialog, restyled in two columns with group dividers. The markup is unchanged.
• Phone: a dedicated layout up to 600px (tested from 375px), with larger rows and touch-friendly keys.
• Scrollbars: thin styled scrollbars on desktop and fine pointers.
• Spacing: all spacing follows a 4px grid.

Known issue: in this theme the terminal (⇧~) can open larger than its window until the browser window is resized; fixed in #485.

Font and icon licenses

• Font: Plus Jakarta Sans, SIL OFL 1.1, no Reserved Font Name. It is embedded as a base64 WOFF2 data URL: the latin subset, weights 400–700. The license is in css/themes/cyan-sinko-font-OFL.txt.
• Icons: Lucide, ISC (portions from Feather, MIT). The full license and copyright notice are in css/themes/cyan-sinko-icons-LICENSE.txt. The theme's icon section points to that file.

Size: the font is 27.3 KB as WOFF2, or 36.5 KB as base64 text inside the CSS (about 27.6 KB gzipped). The whole theme file is 85 KB, or 35.6 KB gzipped. Only the selected theme is inlined into index.html, so light and dark users don't download any of it. Embedding keeps the theme self-contained: it needs no extra request, route or font/ change. If you’d rather not bundle a font, I can switch to the system font stack, which removes about 37 KB.

Files

• css/themes/cyan-sinko.css: the theme
• css/themes/cyan-sinko-font-OFL.txt: font license
• css/themes/cyan-sinko-icons-LICENSE.txt: icon license
• .rspack/js.js: registers the theme entry (2 lines)
• tmpl/config.hbs: Cyan-Sinko option in the theme select
• server/themes.spec.js: test for the new theme. It compares with quotes removed, because the build rewrites url() quotes (SVG data URLs to double quotes, the base64 font to none).
• HELP.md, man/cloudcmd.1, json/help.json: list cyan-sinko as a --theme value

One question: I’ve also redesigned the settings dialog (F10), with titled groups, sidebar navigation, switches and roomier fields. It changes the markup, so I kept it out of this PR. Would you be interested in it as a separate PR? I’m happy to adjust anything here to fit your direction.

Checklist

• commit message named according to Contributing Guide
• npm run fix:lint is OK (it leaves no changes, so CI's lint step won't add a commit)
• npm test is OK (365/365), along with build, test:e2e:client (18/18) and test:e2e:menu (12/12), run on Linux with Node 24

I built this with help from Claude Code and reviewed and tested everything myself. Thanks for Cloud Commander!

[coderaiser]

I like the idea, it looks really great! The couple things would be great to change before merge:

• remove claude from co authors, so only you was in commit;
• I think we can keep fonts old fonts, to avoid additional license files;
• we can name it cyan short and simple: light, dark and cyan;
• I don't understand the reason of fix: client: terminal: refit after show #485, do we really need it? is it also broken on dark/light theme?

And if possible to remove jump animation of cursor

Everything else looks really good! Thank you!