# Customization

Customizations are pretty straight forward. To customize Tailwind CSS related things refer to their official documentation (opens new window)

# Dark Mode

To enable Dark Mode by default:

  1. Add dark class to html on /src/partials/_header.html

 

<!DOCTYPE html>
<html lang="en" class="dark">
  1. Add checked attribute to Dark Mode Toggler on /src/partials/_navigation.html


 



<!-- Dark Mode -->
<label class="switch switch_outlined" data-toggle="tooltip" data-tippy-content="Toggle Dark Mode">
    <input id="darkModeToggler" type="checkbox" checked>
    <span></span>
</label>

There are 4 menu types:

  • Default (with Icon and Text)
  • Icon Only menu-icon-only
  • Wide menu-wide v1.1+
  • Hidden menu-hidden

# Icon Only

To set menu type to Icon Only as a default,

  1. Add menu-icon-only class to the html on /src/partials/_header.html

 

<!DOCTYPE html>
<html lang="en" class="menu-icon-only">
  1. And add menu-icon-only class to menu bar on /src/partials/_navigation.html

 

<!-- Menu Bar -->
<aside class="menu-bar menu-icon-only">

# Wide v1.1+

To set menu type to Wide as a default,

  1. Add menu-wide class to the html on /src/partials/_header.html

 

<!DOCTYPE html>
<html lang="en" class="menu-wide">
  1. And add menu-wide class to menu bar on /src/partials/_navigation.html

 

<!-- Menu Bar -->
<aside class="menu-bar menu-wide">