Adapt dark mode toggle to hide the current corresponding icon and display the other choice.
Bootstrap has icons that are worth using for this, linked below and shown via SVG. Here is the first source image for this feature adjustment.
A style reference:
It will likely be easier to use the 'web-font' CDN from bootstrap to do this than to encode the SVG format for a URL source. This will likely require eliminating the updateIcon variable that is associated with the toggle, but there are many ways to approach this style change.
My initial thought is that, with the web-font CDN in place in the index.html the icons can both be implanted as HTML (i.e. <i class="bi bi-moon"></i>) replacing the placeholder <h2> tag and then they can be formatted to stay inside the toggle container with CSS (i.e. position: absolute; and z-index to place the icons behind the white toggle switch.
Feel free to comment here or ask me directly if any clarity to the suggestion is needed. Again, this could be done in a few ways, so feel free to hack it the way you want--though it should look sleek similar to either inspiration image (thank you @elliecombs for finding the alternative image below). The finished product could go with or without the text describing it's state, but the toggle ought to have conditional display.
Bootstrap icons:
Moon and Sun
Alternative style reference:
Hip hip hooray for Dark Mode toggles!
Adapt dark mode toggle to hide the current corresponding icon and display the other choice.
Bootstrap has icons that are worth using for this, linked below and shown via SVG. Here is the first source image for this feature adjustment.
A style reference:
It will likely be easier to use the 'web-font' CDN from bootstrap to do this than to encode the SVG format for a URL source. This will likely require eliminating the
updateIconvariable that is associated with the toggle, but there are many ways to approach this style change.My initial thought is that, with the web-font CDN in place in the index.html the icons can both be implanted as HTML (i.e.
<i class="bi bi-moon"></i>) replacing the placeholder<h2>tag and then they can be formatted to stay inside the toggle container with CSS (i.e.position: absolute;andz-indexto place the icons behind the white toggle switch.Feel free to comment here or ask me directly if any clarity to the suggestion is needed. Again, this could be done in a few ways, so feel free to hack it the way you want--though it should look sleek similar to either inspiration image (thank you @elliecombs for finding the alternative image below). The finished product could go with or without the text describing it's state, but the toggle ought to have conditional display.
Bootstrap icons:
Moon and Sun
Alternative style reference:
Hip hip hooray for Dark Mode toggles!