{#
  This is where user-provided CSS variables get converted into actual values.
#}
{% macro declare_css_variables(user_customisations, pygments_theme) -%}
  --color-code-background: {{ pygments_theme.background }};
  --color-code-foreground: {{ pygments_theme.foreground }};
  {% if user_customisations -%}
  {% for name, value in user_customisations.items() -%}
    --{{ name }}: {{ value }};
  {% endfor %}
  {%- endif %}
{%- endmacro %}

<style>
  :root {
    {{ declare_css_variables(theme_light_css_variables, furo_pygments.light) }}
  }
  @media (prefers-color-scheme: dark) {
    :root {
      {{ declare_css_variables(theme_dark_css_variables, furo_pygments.dark) }}
    }
  }

  /* For allowing end-user-specific overrides */
  .override-light {
    {{ declare_css_variables(theme_light_css_variables, furo_pygments.light) }}
  }
  .override-dark {
    {{ declare_css_variables(theme_dark_css_variables, furo_pygments.dark) }}
  }
</style>
