Logo

Documentation v1.0.0

  • Getting Started
  • Dark Mode
Preview Upgrade to Pro

Quick Setup

Seven supports full Dark Mode  that you can preview here and easiliy setup following the below instructions.

  1. Run gulp task with --dark-modeflag in theme/tools/folder to generate the Dark Mode of CSS files. 
    gulp --dark-mode
    For Webpack user, use below command. 
    npm run build --dark-mode
  2. Switch CSS files to their Dark Mode. For example style.dark.bundle.cssand plugins.dark.bundle.cssare generated in assets folder: 
    <!--begin::Global Stylesheets Bundle(used by all pages)-->
<link href="assets/plugins/global/plugins.dark.bundle.css" rel="stylesheet" type="text/css" />
<link href="assets/css/style.dark.bundle.css" rel="stylesheet" type="text/css" />
<!--end::Global Stylesheets Bundle-->
  3. Add dark-modeclass name to the <body>tag. Keep other bodyclass names. 
    <body class="dark-mode ...">
<!-- HTML content -->
</body>
Upgrade To Pro
Pro Version Benefits Free Pro
UI Elements 20 100
In-house Components 20 40
Crafted Pages 5 20
Complete Documentation
Product Support
Layout Builder
Source Vectors
Email Templates
Chat App
Subscriptions App
Upgrade to Seven HTML Pro
Download Seven