Hamburger Menu

General
1

Note: This is related to my recent adventures in Dark Mode for iOS.

I was using the quasi-standard hamburger to indicate a menu. The problem was that I was using an image. So, when the phone was in Dark Mode, it basically disappeared. Was there an emoji hamburger? There are a bunch (not including all the images of actual edible hamburgers).

The unicode for the one I used is: &u2630. This worked fine; change to Dark Mode and all the lines turn white.

I had make a control (now a button and a label) so I only needed to make a change in one place to get this to work. One does have to change the font size of the label to get it big enough.

Hope this helps someone.

1 Like
2

Utf-8 char, copy/paste: ☰

SVG code:

<?xml version="1.0"?>

<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg fill-opacity="1" xmlns:xlink="http://www.w3.org/1999/xlink" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" xmlns="http://www.w3.org/2000/svg" font-family="Dialog" font-style="normal" stroke-linejoin="miter" font-size="12" stroke-dashoffset="0" image-rendering="auto">
  <!-- Unicode Character 'TRIGRAM FOR HEAVEN' -->
  <defs id="genericDefs" />
  <g>
    <g>
      <path d="M239.0625 233.0156 L20.1094 233.0156 L20.1094 201.7969 L239.0625 201.7969 L239.0625 233.0156 ZM239.0625 309.5156 L20.1094 309.5156 L20.1094 278.4375 L239.0625 278.4375 L239.0625 309.5156 ZM239.0625 385.875 L20.1094 385.875 L20.1094 354.7969 L239.0625 354.7969 L239.0625 385.875 Z" stroke="none" />
    </g>
  </g>
</svg>
2 Likes
3

Other solution is to use Picture SystemImage which will return a template image that will change color in dark mode.

Or else, using iosdesignextensions Picture.ToTemplateXC

2 Likes
4

SF Symbols is your friend.