Dark Mode Website Design
It has always been a dream of mine to build a cool-looking website. But a lot of my early ideas for web design were based around light mode—images that look fine on a white background only. My concepts did not work for dark mode.
Sure, I was able to change the background color to black, but this just looked awkward and unbalanced. Instead, for a "cool-looking" website that works in dark mode, it is necessary to have vector graphics (like SVG) that dynamically adjust to the color mode.
Here are some things I have learned:
Use "currentcolor" as a color in SVGs, and this will be modified when the user changes to dark or light mode.
Apply the "use" tag in SVG directly in HTML to access an icon from a SVG file (like a sprite sheet).
Avoid secondary colors as they are harder to adjust than "currentcolor."
It might not look as cool as I was hoping, but using SVG images works well for dark and light mode, and this benefits users who tend to prefer dark mode (like myself).