Dark Theme Only

For CSS:

html body.layout-dark:not(.layout-transparent) is used as a wrapper to give any perticular css for the dark layout only.

For SCSS:
Note! The section below is only for SCSS.

We have used a mixin named dark-only() which is used only when you want any perticular css for the dark layout.

Below is an example of how to use the mixin: 

@include dark-only() {
    background-color: black;
    color: white;
}
Type URL
Template Page path-to-apex-dark-page/

Transparent Theme Only

Background Images

We provide different background images using CSS viz.: bg-glass-1, bg-glass-2, bg-glass-3, bg-glass-4, bg-glass-hibiscus, bg-glass-purple-pizzazz, bg-glass-blue-lagoon, bg-glass-electric-violet, bg-glass-portage and bg-glass-tundora.

Let us take an example of horizontal layout that has backgound image bg-glass-1. 

<body class="layout-dark layout-transparent bg-glass-1" data-bg-img="bg-glass-1">
    <nav class="navbar navbar-expand-lg header-navbar bg-glass-1">
        ...
    </nav>
    // Use the below code for horizontal layout only.
    <div class="wrapper">
        <div class="navbar header-navbar navbar-expand-sm navbar-horizontal bg-glass-1">
            ...
        </div>
    </div>
</body>
For CSS:

html body.layout-dark.layout-transparent is used as a wrapper to give any perticular css for the transparent layout only.

For SCSS:
Note! The section below is only for SCSS.

We have used a mixin named transparent-only() which is used only when you want any perticular css for the transparent layout.

Below is an example of how to use the mixin: 

@include transparent-only() {
    background-color: transparent;
    color: white;
}
Type URL
Template Page path-to-apex-transparent-page/

Dark and Transparent Themes

For CSS:

body.layout-dark is used as a wrapper to give any css for both dark and transparent layouts.

For SCSS:
Note! The section below is only for SCSS.

We have used mixins named dark-style() and transparent-style() under one wrapper so as to have different css for the same wrapper. CSS under dark-style() will be for the dark layout and under transparent-style() will be for the transparent layout.

Below is an example of how to use these mixins: 

table td {
    @include dark-style() {
        border-color: #474748;
    }
    @include transparent-style() {
        border-color: rgba(#EEE, 0.2);
    }
}
Themes