<table class="provenance-header" style="border: 0; border-collapse: collapse; margin: 0 0 16px 0; width: 100%;">
<tr style="border: 0;">
<td style="border: 0; vertical-align: top; padding: 0 24px 0 0;">

> **Source:** [https://faq.remarkbox.com/be47258e-bfca-11f0-bd88-040140774501/how-do-i-enable-dark-mode-for-remarkbox](https://faq.remarkbox.com/be47258e-bfca-11f0-bd88-040140774501/how-do-i-enable-dark-mode-for-remarkbox)  
> **Snapshot:** 2026-06-18T17:22:52Z  
> **Generator:** Remarkbox `3053704`  
>
> *This is a thread snapshot. The living document lives at the source URI above — it may have been edited, extended, or replied-to since.*

</td>
<td style="border: 0; vertical-align: top; width: 200px; text-align: right;">

![Scan for living source](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0AQAAAAAVtjufAAABqElEQVR42tWYQW7DQAwDiX5A//+lfqCKIyNogVwKsIc4sWPvQSuTFLUbzduj9THjkqrbt7VXPQNfen/8dVxT4+94ir3UlAeS8VW158iXdvAdCMeXA3ctMPqn+PsjIPJTpfF/3fkaxt9y+XWE9eOjSFugU+g2ib91s/LvuUrgOZj/8trL6MbtE09F+e12vj0g45mUxWc138bH72ESyl6SxL8QUW2FLUKeayfI1tfmO4BDlVlM0fwXkznz4VU8T1I/bVHinoB0PAf5NSolrNktQHH8iS2g32owy1H/IXQ1xoBf1KT1A8tXY7hntH4teudt/V+pKcsv9kZlCfyz+dMX+zov7mYmkviAeD/19dhptL+4q2NrdX46lcV/AzYomWRXW1Y/Di9MoQqLC/dHg09f2bzNMGwn9SPWPP2yuo7if8ZvmxtKQGn/P1s7mYozio+109e/7EJ4XRYf2jpz6PYDUf+59Zt+LK6y/qMDpEDnNDph/eBpT/MdPun1f4OLjeHW0+n4bO1Yp5hn5fPvgoF+XiW+fyRpqsDoTFg/tjSxBz6rS+v/c/8f+Ab9R1ZTy/EOdQAAAABJRU5ErkJggg==)

</td>
</tr>
</table>

Remarkbox embed mode defaults to light mode, but you can simply change
the query string parameter to control the appearance.

`"&mode=dark"`

Basic Usage

Light mode (default):

<div>

    var rb_src = "https://my.remarkbox.com/embed" +
        "?rb_owner_key=" + rb_owner_key +
        "&thread_title=" + encodeURI(thread_title) +
        "&thread_uri=" + encodeURIComponent(thread_uri) +
        "&mode=light" +
        thread_fragment;

</div>

Dark mode:

<div>

    var rb_src = "https://my.remarkbox.com/embed" +
        "?rb_owner_key=" + rb_owner_key +
        "&thread_title=" + encodeURI(thread_title) +
        "&thread_uri=" + encodeURIComponent(thread_uri) +
        "&mode=dark" +
         thread_fragment;

</div>

Dynamic Toggle Based on User Preference

Match system preference:

<div>

    var mode_param = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
        ? "&mode=dark"
        : "&mode=light";

    var rb_src = "https://my.remarkbox.com/embed" +
        "?rb_owner_key=" + rb_owner_key +
        "&thread_title=" + encodeURI(thread_title) +
        "&thread_uri=" + encodeURIComponent(thread_uri) +
        mode_param +
        thread_fragment;

</div>

Match your site\'s dark mode class:

<div>

    // Example: if your site has a 'dark-mode' class on the body element
    var mode_param = document.body.classList.contains('dark-mode')
        ? "&mode=dark"
        : "&mode=light";

    var rb_src = "https://my.remarkbox.com/embed" +
        "?rb_owner_key=" + rb_owner_key +
        "&thread_title=" + encodeURI(thread_title) +
        "&thread_uri=" + encodeURIComponent(thread_uri) +
        mode_param +
        thread_fragment;

</div>

Example Sites:

-   [https://unturf.com/growing-systems-of-permanence/](https://unturf.com/growing-systems-of-permanence/){rel="nofollow"
    target="_blank"} - Always dark mode
-   [https://russell.ballestrini.net/who-owns-yaml/](https://russell.ballestrini.net/who-owns-yaml/){rel="nofollow"
    target="_blank"} - Dynamic toggle based on system preference


---

**Source:** [https://faq.remarkbox.com/be47258e-bfca-11f0-bd88-040140774501/how-do-i-enable-dark-mode-for-remarkbox](https://faq.remarkbox.com/be47258e-bfca-11f0-bd88-040140774501/how-do-i-enable-dark-mode-for-remarkbox)  
**Snapshot:** 2026-06-18T17:22:52Z  
**Generator:** Remarkbox `3053704`