Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Wrong colors after login in dark mode #559

Open
batorencjusz opened this issue Feb 10, 2025 · 6 comments
Open

Wrong colors after login in dark mode #559

batorencjusz opened this issue Feb 10, 2025 · 6 comments

Comments

@batorencjusz
Copy link

Hello,

After login, in dark mode colors are wrong, if i reload page nothing changes, if i click again into info panel then colors are ok.

Image
@batorencjusz
Copy link
Author

batorencjusz commented Feb 10, 2025 •
edited
Loading

#305

in 24.10 problem persist

i have to edit

.main-right > #maincontent .Dashboard .dashboard-bg {
and change it to
backgroud-color: #333333;

and if you could tell me what bandwidth monitor did you use? luci-app-nlbwmon has another icon

@batorencjusz batorencjusz reopened this Feb 10, 2025
@batorencjusz
Copy link
Author

at the moment everything is ok, i had to edit this files:

/www/luci-static/resources/view/dashboard/css/custom.css

.dashboard-bg{border-radius:16px;background-color:var(--background-color-medium,#333333)}

/www/luci-static/argon/css/cascade.css

.main-right>#maincontent .Dashboard .dashboard-bg{background-color:#333333}

.main-right>#maincontent .Dashboard{ color:#fff !important}
.main-right>#maincontent .Dashboard h3{color:#fff}.

any one know what bandwith monitor is used on preview of argon theme?

@jerrykuku
Copy link
Owner

Is infopanel a newly added interface? I remember there was no this page in the original openwrt.

@batorencjusz
Copy link
Author

batorencjusz commented Feb 17, 2025 •
edited
Loading

Its luci app dashboard, if i changed values mentioned above everything looks ok.

Could you tell me what bandwidth monitor did you use on theme preview?

@sbwml
Copy link

sbwml commented Feb 28, 2025

你可以使用自己喜欢的颜色去填充界面，类似这样（但肯定不是复制粘贴）：

/* luci-mod-dashboard */
.Dashboard .dashboard-bg {
  background-color: #1b212a !important;
}

.Dashboard h3 {
  color: #cccccc !important;
  border-radius: 0 0 16px 16px;
}

.Dashboard:not(.some-other-class) {
  color: #cccccc !important;
}

.Dashboard .title {
  background-color: #444950 !important;
  border-radius: 16px;
}

.Dashboard .cbi-rowstyle-1 {
  background-color: #1b212a;
}

Image

@nickamante
Copy link

nickamante commented Mar 7, 2025 •
edited
Loading

The dark theme has styles that are applied to [data-page="admin-dashboard"]:
https://github.com/jerrykuku/luci-theme-argon/blob/master/less/dark.less#L995

When you view the dashboard at the full url (/cgi-bin/luci/admin/dashboard - i.e. click on the Dashboard link) the body tag is <body class="lang_en logged-in" data-page="admin-dashboard"> and styles are correctly rendered.

The issue when first logging into the router (/cgi-bin/luci/) is that the body tag is missing the correct value for data-page: <body class="lang_en logged-in" data-page="">. Adding admin-dashboard manually fixes the issue.

Edit: This issue also occurs at /cgi-bin/luci/admin. It looks like the data-page is set from the request path: https://github.com/jerrykuku/luci-theme-argon/blob/master/luasrc/view/themes/argon/header.htm#L127C30-L127C34
Seems like the simplest fix would be changing dark.less#L995 to :is([data-page=""],[data-page="admin"],[data-page="admin-dashboard"])

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@nickamante @jerrykuku @sbwml @batorencjusz