How do I enable dark mode for Remarkbox?
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):
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:
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:
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:
// 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
Leave first comment to start a conversation!
Remarkbox