========================================
How do I enable dark mode for Remarkbox?
========================================

.. raw:: html

   <table class="provenance-header" style="border: 0; border-collapse: collapse; margin: 0 0 16px 0; width: 100%;">

.. raw:: html

   <tr style="border: 0;">

.. raw:: html

   <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
   | **Snapshot:** 2026-06-18T17:18:03Z
   | **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.*

.. raw:: html

   </td>

.. raw:: html

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

.. figure:: 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==
   :alt: Scan for living source

   Scan for living source

.. raw:: html

   </td>

.. raw:: html

   </tr>

.. raw:: html

   </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):

.. container::

   ::

      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;

Dark mode:

.. container::

   ::

      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;

Dynamic Toggle Based on User Preference

Match system preference:

.. container::

   ::

      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;

Match your site's dark mode class:

.. container::

   ::

      // 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;

Example Sites:

-  https://unturf.com/growing-systems-of-permanence/ - Always dark mode
-  https://russell.ballestrini.net/who-owns-yaml/ - Dynamic toggle based
   on system preference

--------------

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