Paywall FAQs

How do I support light mode and dark mode?

Unfortunately, Webflow doesn't provide an out-of-the-box solution to this. However, with some custom CSS and JavaScript, it is possible. Note that you need a paid Webflow account to add custom code to your webpage.

In the following example, you'll define both light mode and dark mode colors for a single element on your webpage.

First, select an element which you'd like to apply dark mode to from the Navigator such as a container div:

588588

Then, in the Element Settings, set its ID to content:

480480

Next, in the Pages tab, hover over your webpage and select the cog icon to bring up the settings:

582582

Scroll down to the Custom Code section and add the following to the Inside head tag field:

<style>
#content.light-mode {
  background-color: #ffffff;
  color: #000000;
}
#content.dark-mode {
  background-color: #000000;
  color: #ffffff;
}
</style>

This defines the background and font colors for your element when in light mode and dark mode. These can be set to whatever you'd like.

Then, in the Before body tag field, enter:

<script>
function toggleTheme(mode) {
 const themeState = document.getElementById('content');
 themeState.className = mode;
}
(function() {
 if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  toggleTheme("dark-mode");
} else {
  toggleTheme("light-mode");
}
})();
</script>

When the paywall loads, it will check whether the color scheme of the device is set to dark mode or not. It then passes the color scheme to toggleTheme() which attaches the appropriate class name to it.

Click Save and publish your webpage. Preview your paywall on device to double check that it works as expected.


Did this page help you?