Inconsistent display of the theme switcher icon #144
Labels
enhancement
New feature or request
Milestone
Comments
|
@palant I have the same needs, and I discovered the country flag that language switcher icon only show two characters on my Windows device. But it's normal on my Android phone. |
|
Okay, let's do this. Meanwhile, improve the accessibility(#111) of them also. |
|
What do you think of this toggle? https://codepen.io/bnthor/pen/WQBNxO |
|
Looks nice but takes up too much space. And isn't as nice any more when scaled down. Fewer visual elements is actually better here. |
|
Agreed. |
|
I'm working on it now. You can test it in branch |
|
The code on the branch looks good to me now. I didn't see it in action however. |
reuixiy
added a commit
that referenced
this issue
May 17, 2020
Fixes #144 * Use SVG icon for theme switcher * Replace innerHTML with CSS selectors * Add some magic to moon icon * Update sun icon * Simplify * Do not add icons if theme switcher is hidden * Fix a careless bug
ulmefors
pushed a commit
to ulmefors/hugo-theme-meme
that referenced
this issue
Nov 22, 2020
Fixes reuixiy#144 * Use SVG icon for theme switcher * Replace innerHTML with CSS selectors * Add some magic to moon icon * Update sun icon * Simplify * Do not add icons if theme switcher is hidden * Fix a careless bug
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The theme switcher icon relies on the system font which can vary a lot. I set
font-size: 140%for mine (it was barely visible in Chrome on Linux) and here is what I got:From left to right: Windows (both Firefox and Chrome), Linux (Firefox), Linux (Chrome). Not only does the color vary, the size isn't consistent either. So I now have it overly large on Windows, but at least it should be visible in any browser.
Maybe it's a good idea to use an SVG icon for this, at least optionally?
The text was updated successfully, but these errors were encountered: