[PR #1545] [MERGED] Access log dark mode font #1332

New issue

Closed

opened 2026-02-26 12:11:13 +03:00 by kerem · 0 comments

kerem commented

2026-02-26 12:11:13 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/0xJacky/nginx-ui/pull/1545
Author: @0xJacky
Created: 2/6/2026
Status: ✅ Merged
Merged: 2/7/2026
Merged by: @0xJacky

Base: dev ← Head: cursor/access-log-dark-mode-font-dfdc

📝 Commits (5)

37dba3c fix: adapt access log dashboard font color for dark mode
a917f8b fix: adapt ECharts map color schemes for dark mode
294c600 fix: adapt ECharts tooltip popup container for dark mode
c40c894 fix: improve visualMap color bar visibility in dark mode
f6378c1 fix: adapt ApexCharts tooltip popup for dark mode in UV/PV charts

📊 Changes

4 files changed (+88 additions, -8 deletions)

View changed files

📝 app/src/views/nginx_log/dashboard/components/ChinaMapChart/ChinaMapChart.vue (+42 -4)
📝 app/src/views/nginx_log/dashboard/components/DailyTrendsChart.vue (+1 -0)
📝 app/src/views/nginx_log/dashboard/components/HourlyChart.vue (+1 -0)
📝 app/src/views/nginx_log/dashboard/components/WorldMapChart/WorldMapChart.vue (+44 -4)

📄 Description

Fix dark mode font color for map chart titles in the access log dashboard.

The previous text-gray-800 class was hardcoded, preventing the "Top 10 Countries / Regions" and "Top 10 Provinces / Regions" titles from adapting to dark mode. The new .table-title class uses var(--ant-color-text) to ensure proper theme adaptation.

Note

Low Risk
Theme-only UI adjustments (colors/tooltips/styles) with minimal behavioral impact; main risk is unintended visual regressions across light/dark themes.

Overview
Improves dark-mode styling across the access log dashboard charts so map and chart visuals remain readable.

The China/World map charts now use theme-aware visualMap gradients, default region fill colors, tooltip background/border/text colors, and dark-mode emphasis area colors. Table section titles are switched from a hardcoded Tailwind text color to a reusable .table-title style using Ant Design theme variables.

Daily/Hourly ApexCharts tooltips now explicitly follow the current theme via tooltip.theme.

^{Written by Cursor Bugbot for commit f6378c1db8. This will update automatically on new commits. Configure here.}

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/0xJacky/nginx-ui/pull/1545 **Author:** [@0xJacky](https://github.com/0xJacky) **Created:** 2/6/2026 **Status:** ✅ Merged **Merged:** 2/7/2026 **Merged by:** [@0xJacky](https://github.com/0xJacky) **Base:** `dev` ← **Head:** `cursor/access-log-dark-mode-font-dfdc` --- ### 📝 Commits (5) - [`37dba3c`](https://github.com/0xJacky/nginx-ui/commit/37dba3c3f227377d4b81a90919528b97079cf205) fix: adapt access log dashboard font color for dark mode - [`a917f8b`](https://github.com/0xJacky/nginx-ui/commit/a917f8ba79959b5ce96012f94380bba140922dd8) fix: adapt ECharts map color schemes for dark mode - [`294c600`](https://github.com/0xJacky/nginx-ui/commit/294c600e383e0e77e4a98c9dc09dbeb8f7ec2032) fix: adapt ECharts tooltip popup container for dark mode - [`c40c894`](https://github.com/0xJacky/nginx-ui/commit/c40c894e31f4f800467b67d78d25332f5389416b) fix: improve visualMap color bar visibility in dark mode - [`f6378c1`](https://github.com/0xJacky/nginx-ui/commit/f6378c1db8a751b343970db8811ce94ce0849215) fix: adapt ApexCharts tooltip popup for dark mode in UV/PV charts ### 📊 Changes **4 files changed** (+88 additions, -8 deletions) <details> <summary>View changed files</summary> 📝 `app/src/views/nginx_log/dashboard/components/ChinaMapChart/ChinaMapChart.vue` (+42 -4) 📝 `app/src/views/nginx_log/dashboard/components/DailyTrendsChart.vue` (+1 -0) 📝 `app/src/views/nginx_log/dashboard/components/HourlyChart.vue` (+1 -0) 📝 `app/src/views/nginx_log/dashboard/components/WorldMapChart/WorldMapChart.vue` (+44 -4) </details> ### 📄 Description Fix dark mode font color for map chart titles in the access log dashboard. The previous `text-gray-800` class was hardcoded, preventing the "Top 10 Countries / Regions" and "Top 10 Provinces / Regions" titles from adapting to dark mode. The new `.table-title` class uses `var(--ant-color-text)` to ensure proper theme adaptation. --- <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>  --- > [!NOTE] > **Low Risk** > Theme-only UI adjustments (colors/tooltips/styles) with minimal behavioral impact; main risk is unintended visual regressions across light/dark themes. > > **Overview** > Improves dark-mode styling across the access log dashboard charts so map and chart visuals remain readable. > > The China/World map charts now use theme-aware `visualMap` gradients, default region fill colors, tooltip background/border/text colors, and dark-mode emphasis area colors. Table section titles are switched from a hardcoded Tailwind text color to a reusable `.table-title` style using Ant Design theme variables. > > Daily/Hourly ApexCharts tooltips now explicitly follow the current theme via `tooltip.theme`. > > Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit f6378c1db8a751b343970db8811ce94ce0849215. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).  --- 🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.