Use theme color tokens

[zachstence]

Description

Expand sections below to see how different components look before and after theming changes

Page background, text, header, logo

Before:

After (light):

After (dark):

Markdown

Before:

After (light):

After (dark):

Alert

Before:

After (light):

After (dark):

Button

Before:

After (light):

After (dark):

Accordion

Before:

After (light):

After (dark):

BigLink

Before:

After (light):

After (dark):

Delta

Before:

After (light):

After (dark):

BigValue

Before:

After (light):

After (dark):

ButtonGroup

Before:

After (light):

After (dark):

Checkbox

Before:

After (light):

After (dark):

DataTable

Before:

After (light):

After (dark):

Checklist

• For UI or styling changes, I have added a screenshot or gif showing before & after
• I have added a changeset
• I have added to the docs where applicable
  - I have added to the VS Code extension where applicable

[mcrascal]

I find the “up” green in the big value comparison and elsewhere too light in the light mode.

I find the various alert statuses not quite right in dark mode — I think it’d be worth exploring some transparency on their backgrounds in dark.

[archiewood]

@mcrascal FYI the screenshots are outdated, both of those have since been adjusted

[mcrascal]

Ah sorry, trying to do it from my phone.