Custom CSS may fail when Chrome's #enable-force-dark flag is enabled #111
Comments
Forced DarkAs far as I've tested, CSS rules about colors will be modified forcibly by Chrome if it's in "Force Dark" mode, and all of Why do you not use system dark mode? Vimium C has "Auto switch between light and dark mode", and it relies the media query I need more time to test and investigate related detection methods. If you know how to tell this mode from normal light mode, please add it here. Customize Vimium C UIMost styles of Vimium C's UI are in https://github.com/gdh1995/vimium-c/blob/master/front/vimium-c.css , and rules in
Styles of |
|
Well, Chrome now supports a command-line argument of |
|
Thanks for the quick response. Thanks for pointing out the shadow div. It was useful for experimenting and for finding the right selectors. With this, I've manged to find a color combo which works for me and with the browser's color inversion, so thank you. The Custom CSS setting does seem to be working properly, given the circumstances. You can handle this bug however you like at this point. Feel free to close it, but I suggest keeping it open until you find and/or implement a workaround, or at the very least include this caveat in documentation (preferably in the much-needed documentation for Custom CSS, which you've already half-written up here). |
|
On my Win10,
Tested on Chrome 79 and 80. |
|
BTW, could you provide those colors you found? Are they neither so dark nor so light, in order to avoid replacement? |
|
They seem functionally identical, excluding the state which gets reported to your extension. Either way, I've been running both of those flags already (with the latter assigned via command line), I haven't been confusing one for the other. I do still believe that they fundamentally serve the same purpose though, so I feel like I should be removing the command line argument flag, since it shouldn't be needed anymore, now that it has a native flag option in Chrome. I presume that is why the colors remained intact. These are the colors I'm using: Text is still being forced to white, which looks fine with this color scheme. |
|
As far as I've tested, they're not the same (below are my snapshots), so I think your
BTW, on Win 10, |
|
It's an interesting theory that one is overriding the other, but the behavior you've pointed out is not in line with what is being exhibited by me. My concern is only with the Link Hints not getting a proper dark theme applied when the browser is dark. I'm hoping we can find a way to get it to work as expected. |
gdh1995
changed the title
It's because the normal "dark theme" is just a suggestion, and websites can decide themselves whether to use dark versions of colors or not. For example, Vimium C will follow dark theme only if you has enabled "Auto switch between light and dark mode". While most websites haven't update their code to follow it. |
|
Isn't that something the --force-dark-mode flag is meant to override? The websites should be dark theme whenever that is active. Or are you suggesting that this flag doesn't force websites into rendering under a dark theme, but rather forces sending them the status that the PC is set to a dark theme (regardless of the actual applied theme)? |
|
I think it's the later one.
…---Original---
From: "Jeffrey Nichtberger"<notifications@github.com>
Date: Thu, Feb 20, 2020 23:57 PM
To: "gdh1995/vimium-c"<vimium-c@noreply.github.com>;
Cc: "Comment"<comment@noreply.github.com>;"Dahan Gong"<gdh1995@qq.com>;
Subject: Re: [gdh1995/vimium-c] Custom CSS may fail when Chrome's #enable-force-dark flag is enabled (#111)
Isn't that something the --force-dark-mode flag is meant to override? The websites should be dark theme whenever that is active. Or are you suggesting that this flag doesn't force websites into rendering under a dark theme, but rather forces sending them the status that the PC is set to a dark theme (regardless of the actual applied theme)?
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or unsubscribe.
|
|
My browser behavior is in line with that. So then this CSS issue is exclusive to the use of the Chrome flag, not the command line argument. Wish they weren't so similarly named. |
|
Closed, because:
|
|
I stumbled upon this post when searching for a solution for this myself (edit: in a different project). It appears that the Chrome team has recently published a way to detect this: https://developer.chrome.com/blog/auto-dark-theme/#detecting-auto-dark-theme Additionally, someone pointed out that they had enabled no experimental flags at all, and simply had the Android system "dark mode" preference enabled, and they encountered this issue with a project that I worked on. So it appears that it is no longer something that only affects experimental flag users. |
The Custom CSS field in vimium C's options does not apply any values when the Chrome flag of Force Dark Mode (#enable-force-dark) is set to Enabled. I've tested with it disabled, and the same kinds of CSS statements work in that case only. For example,
.LH { color: green; }works only when the flag is disabled.(As an aside, how can the background color of the Link Hints be changed? I can't get a CSS statement which seems to work at changing that. Vimium C really needs either clear documentation on how to use the Custom CSS field (it's not obvious nor natural) and/or a CSS selector reference sheet, or most ideally some designated fields for changing basic/common UI elements, such as Link Hint background and text colors.)
There is a real need for the CSS override to be working in this scenario, since the browser's forced dark mode also inverts the color of the text in the Link Hints. Thus, we end up with white text on yellow background, which is really hard to see, and without Custom CSS support, I can't add a workaround. I imagine you can fix this by including some check on the browser's flags to see if it is enabled, and if so, either prevent the color inversion, or invert it yourself so that it will get re-inverted back to the right color by Chrome.
Please make sure the Custom CSS works when dark mode is enabled, and ideally, if possible, add support for forced dark mode, so that Link Hints don't become inverted with the rest of the page, so that custom styling isn't necessary to begin with.
The text was updated successfully, but these errors were encountered: