Skip to content

Setting Theme Contexts for Light and Dark Mode

Jonah Lawrence edited this page Apr 25, 2023 · 2 revisions

GitHub allows theme context for images in markdown by specifying a hash in the linked URL or with an HTML <picture> element. To take advantage of this feature in YouTube Cards, you can specify JSON objects for theme_context_light and theme_context_dark.

You can specify any or all colors to be overridden for each theme context as shown below.

For example, setting theme_context_light to '{ "background_color": "#ffffff", "title_color": "#24292f", "stats_color": "#57606a" }' will make the background white and the foreground text dark when the cards are viewed on light mode.

name: GitHub Readme YouTube Cards
on:
  schedule:
    # Runs every hour, on the hour
    - cron: "0 * * * *"
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: DenverCoder1/github-readme-youtube-cards@main
        with:
          channel_id: UCipSxT7a3rn81vGLw9lqRkg
          theme_context_light: '{ "background_color": "#ffffff", "title_color": "#24292f", "stats_color": "#57606a" }'
          theme_context_dark: '{ "background_color": "#0d1117", "title_color": "#ffffff", "stats_color": "#dedede" }'