W3.CSS — Themes

Theme Colors

W3.CSS provides pre-defined theme colors:

<div class="w3-theme-l5">Theme Light 5</div>
<div class="w3-theme-l4">Theme Light 4</div>
<div class="w3-theme-l3">Theme Light 3</div>
<div class="w3-theme-l2">Theme Light 2</div>
<div class="w3-theme-l1">Theme Light 1</div>
<div class="w3-theme">Theme Default</div>
<div class="w3-theme-d1">Theme Dark 1</div>
<div class="w3-theme-d2">Theme Dark 2</div>
<div class="w3-theme-d3">Theme Dark 3</div>
<div class="w3-theme-d4">Theme Dark 4</div>

Theme Examples

<!-- Blue theme -->
<div class="w3-theme-l5 w3-container">
    <h3>Light Blue Theme</h3>
</div>

<div class="w3-theme w3-container">
    <h3>Default Blue Theme</h3>
</div>

<div class="w3-theme-d4 w3-container">
    <h3>Dark Blue Theme</h3>
</div>

Custom Theme Colors

<!-- Red theme -->
<div class="w3-deep-orange">Deep Orange</div>
<div class="w3-red">Red</div>
<div class="w3-pink">Pink</div>

<!-- Green theme -->
<div class="w3-teal">Teal</div>
<div class="w3-green">Green</div>
<div class="w3-light-green">Light Green</div>

Theme with Text

<!-- Light theme with dark text -->
<div class="w3-theme-l5 w3-text-black">
    Light theme with dark text
</div>

<!-- Dark theme with light text -->
<div class="w3-theme-d4 w3-text-white">
    Dark theme with light text
</div>

Theme Examples

<!-- Card with theme -->
<div class="w3-card-4 w3-theme-l5">
    <div class="w3-container">
        <h4>Themed Card</h4>
        <p>This card uses a theme color.</p>
    </div>
</div>

<!-- Button with theme -->
<button class="w3-button w3-theme-d2">Themed Button</button>

<!-- Navigation with theme -->
<div class="w3-bar w3-theme">
    <a href="#" class="w3-bar-item w3-button">Home</a>
    <a href="#" class="w3-bar-item w3-button">About</a>
    <a href="#" class="w3-bar-item w3-button">Contact</a>
</div>

Theme Classes

Class	Description
w3-theme-l5	Lightest theme
w3-theme-l4	Light theme
w3-theme-l3	Medium light theme
w3-theme-l2	Slightly light theme
w3-theme-l1	Light theme
w3-theme	Default theme
w3-theme-d1	Dark theme
w3-theme-d2	Medium dark theme
w3-theme-d3	Darker theme
w3-theme-d4	Darkest theme

Mini Practice

Create HTML code that:

1. Uses different theme colors
2. Creates a themed card
3. Adds a themed navigation
4. Uses theme with text colors

Up Next

Next: Learn about W3.CSS Utilities.