Switch Logo color in Dark Mode issue

Question

I have a black color logo for my portfolio and i would like to switch it white when Dark Mode : https://www.paulinerouger.com/

I have tried:

Using CSS Variables



body {
  --nav_logo: url(PR_logo.png) no-repeat;

}

body[data-theme="dark"] {
  --nav_logo: url(PR_logo_white.png) no-repeat;
}

.nav_logo {
    background: var(--nav_logo);
  }

Using SVG


 


.nav_logo {
    fill: currentColor;
}

Unfortunately none of the above has worked. Any suggestion?

user_10380225 · Answer

change stroke="#000" in your svg to stroke="currentColor"

body.dark-theme .nav__logo{
    color: #FFFFFF;
}

user_15032688 · Answer

If you are considering a JS-based solution, you can use the approach I developed below. Clicking the toggle button changes both the src attribute of the element and the background-color style of the element.

let button = document.getElementById('toggleButton');
let logo = document.getElementById('logo');

let darkImageURL = "https://cdn-icons-png.flaticon.com/512/196/196685.png";
let lightImageURL = "https://cdn-icons-png.flaticon.com/512/169/169367.png";

button.addEventListener('click', function(event) {
  if(this.innerHTML === "Dark") {
    document.body.style.background = "black";
    this.innerHTML = "Light";
    logo.src = darkImageURL;
  }
  else {
    document.body.style.background = "white";
    this.innerHTML = "Dark";
    logo.src = lightImageURL;
  }
});

user_2881286 · Answer

You can use css variables with content property for img

document.getElementById('toggleButton').addEventListener('click', function(event) {
  if (this.innerHTML === "Dark") {
    document.body.dataset.theme = "dark";
    this.innerHTML = "Light";
  } else {
    document.body.dataset.theme = "light";
    this.innerHTML = "Dark";
  }
});

body {
  --nav_logo: url('https://cdn-icons-png.flaticon.com/512/169/169367.png');
}

body[data-theme="dark"] {
  --nav_logo: url('https://cdn-icons-png.flaticon.com/512/196/196685.png');
}

.nav_logo {
  content: var(--nav_logo);
}

user_15015675 · Answer

Svg is just perfect – but wont't work within an element. You might consider these steps:

optimize your logo svg to inherit colors in a more consistent way
reduce your logo to fixed path elements i.e convert stroked elemnts like the inside bar/pipe to a solid shape/path to avoid accidental strike-width shifts
use an svg concept – providing an like usage i.e providing external svg files as reusable assets.

Example1

stripping hard coded svg properties for better global css styling:

function toggleDarkmode(){
  document.body.classList.toggle('darkmode')
}

* {
  box-sizing: border-box;
}

body {
  color: #000;
  transition: 0.3s;
}

.darkmode {
  color: #fff;
  background-color: #000;
}


/* just example css – not essential */

.nav__logo .logo {
  display: inline-block;
  width: 10em;
}

.svgAsset {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

all path related fill attributes are removed (resulting in a default fill="#000" / black)
svg parent element gets a fill="currentColor" – inherited to all children
the stroke based bar/pipe element gets a stroke="currentColor" rule

Example2

also works fine with external files

The next example takes an inlined svg as source but will also work fine with external file references like this (provided, these external files are available on the same domain):

function toggleDarkmode(){
  document.body.classList.toggle('darkmode')
}

*{
  box-sizing:border-box;
}

body {
  color: #000;
  transition: 0.3s;
}

.darkmode {
  color: #fff;
  background-color: #000;
}

/* just example css – not essential */
.nav__logo .logo {
  display: inline-block;
  width: 10em;
}

.svgAsset{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}

In the above example, strokes are converted to solid paths – thus you don’t have to bother about styling stroke-colors and fill colors.

»Silverbullet« currentColor?

svg's currentColor value is handy to color svg elements according to their parent elements' (text) color.
E.g. perfectly suited for an inline (icon font like) element behavior.
But you won't see any effect applying fill color values.

Nothing wrong with the `fill` property

Since fill is reserved for svg elements – you don't have to worry about accidentally overridden styles.
So it might still be a better choice for some elements.

Switch Logo color in Dark Mode issue

4 Answers

Example1

stripping hard coded svg properties for better global css styling:

Example2

`<svg><use href="#..."></svg>` also works fine with external files

»Silverbullet« currentColor?

Nothing wrong with the `fill` property

Switch Logo color in Dark Mode issue

4 Answers

Example1

stripping hard coded svg properties for better global css styling:

Example2

<svg><use href="#..."></svg> also works fine with external files

»Silverbullet« currentColor?

Nothing wrong with the fill property

`<svg><use href="#..."></svg>` also works fine with external files

Nothing wrong with the `fill` property