Dark Mode
Quantum provides a built-in dark theme which can be loaded and dynamically enabled in the browser. The @qtm/tokens
package contains the tokens-dark.css
to use.
Usage
- npm
- pnpm
- yarn
npm install -S @qtm/tokens@latest
pnpm add @qtm/tokens@latest
yarn add @qtm/tokens@latest
index.css
@import '@qtm/tokens/dist/tokens-dark.css';
or into your js entry point
app.js
import '@qtm/tokens/dist/tokens-dark.css';
The dark mode can be enabled by adding the .dark
class.
index.html
<!-- Dark mode not enabled -->
<html>
...
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
<!-- Dark mode enabled -->
<html class="dark">
...
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
You can also set the dark mode for a specific section or a component.
App.jsx
function App() {
return <QtmButton variant="filled" color="primary" classes="dark">Dark button</QtmButton>;
}
export default App;
How to bind the dark mode with the system preferences ?
On page load dark mode can be set with the user system preferences using the media caracteristic (prefers-color-scheme: dark)
.
// On page load dark mode can be set with the user system preferences
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}