Change logo color using css
MODIFY
website/src/_includes/layouts/base.njk
website/src/_includes/layouts/base.njk
<div class="header-mobile">
<a class="logo" href="{{ '/' | url }}">
- <img src="{{ '/static/img/rome-logo-black.svg' | url }}" alt="Rome" />
+ <svg id="Layer_1" data-name="logo"
+ xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360">
+ <defs>
+ <style>.cls-1{fill:#27272a;}.cls-2{fill:#ffc905;}</style>
+ </defs>
+ <title>rome-logo-black</title>
+ <path class="cls-1" d="M141.35,63.15a9.43,9.43,0,0,1-4.44,12.57c-.3.14-.6.27-.91.38C88.13,93.1,54,137,54,188.57V198H0v-9.43c0-73,47.88-135.3,115.35-160a9.43,9.43,0,0,1,11.76,4.79Z"/>
+ <rect class="cls-1" y="216" width="54" height="144"/>
+ <path class="cls-1" d="M360,188.57V198H306v-9.43C306,137,271.9,93.11,224,76.1a9.44,9.44,0,0,1-5.76-12c.11-.31.24-.62.38-.92l14.24-29.82a9.43,9.43,0,0,1,11.76-4.79C312.12,53.27,360,115.6,360,188.57Z"/>
+ <rect class="cls-1" x="306" y="216" width="54" height="144"/>
+ <path class="cls-2" d="M214.26,2.32a9.45,9.45,0,0,1,7.26,13.42l-2.59,5.42-20.06,42a9.48,9.48,0,0,1-9.11,5.35c-3.23-.18-6.49-.27-9.76-.27s-6.53.09-9.76.27a9.48,9.48,0,0,1-9.11-5.35l-20.06-42-2.59-5.42a9.46,9.46,0,0,1,7.26-13.42,254.39,254.39,0,0,1,68.52,0Z"/>
+ <path class="cls-2" d="M288,188.57V360H234V188.57c0-28.41-24.18-51.43-54-51.43s-54,23-54,51.43V360H72V188.57c0-56.81,48.36-102.86,108-102.86S288,131.76,288,188.57Z"/>
+ </svg>
<span class="logo-text">Rome</span>
</a>
<div class="stretch"></div>
<div class="sidebar">
<div class="header-desktop">
<a class="logo" href="{{ '/' | url }}">
- <img src="{{ '/static/img/rome-logo-black.svg' | url }}" alt="Rome" />
+ <svg id="Layer_1" data-name="logo"
+ xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360">
+ <defs>
+ <style>.cls-1{fill:#27272a;}.cls-2{fill:#ffc905;}</style>
+ </defs>
+ <title>rome-logo-black</title>
+ <path class="cls-1" d="M141.35,63.15a9.43,9.43,0,0,1-4.44,12.57c-.3.14-.6.27-.91.38C88.13,93.1,54,137,54,188.57V198H0v-9.43c0-73,47.88-135.3,115.35-160a9.43,9.43,0,0,1,11.76,4.79Z"/>
+ <rect class="cls-1" y="216" width="54" height="144"/>
+ <path class="cls-1" d="M360,188.57V198H306v-9.43C306,137,271.9,93.11,224,76.1a9.44,9.44,0,0,1-5.76-12c.11-.31.24-.62.38-.92l14.24-29.82a9.43,9.43,0,0,1,11.76-4.79C312.12,53.27,360,115.6,360,188.57Z"/>
+ <rect class="cls-1" x="306" y="216" width="54" height="144"/>
+ <path class="cls-2" d="M214.26,2.32a9.45,9.45,0,0,1,7.26,13.42l-2.59,5.42-20.06,42a9.48,9.48,0,0,1-9.11,5.35c-3.23-.18-6.49-.27-9.76-.27s-6.53.09-9.76.27a9.48,9.48,0,0,1-9.11-5.35l-20.06-42-2.59-5.42a9.46,9.46,0,0,1,7.26-13.42,254.39,254.39,0,0,1,68.52,0Z"/>
+ <path class="cls-2" d="M288,188.57V360H234V188.57c0-28.41-24.18-51.43-54-51.43s-54,23-54,51.43V360H72V188.57c0-56.81,48.36-102.86,108-102.86S288,131.76,288,188.57Z"/>
+ </svg>
<span class="logo-text">Rome</span>
</a>
</div>

MODIFY
website/src/styles/_header.scss
website/src/styles/_header.scss
font-size: 44px;
margin-bottom: $unit * 2;
- img {
+ svg {
width: 1em;
margin-right: $unit / 2;
+
+ .cls-1 {
+ fill: var(--logo-font-color);
+ }
+
}
.logo-text {

Change logo color using css