Ignore color scheme toggle and select default color scheme for a page

[maglietti]

How can I force a page always display the default color scheme regardless of the user selection?

For example, I am embedding a 3rd party application that renders openapi.json. I would like the entire page contents always to have a light background to match the embedded page elements.

[squidfunk]

If I understand correctly, you want to do this for a single page. You could add the following additional JavaScript to the Markdown file of the page, which will set light mode and hide the toggle:

<script>
  document.body.setAttribute("data-md-color-scheme", "default") // set to light scheme
  var palette = document.querySelector("[data-md-component=palette]")
  palette.style.display = "none" // hide palette switcher
</script>

Not beautiful, but it should do the trick. Note that this doesn't work with instant loading. It's possible, but more work to pull off.

[maglietti]

That worked perfectly!

Here's my final page template.

{% extends "main.html" %}
{% block scripts %}
  <!-- Add scripts that need to run before here -->
  {{ super() }}
  <!-- Add scripts that need to run afterwards here -->
  <script>
    document.body.setAttribute("data-md-color-scheme", "default") // set to light scheme
    var palette = document.querySelector("[data-md-component=palette]")
    palette.style.display = "none" // hide palette switcher
  </script>
{% endblock %}
 <!-- Page content --> 
 {% block container %}
 <div class="md-content" data-md-component="content">
    <header class="md-typeset" data-md-color-scheme="default">
        <!-- Stoplight -->
        <elements-api router="hash" layout="sidebar" hideTryIt="true" hideSchemas="true"
            apiDescriptionUrl="/reference/cypher/reference/openapi.json" />
        <script src="https://unpkg.com/@stoplight/elements/web-components.min.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/@stoplight/elements/styles.min.css">
    </header>
</div>
{% endblock %}