I've tried searching for this, and the closest related question that I could find was from 3+ years ago and had to do with the incognito window being dark, while a normal chrome window was light back then.
Now that we have the ability to have a light or dark mode browser, it's hard to find an icon design and color that looks good for both light and dark modes. Here's an example:
In the image above you can see that the first and third icons are black, so they are hard to see when using dark-mode. The middle icon (the one I'm using for my extension)looks great on dark mode, but terrible on light mode. See below:
So does anyone know if there is there a way to detect the browser mode (light or dark) and swap out the icon?
Thanks to wOxxOm I was able to figure this out.
First, I needed to create a content script (which I called toggleIcon.js) and add it to the manifist.json file.
Then I added the following to toggleIcon.js - which sends scheme: "dark" to my background.js file if window.matchMedia matches prefers-color-scheme: dark.
Then in my background.js file I listen for that message, and if request.scheme == "dark" I use chrome.broserAction.setIcon to change the paths for each of my icons to the dark version.
This effectively overrides my original icon paths as declared in the manifest.json file (as shown below).
The only downside I see is that this requires a content_script, which if you want your extension to work on any page, requires you to also add "matches": ["<all_urls>"] to your extension, which slows down the approval process. Which is why in my comments above I mentioned I had been avoiding using a content_script.
Also, I think it makes sense to use the version of your icons that work best on light-mode as your default, because I think the chrome extension page will pull from these for some of the icons they use (and that page has a white background). As an example, here's how my old icon looked (not enough contrast).
Hopefully this helps someone else!!
Related
Is there any way of setting the browser's tab background color (not the favicon image) and text color with the help of an browser extension/addon.
I've searched the internet to and fro and found nothing in the APIs. So I think it is not possible. But maybe someone has a solution for that.
What I want to achieve is to tint the colors of TYPO3 tabs according to the application context (Development, Production/Staging, Staging). I managed to set the top-bar color in the TYPO3 backend depending in the application context, so the logic works well. What I'd like to have now is a way of tinting the tab.
You are right: there's nothing in Firefox or Chrome API that allows you to color individual tabs easily. But there are some workaround ideas..
Colorful Tabs uses theme override to style individual tabs, including (by default) based on domain, using the browser.theme API that only Firefox supports. However, after trying it out, it might not fit your requirements: in current Firefox version it only affects the color of the currently selected tab (and the address bar), not providing you with a good overview.
Some other extensions for Firefox, for example TST Colored Tabs use sidebar tab representation that duplicates the tab bar, with possible enhancements. Also not ideal, and also Firefox-specific.
For Chrome, there's a Chrome-specific API tabGroups that can add color outline to tabs, but only by adding them to a group. You can have many groups, but it's still going to be ugly if your tabs are interspersed or moved around.
So let me propose an out of the box solution: use a custom favicon per application context instead of trying to change how the tab UI looks. That would be always visible in the tabs strip without any code on the browser's part. You could also override favicons from extension code if there's no easy way to do it on the application side.
I'm creating a webpage using markdown hosted by github.io. I really don't like the blue color of the hyperlink automatically generated by markdown and I'm wondering if it's possible to change it. More specifically, I'd like the text to stay black and the solid underline to become dashed underline. Here is a sample code:
Support static-based commenting via [Staticman](https://staticman.net/) for sites hosted with GitHub Pages. [#424](https://github.com/mmistakes/minimal-mistakes/issues/424)
I heard github markdown is different from traditional markdown, but I've seen people changed the link color and underline type with the same website template so I think it's still possible to change. Any suggestions?
Since GitHub uses its own styling after it processes your markdown file, any custom stylings will be overwritten. However, in a broader case, you can always use HTML elements in your markdown files. Take this example:
[normal link](https://www.google.com/)
custom link
The first one will appear as a normal blue link which will be underlined when you hover your mouse over it. The second one is a link that matches your requirements for black color and dotted underline.
I tested it on my local machine and it renders just fine in VSCode, but all styling is lost when I put it on GitHub.
Though, since you're going for a webpage, I really recommend going for HTML and CSS. They're really easy if you know MD and are much much more customizable.
I just started developing an extension earlier today and when I checked how it would look within the browser I noticed these white spaces at the top and bottom. I noticed similar but smaller spaces in other chrome extensions I have. I can't seem to find anything online about it. Does anyone know what's going on and how I can fix it?
Here's a picture for reference:
image that shows a picture of extension
The white space at the right side isn't part of the problem it was just the way I captured the picture.
--Question was answered by wOxxOm in comments below.
Can I put a HTML code in my chrome extension's icon? According to the Google API (setBadgeText) this isn't possible.
Is there any way to put it there?
While .setBadgeText is, as implied by name, text-only, you can draw anything and set that as your icon.
You'll need to draw on a <canvas>, extract image data and use .setIcon({imageData: /*...*/}) to update the icon.
See this question for a brief example, and maybe this article.
It's not quite "using HTML", but with some work you can output anything to your icon.
Badge is plain text only as can be seen in source code. There's no way around.
if i use a dark theme then links in Eclipse-"quick fix" or in i.e. Eclipse->Preferences->General->Editor (the three 'see... "File Associaton"|"Content Types"|"Appearance"'-links) are unreadable.
On this image the links i am talking about are cyan on grey:
I found a solution for Windows/XP:
The hover uses the same colors as the on your system. On Windows you
can change that via Display settings > Appearance > Advanced: ToolTip.
The link color is the one used in your browser (IE on Windows).
However, i need a solution for Linux (XFCE 4.8.1/GTK)
I checked/tested all settings of Eclipse and i found no setting for this link-color. It seems to be a system-setting (GTK), so i already tried to add this to gtkrc:
style "default" {
GtkWidget::link-color = "#ffffff"
}
class "GtkWidget" style "default"
but this did not change the link color in Eclipse.
I hope you can help - thanks!
GNOME
http://devblog.virtage.com/2013/06/eclipse-and-eclipse-based-apps-on-ubuntu-13-04-desktop-hacks/
KDE
Use the colors menu (the first entry in the picture):
And redefine the tooltip background color:
Then enjoy the readable popups:
Install gnome-color-chooser and customize the tooltip color as described here:
http://www.devsniper.com/black-tooltip-in-eclipse-on-ubuntu-12-04/
I'll chime in here, since I have the same issue.
There is no fix for this, when running Eclipse on Unix (KDE, Gnome, etc).
The color for links, which is used in the QuickFix list as well as various other places in the UI (such as Preferences panels), is hardcoded.
On Windows, you are luckier, since Eclipse uses the native link widget, which takes its colors from system settings.
On non-Windows, you are stuck with a dark-blue hardcoded color.
What it should do, at least on GTK, is use the GtkWidget::link-color setting. But it doesn't, currently.
If you want to see it fixed, either upvode this bug or fix the code yourself:
https://bugs.eclipse.org/bugs/show_bug.cgi?id=130444
Sad, I know ):
Check out this post https://stackoverflow.com/questions/96981/color-themes-for-eclipse or have a look at the Eclipse color themes site.