Dark mode

It is easy to enable the dark mode, follow these two steps so that dark mode can be enabled in your web app:

Since the main CSS file from this framework (which goes with the name phi.css or phi.min.css), doesn't have the dark mode CSS included in it, to keep the functionality focused on specific elements. You need to include the other file with having the name phi-dark.css or phi-dark.min.css.

<link href="https://unpkg.com/phi-css@1.0.0/dist/phi.css" rel="stylesheet">
Copy

If you want it to import it using javascript import you can use it this way:

import 'phi-css/dist/phi.css';
Copy

Add the class .dark to the container element for which you need to enable the dark mode.

<body className="dark"></body>
Copy

Generally, dark mode is enabled for the whole page. But if you have any specific requirement, then you can enable it to any specific section or any div by adding the .dark class in the class list of that particular element, this way:

<div className="dark"></div>
Copy

Want to see how it actually looks in action, head over to this link.