[GH-ISSUE #1539] 访问日志仪表盘下字体颜色未适配深色模式 #5281

New issue

Closed

opened 2026-03-01 15:40:56 +03:00 by kerem · 2 comments

kerem commented

2026-03-01 15:40:56 +03:00

Owner

Originally created by @HuoWenBo on GitHub (Feb 3, 2026).
Original GitHub issue: https://github.com/0xJacky/nginx-ui/issues/1539

如图

在浅色模式下正常显示

Originally created by @HuoWenBo on GitHub (Feb 3, 2026). Original GitHub issue: https://github.com/0xJacky/nginx-ui/issues/1539 如图 <img width="702" height="317" alt="Image" src="https://github.com/user-attachments/assets/1f605248-9f34-472c-b1cb-9a72fa5233fd" /> <img width="818" height="516" alt="Image" src="https://github.com/user-attachments/assets/2f0b51ed-e046-4488-9e00-41572ad954cb" /> 在浅色模式下正常显示 <img width="702" height="317" alt="Image" src="https://github.com/user-attachments/assets/f367e3e6-913c-4070-8c17-bf8107b28164" />

kerem

2026-03-01 15:40:56 +03:00

closed this issue
added the
bug
label

kerem commented

2026-03-01 15:40:57 +03:00

Author

Owner

@0xJacky commented on GitHub (Feb 6, 2026):

@cursoragent Fix it

@0xJacky commented on GitHub (Feb 6, 2026): @cursoragent Fix it

kerem commented

2026-03-01 15:40:57 +03:00

Author

Owner

@cursor[bot] commented on GitHub (Feb 6, 2026):

I've fixed the dark mode font color issue in the access log dashboard.

Changes made:

WorldMapChart.vue: Replaced the hardcoded text-gray-800 class with a new .table-title class that uses var(--ant-color-text) CSS variable for proper dark mode support
ChinaMapChart.vue: Applied the same fix for the "Top 10 Provinces / Regions" title

The fix uses Ant Design Vue's CSS variable --ant-color-text which automatically adapts to the current theme (light/dark mode), ensuring the font color is readable in both modes.

@cursor[bot] commented on GitHub (Feb 6, 2026): I've fixed the dark mode font color issue in the access log dashboard. **Changes made:** - **WorldMapChart.vue**: Replaced the hardcoded `text-gray-800` class with a new `.table-title` class that uses `var(--ant-color-text)` CSS variable for proper dark mode support - **ChinaMapChart.vue**: Applied the same fix for the "Top 10 Provinces / Regions" title The fix uses Ant Design Vue's CSS variable `--ant-color-text` which automatically adapts to the current theme (light/dark mode), ensuring the font color is readable in both modes. <p><a href="https://github.com/0xJacky/nginx-ui/pull/1545"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/assets/images/view-pr-dark.png"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/assets/images/view-pr-light.png"><img alt="View PR" width="86" height="28" src="https://cursor.com/assets/images/view-pr-light.png"></picture></a></p> <p><a href="https://cursor.com/background-agent?bcId=bc-c6854dd0-b16e-4aee-91d6-331539130d37"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/assets/images/open-in-cursor-dark.png"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/assets/images/open-in-cursor-light.png"><img alt="Open in Cursor" width="131" height="28" src="https://cursor.com/assets/images/open-in-cursor-dark.png"></picture></a> <a href="https://cursor.com/agents?id=bc-c6854dd0-b16e-4aee-91d6-331539130d37"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/assets/images/open-in-web-dark.png"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/assets/images/open-in-web-light.png"><img alt="Open in Web" width="114" height="28" src="https://cursor.com/assets/images/open-in-web-dark.png"></picture></a></p>