Change mobile handle color using css
MODIFY
website/src/_includes/layouts/base.njk
website/src/_includes/layouts/base.njk
</a>
<div class="stretch"></div>
<a href="#" class="mobile-handle">
- <img src="{{ '/static/img/mobile-handle.svg' | url }}" alt="Menu" />
+ <svg height="32px" id="menu" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/>
+ </svg>
</a>
</div>

MODIFY
website/src/styles/_header.scss
website/src/styles/_header.scss
height: 32px;
display: none;
+ svg path{
+ fill: var(--top-border-color);
+ }
+
@include mobile-only() {
display: inline-block;
}

MODIFY
website/static/img/mobile-handle.svg
website/static/img/mobile-handle.svg
-<svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/></svg>
\ No newline at end of file

Change mobile handle color using css