Yeti

# 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"></html>
  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"></html>
  1. And add menu-icon-only class to menu bar on /src/partials/_navigation.html

 


<!-- Menu Bar -->

<aside class="menu-bar menu-icon-only"></aside>

# 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"></html>
  1. And add menu-wide class to menu bar on /src/partials/_navigation.html

 


<!-- Menu Bar -->

<aside class="menu-bar menu-wide"></aside>

# RTL Support v2.1+

To enable RTL by default:

  1. Change dir="ltr" to dir="rtl" in html on /src/partials/_header.html

 


<!DOCTYPE html>

<html lang="en" dir="rtl"></html>

Please refer to the great plugin Tailwind Direction (opens new window) for more information.

# Branded Menu v3.0+

To enable Branded Menu by default:

  1. Add menu_branded class to the html on /src/partials/_header.html

 


<!DOCTYPE html>

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

 


<!-- Menu Bar -->

<aside class="menu-bar menu_branded"></aside>

# Themes v3.0+

There are 17 Color Themes:

  • Default (Sky)
  • Red red
  • Orange orange
  • Amber amber
  • Yellow yellow
  • Lime lime
  • Green green
  • Emerald emerald
  • Teal teal
  • Cyan cyan
  • Blue blue
  • Indigo indigo
  • Violet violet
  • Purple purple
  • Fuchsia fuchsia
  • Pink pink
  • Rose rose

To change the default theme:

  1. Add theme-[VALUE] class to the html on /src/partials/_header.html

 


<!DOCTYPE html>

<html lang="en" class="theme-[VALUE]"></html>

# 50 Shades of Gray v3.0+

There are 5 Primary Shades of Gray:

  • Default (Pure)
  • Slate slate
  • Zinc zinc
  • Neutral neutral
  • Stone stone

To change the default sahdes of gray:

  1. Add gray-[VALUE] class to the html on /src/partials/_header.html

 


<!DOCTYPE html>

<html lang="en" class="gray-[VALUE]"></html>

# Fonts v3.0+

There are 8 Font Combinations:

  • Default (Nunito/Nunito Sans)
  • Montserrat montserrat
  • Raleway raleway
  • Poppins poppins
  • Oswald oswald
  • Roboto Condensed/Roboto roboto
  • Inter inter
  • Yantramanav yantramanav

To change the default fonts:

  1. Add font-[VALUE] class to the html on /src/partials/_header.html

 


<!DOCTYPE html>

<html lang="en" class="font-[VALUE]"></html>

← Tools →