Can the icons be changed only when self-hosting? The icons have a background which look wrong with my background color. By removing the SVG background they would look better.
The SVG icons should respect the color Palette of the user. You can change the icons themselves in the theme component, if you have access to the components on your site. Can you share more details of your problem, perhaps with a screenshot? Also, can you confirm that you have light and dark mode set up correctly in your settings?
3 Likes
Thank you, this is how it looks like:
I realized it’s related to the state of the button. If I click somewhere on the background of the page then it looks nice, the gray square disappears and the color of the moon is the same as the magnifying glass. I tried changing colors on the theme, but I couldn’t find any that controls this one.
I’ll leave it on for now so you can see:
Also, I would like to change the icon to circle-half-stroke, but my attempts were not successful.
2 Likes
I see what you mean. I made a little screencast to demonstrate it.
The same thing happens on my site (and here on meta), even with the selector on the sidebar. It happens to be a bit less ugly because the colors are closer, and the button is not so prominent in the header as in your case.
It’s probably a fairly minor design fix to prevent it and I agree it’s a good idea.
3 Likes
I think right now there is no setting to edit the icons. There is a setting that ensures the icons used are loaded, but the icons are not customizable without forking the component or adding a setting for customization.
1 Like
That’s interesting. I wonder what the svg icons setting does? I tried changing these to svg icons used in the sidebar, eg circle and circle-half-stroke, but that only made the sun icon not show. The moon icon continues to show.
1 Like
It adds the icons. That setting is helpful for components where admins can choose icons, such as custom header icons. There, you can use the setting to add the icons you want to use, so they are loaded.
I think when you cannot customize the icons, they could also be added in about.json. But I am still learning how themes work.
1 Like
I easily replaced the sun and moon on my forum with the yin-yang, by putting this in the head tag of edit / css of a component (i also replace the bot icon with a lightening bolt).
<script type="text/discourse-plugin" version="0.8">
api.replaceIcon('robot', 'bolt');
api.replaceIcon('sun', 'yin-yang');
api.replaceIcon('moon', 'yin-yang');
</script>
I just found it easier to do it that way. 
1 Like