docs: embed light/dark styling in svg diagram

[awphi]

Changes

• The troublesome diagram SVG strikes again and has bricked staging deployment! The problem is that APDS wants the index page to be a standalone React app and does not support relative imports. Here's what's been tried so far:
  • Relative @site imports - works for publishing, does not work for previewing locally
  • Symlinking the svg into the index page dir - works for previewing locally, does not work for publishing
  • This; embedding the light/dark styling in the svg itself (the whole reason we want to inline the svg at all) and just using an <img> tag in the public directory - seems to work for both.
• Also softens the foreground color in light mode to match the new text styling

Successful staging deploy from this branch: https://github.com/arm/topo/actions/runs/30658690136

Checklist

• 🤖 This change is covered by tests as required.
• 🤹 All required manual testing has been performed.
• 📖 All documentation updates are complete.

[yejseo01]

LGTM. Would it be okay to attach the difference in screenshots from now on?

[awphi]

LGTM. Would it be okay to attach the difference in screenshots from now on?

Sure, have just been avoiding it since the docs are still unreleased! Probably doesn't matter in all honesty though.