Tutorial: Customize dark mode in Framework7

A quick one:
There’s an easy way to customize the dark theme using CSS:

Lets say you have a title:
<div class="title sliding style1">Title</div>
And the CSS like:

.style1 {

  color: #ff3b30;

}

You can use:

.dark .style1 {

  color: #6250ff;

}

You can use it on any component too.
In some cases you need to use !important
Make sure custom style.css is placed after F7.css

2 Likes