Dark Mode support #401
Comments
|
Apparently uBO will be able to do it via the new CSS Update: |
|
Would this be similar achievable in Firefox? I know FF does not normal have dark mode (ok, ok, there are themes [or substratum on Android]) but an option for a dark color scheme in the extension would be awesome. Sent from my TETRA using FastHub |
|
With |
|
@johnp Firefox also has an official dark mode. Support for |
|
Hi, So I will have this completed before the end of the week. At least that is what I expect. Would like to get some feed back on colour scheme that I have used so far. Any chance someone would like to copy the popup.css code that I have put here and run with it for a bit. Please rename your copy of popup.css to popup.old and just paste the code here into your popup.css file. https://github.com/jeremyperkin/uBlockdark/blob/master/popup.css NOTE : current var names are temp - can be tightened up later on. For now went long in order to be able to easily the change. |
|
Dark Mode has been completed for chromium. Wondering if @gorhill you have time to connect? Here is the candidate for consideration v.01 https://github.com/jeremyperkin/uBlockdark |
|
Thanks, give me some time to look into this, this might be only in the next weekend though. |
|
|
@gorhill almost been a month since I have heard back from you. Hope everything is ok. But I know you are probably super busy. Here is a link to version I was working on - just variable names that I found were throughout the code. I am looking to do more but just waiting on the word from you. https://github.com/jeremyperkin/uBlockdark/tree/master/variables Interested in also working on more projects as well. |
Now https://github.com/jeremyperkin/uBlockdark/blob/master/uBlock Dark Mode/varDark.css (Semicolons missing till this commit) I'll do a overall check for this if I can find any problem in the offical dark theme release of uBlock Origin. As decided in #401 (comment) by gorhill, if the theme is about colors only, the "overall check" thing should not happen as long as there can be almost nothing wrong on colors than accessibility - and color accessibility issues can be checked easily now in Firefox 7x. |
|
@gorhill Where do we stand with implementing dark mode? Have you reviewed the code as of yet? Noticed that it has almost been a couple of months since we chatted on this. |
Related commits: - 0662767 - 99b2a0a - a8e3118 - 453f545 - a45a21f This commit focuses on implementing the use of CSS `var(...)` throughout so as to make it easy to create themes -- a requirement for uBO to support a dark theme. There is still work to do regarding converting uBO's CSS to completely support `var(...)` but being able to start using theming will help complete and fine tune CSS `var(...)` support. Related issue: - uBlockOrigin/uBlock-issues#401
|
I could not use the work you posted above since when I tried it, it removed the default theme to replace it completely with the dark theme, i.e. this was a destructive change. The default needs to be preserved and the dark theme needs to be enabled condtionally. In any case there is now infrastructure to add a dark theme. The way to do this is to add dark theme color values in https://github.com/gorhill/uBlock/blob/b5d8b0a9f0f7fd6e812621188634b03a0197fc60/src/css/themes/default.css#L96-L102. The color values you add in there should override the default color values when someone enable dark theme in their browser or OS. At this point there is more work to allow to completely support dark theme, for example I didn't yet touch the logger UI (this would have further delayed being able to start on a dark them), this will be completed in the coming days, and I will keep fine-tuning according to difficulties you may encounter while implementing the dark theme. Since the theme infrastructure is now there, it's a matter of you filling in the color values and making a pull request to commit the changes in into uBO -- tell me when you are ready to make a pull request. |
|
I am ready to do a pull request. Let me know when to give it a pull! |
|
You can create a pull request on the |
|
@gorhill been away due to the virus. Back and have been looking at the new 1.27.0 variables. I have mapped them all and we could just use the current vars that have been setup. Would need a few more setup and attached to elements though. Not use to doing pull request etc with github as I only used it to ever download or upload my own repos. So today I will pull this down. Do you think that using the vars in place would be the best? Or do you want full on new variables created. Thought that it would make it easier to do the implementation since all that would be changing is the values. Let me know your thoughts! |
|
Can you commit you changes to your https://github.com/jeremyperkin/uBlock/commits/dark so that I can give a look at them first? Ideally, only the values of the CSS variables changes -- though I don't think all the needed variables are in there. For example, uBO's syntax highlight colors are not present in there and this causes issues with dark theme. If you see variables missing, tell me about them, I will decide whether I add them or convert the custom colors to CodeMirror's built-in colors (which supports theming). |
|
Unsure if I messed things up. But commit has been made. I have noted the changes that I think need to be made to fully allow things to work properly. Since I saw that there was a background color in the media line that you added I just worked with that. I did not locate the highlighting values as I could not find variables for them. |
|
@gorhill know that you are busy - just wondering if there is feedback so that I can take care of it and adjust things if needed? Have a wide open day today and would enjoy getting something accomplished :) |
|
I have to leave the computer soon and won't be able to provide feedback during the day. However I looked quickly at the change and I could tell it's not something I can pull into uBO as it is. There are changes not related to color scheme in there, and change not suitable to be in uBO ( |
|
That -moz-FieldText info was taken straight from the code. If you notice I have included each file where things are located for efficiency. Cool now I at least know what colors you would like to use and the design principle. As that was what I was looking for. I will work with that and will put something together. |
|
Revision has been posted. Hopefully this is in step with the uBlock Origin Brand. Feel free to offer feedback or criticism |
|
@gorhill Been a few days. Are we able to discuss this? |
|
I left a comment in your repo yesterday: jeremyperkin/uBlock@1059691#commitcomment-39309751:
|
Yes, I understand of course, but in the meantime is possible force the old theme? |
|
@happysurf Ok so you are saying that the dark theme is automatically enabled in uBO? If so, I gather your browser is set to dark mode theme? |
Sounds good. I will take a look later today. As I am, just waking up on the West Coast. |
Correct, is automatically enabled in uBO, in Firefox I'm using a my dark theme, Ocean Fox: |
|
I am going to add an advanced setting in next dev build to add ability to force a theme. Once a usable dark theme is well implemented, then I can come up with a way to toggle this in the dashboard. |
It stays the same even after dark theme is disabled in Firefox, I guess my OS theme is set to dark too so it's taking that into consideration. |
Related feedback: - uBlockOrigin/uBlock-issues#401 (comment) Name: `uiTheme` Default: `unset` Values: - `unset`: uBO will pick the theme according to browser's `prefers-color-scheme` - `light`: force light scheme - `dark`: force dark theme This advanced setting is not to be documented yet as it has not been decided this is a long term solution.
uBO uses the browser's |
|
Still the user should have the choice to disable/enable themes, I may want the dark theme for Firefox but I do not want the dark theme in uBO. |
My fingerprint parameter is on false (default), the other strings mentioned on the page, are not present in my profile. |
|
Its due to the variant of Firefox you're using.
Create a new profile in Firefox. That should normalize things. As the
browser is using CSS set by whomever your custom variant of firefox was.
Setting it to a new profile should skip the userChrome settings.
…On Sat., Oct. 3, 2020, 8:33 a.m. happysurf, ***@***.***> wrote:
uBO uses the browser's prefers-color-scheme value
***@***.***/prefers-color-scheme>,
so if this value stays to dark after disabling the dark theme in the
browser, this seems like a browser issue to me -- or it could be by design,
I don't know.
My fingerprint parameter is on false (default), the other strings
mentioned on the page, are not present in my profile.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#401 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AD7DSIJ3FTYGGWPTPOTXBWLSI4735ANCNFSM4GSQDYLQ>
.
|
|
@jeremyperkin Is not a userChrome problem, also with a new profile the result is the same. |
|
Just an FYI I am a mod at r/FirefoxCSS. Have seen this issue multiple
times with users using Firefox variants.
As stated it takes from your OS or can take from Firefox. Have you tried
installing vanilla firefox and then the extension?
…On Sat., Oct. 3, 2020, 11:01 a.m. happysurf, ***@***.***> wrote:
@jeremyperkin <https://github.com/jeremyperkin> Is not a userChrome
problem, also with new profile the result is the same.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#401 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AD7DSIK7CLE7SGMFYCJUT73SI5RGNANCNFSM4GSQDYLQ>
.
|
Yes, no change. |
|
This morning I see on new uBO version, the new parameter uiTheme = unset, which are the possible variables? |
|
|
The text in the advanced user options is not readable in dark mode when the line is selected and when cloud saving is activate the top bit of the "my filter" page has a white icon on white background. |
|
Dark theme in the logger in 1.30.9b14 (#1338): Details
|
|
Also with blind mode all is invnisible. |
|
Can you confirm if the dark theme is supposed to work in Firefox for Android (Fenix)? I have the Android 10 dark theme enabled and have made sure that Firefox follows the system scheme, the UBO interface is all white, also after configuring the advanced settings. a related issue: mozilla-mobile/fenix#13210 |
|
@07416 Its supposed to work in dev builds only as people started to create issues without reading the warning text. |
|
Try test beta addon in Fenix Nightly or maybe in IceRaven: https://github.com/fork-maintainers/iceraven-browser |
|
|
This comment has been minimized.
This comment has been minimized.
|
How come uBlock Origin remains light when
|
Prerequisites
Description
macOS 10.14 introduced "dark mode", which swaps the system color palette to a dark scheme. Chrome just added support for this in Google Chrome Canary. uBlock Origin doesn't currently support this. I realize this is Canary, however Dark Mode will be added to a future version of Google Chrome. It is presently on track to be in m73 (March 12, 2019) or m74 (April 23, 2019). NOTE: This is not a Canary "Bug" it is a new feature that will be added to chrome.
A specific URL where the issue occurs
Chromium Issue Tracker showing "Dark Mode" is now enabled by default in Chromium. As Google Chrome Canary is built off master nightly, this is present there. https://bugs.chromium.org/p/chromium/issues/detail?id=850098#c58
Release Schedule for Chromium/Chrome: https://www.chromium.org/developers/calendar
Steps to Reproduce
Expected behavior:
uBlock Origin's Menu pages are bright white with black text. They should (in theory) follow Google Chrome Canary's default color scheme, which has now been expanded.
Actual behavior:
Google Chrome Canary appears in dark mode, however uBlock Origin menus are all bright white with black text (same as normal mode)
Your environment
The text was updated successfully, but these errors were encountered: