Skip to main content

Dark Mode

Core Concepts

Using Oxyblock Core to style your site in dark mode.

Now that dark mode is a premium feature of many operating systems, it is increasingly common to design a dark version of your website to accompany the default design.

To make it as easy as possible, Oxyblock Core includes a dark variant that allows you to style your site differently when dark mode is enabled.

To add a utility, but only in dark mode, simply prefix the utility with the breakpoint name, e.g.
ob-{dark}-bg-primary-500.

Code

<div class="ob-bg-primary-500 ob-dark-bg-primary-200">...</div>