I redesigned the front-end style of DietPi-Dashboard. What do you guys think?

CJackHwang · 16 February 2026 00:41

I contributed to the front-end refactoring of DietPi-Dashboard, aiming to transform it from “plain and practical” to “modern and attractive.”

Key improvements: flicker-free dark mode, KPI cards, process pagination with persistent scrolling, responsive layout, and Chinese/English language switching.

github.com/nonnorm/DietPi-Dashboard

Completely redesigned the front-end panel style (#1170)

main ← CJackHwang:pr/frontend-redesign-clean

opened 09:55PM - 15 Feb 26 UTC

CJackHwang

+2420 -705

## Summary This PR redesigns the frontend panel UI and improves refresh behav…ior. ### Changes 1. Responsive layout improvements for cards, charts, sidebar, and lists. 2. Visual redesign with a minimalist black-and-white style and rounded corners. 3. Fixed brief flicker during page refresh when switching themes. 4. Added list pagination and internal scrolling. 5. Added i18n support for English and Chinese. 6. Improved refresh flow for smoother page updates. ### Screenshots <img width="1280" height="683" alt="截屏2026-02-16 3 10 44" src="https://github.com/user-attachments/assets/846f1773-2dfe-4ea0-a353-c37c3bb16bc1" /> <img width="1280" height="678" alt="截屏2026-02-16 3 12 06" src="https://github.com/user-attachments/assets/0f257dd1-f4e8-45bd-a6c9-5031a7cf6581" /> <img width="1280" height="685" alt="截屏2026-02-16 3 10 58" src="https://github.com/user-attachments/assets/434c847d-8382-4e57-9052-38d8a9690214" /> <img width="1280" height="680" alt="截屏2026-02-16 3 12 14" src="https://github.com/user-attachments/assets/1bc9e814-9b3e-40ea-887b-d9ea332dddd9" /> <img width="1280" height="675" alt="截屏2026-02-16 3 11 11" src="https://github.com/user-attachments/assets/52c45bcc-0c96-4250-92a9-bd7c630df394" /> <img width="1280" height="677" alt="截屏2026-02-16 3 12 31" src="https://github.com/user-attachments/assets/f3b9d695-c004-406b-8431-fa4b89992d11" /> <img width="493" height="565" alt="截屏2026-02-16 3 13 17" src="https://github.com/user-attachments/assets/2e6e7159-6666-48f2-9220-7a6b066cfd4d" /> <img width="498" height="567" alt="截屏2026-02-16 3 13 26" src="https://github.com/user-attachments/assets/ceef56dc-db34-4889-9a3f-18e72539ca10" /> <img width="499" height="567" alt="截屏2026-02-16 3 13 43" src="https://github.com/user-attachments/assets/d958f49e-5a7a-416e-9883-abc91cdb618a" /> ### Verification Tested on: - Device: Orange Pi Zero3 2GB - OS: DietPi v10.0.1 - Backend: v0.7.0 - Verification time: 2026-02-15 20:15 UTC <img width="1280" height="679" alt="截屏2026-02-16 5 53 32" src="https://github.com/user-attachments/assets/24beaff9-056a-4786-b8c6-5467c6ab46e1" /> Validated: 1. Desktop and mobile layouts render correctly. 2. Theme switching + refresh no longer flickers. 3. List pagination and internal scrolling work as expected. 4. Language switching (EN/ZH) works correctly. 5. Regular page refresh is stable and smooth. ### Compatibility / Scope - No backend protocol changes. - Frontend-focused changes only.

before