core: frontend: explanatory diagrams: use themeable colours

[ES-Alexander]

Current behaviour

SVGs provided in #2748 and #2760 use hardcoded colour values, both within the SVGs and for the dynamic (light/dark) outline handling. These colours fit the SMS vision, and work well with our default theme, but may not play as nicely with custom themes (see #1938).

Expected or desired behaviour

It would be nice if

1. the themes were updated to include the new image colours
   1. SMS should probably provide names for the defaults
   2. The new variables could be something like:
      • outline (dark-mode): #D1EAF1
      • outline (light-mode): #002F45
      • water: #2599D1 (almost BR_BLUE?)
      • positive: #4DA383
      • neutral: #FF9A00
      • negative: #FF00DE
      • attention: #FDDC00 (almost TETHER_YELLOW?)
2. the SVGs were modified to make use of theme-based colours via CSS variables, instead of hardcoded hex codes
   • e.g. style="fill:var(--outline);" (I think?)
   • This would also remove the current light/dark outline colour switching mechanism, as it would be redundant
     • Note that failsafes and motor-reversal both implement the colour switching, so that should at least be consolidated, but can ideally be removed from both

Prerequisites

• [X] I have checked to make sure that a similar request has not already been filed or fixed.

[ES-Alexander]

Colours named as:

Sky blue Blue Whale BR Blue Kelp Green Tether Yellow Garibaldi Orange Axolotl Pink