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.

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

滾動條在黑色主題下依然為亮色系 #802

Closed
nekogravitycat opened this issue Apr 20, 2022 · 1 comment
Closed

滾動條在黑色主題下依然為亮色系 #802

nekogravitycat opened this issue Apr 20, 2022 · 1 comment
Assignees
Labels
🎨 CSS 與 CSS 和外觀設計上有關聯。
Milestone

Comments

@nekogravitycat
Copy link

當使用者系統主題為暗色系、或強制設定為暗色系時,Chrome 的滾動條依然為亮色主題。
Chrome 版本:100.0.4896.127

Screenshot 2022-04-20 153217

@YamiOdymel YamiOdymel self-assigned this Apr 20, 2022
@YamiOdymel YamiOdymel added the 🎨 CSS 與 CSS 和外觀設計上有關聯。 label Apr 20, 2022
@YamiOdymel
Copy link
Member

YamiOdymel commented Apr 20, 2022

我很意外這個看起來像系統原生的問題,CSS 竟然能改動他。

暫時新增下面這個 CSS 可以讓暗色裝置將捲軸改為黑色。

@media (prefers-color-scheme: dark) {
    html {
        color-scheme: dark;
    }
}

我會在下個版本修正這個問題,下面這段 CSS 留給我自己。

如果你會用到 data-scheme="dark"is-dark 這種覆寫樣式,也可以用下面的 CSS。

html,
html[data-scheme="light"],
.is-light,
html[data-scheme="dark"] .is-inverted {
    color-scheme: light;
}

html[data-scheme="light"] .is-inverted,
.is-inverted,
html[data-scheme="dark"],
.is-dark {
    color-scheme: dark;
}

@media (prefers-color-scheme: light) {
    html {
        color-scheme: light;
    }
}

@media (prefers-color-scheme: dark) {
    html {
        color-scheme: dark;
    }
}

@YamiOdymel YamiOdymel added this to the Tocas 4.0.4 milestone Apr 20, 2022
YamiOdymel added a commit that referenced this issue Apr 23, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🎨 CSS 與 CSS 和外觀設計上有關聯。
Projects
None yet
Development

No branches or pull requests

2 participants