How to make custom logo adjust in dark mode

Created on 18 July 2023, 12 months ago

Updated 19 July 2023, 12 months ago

Problem/Motivation

I am using the Gin Admin theme for a few college websites which need to be themed to the college's specification. I wanted to replace the drupal icon that appears on the toolbar and the gin login page with the college's logo.

I checked the Gin Admin Theme documentation to see how to do this, but I was unable to find any information on the logo. I attempted a few things unsuccessfully:

1) PNG logo: I uploaded a png logo which looked great in light-mode but terrible in dark-mode. This was to be expected though as I can't upload an alternative dark-mode logo.

2) SVG logo: I uploaded an svg logo, but this appears invisible in the toolbar. I did a test to see if this was an issue with the svg. I went into /themes/contrib/gin/media/icons/general and found the gin.svg icon that is used in the toolbar by default (I think). I picked circle.svg for the purpose of testing, and uploaded that to the logo image section in the gin settings. Just as before, this logo was invisible and did not function the same as the default logo. Screenshot included.

Is anybody able to recommend another step I can try to get the logo working with both light & dark mode?

Steps to reproduce

For the SVG version:

1) Click Appearance
2) Click Gin settings
3) Disable "Use the logo supplied by the theme"
4) Upload the /themes/contrib/gin/media/icons/general/circle.svg logo
5) View the theme in light & dark mode. The logo should be invisible.

💬 Support request

Status

Closed: duplicate

Component

Documentation

Created by

🇨🇦Canada ciesinsg

Live updates comments and jobs are added and updated live.

Logo

theme

darkmode

Comments & Activities

Issue created by @ciesinsg
Comment 12 months ago →
🇨🇭Switzerland saschaeggi Zurich
See https://www.drupal.org/project/gin/issues/3254310#comment-15041299 ✨ Allow inline SVGs as toolbar icon Closed: won't fix

We currently do not inline SVGs as it can potentially be a security risk. But you could override that temple to do so.
Comment 12 months ago →
🇨🇦Canada ciesinsg
Great suggestion, I will try this. Thanks for the link and the quick reply.
Status changed to Closed: duplicate 12 months ago7:52am 19 July 2023
Comment 12 months ago →
🇨🇭Switzerland saschaeggi Zurich
Closing this as duplicate of ✨ Allow inline SVGs as toolbar icon Closed: won't fix

Cheers!

contrib.social Blog FAQ Discussions

Production build 0.69.0 2024