KVision
Primary version
Primary version
  • KVision Guide
  • Introduction
  • Migration
    • Migration from 8.x to 9.x
    • Migration from 7.x to 8.x
    • Migration from 6.x to 7.x
    • Migration from 5.x to 6.x
    • Migration from 4.x to 5.x
  • 1. Getting Started
    • Setting Up
    • Modules
    • Creating a New Application
    • Development Workflow
    • Hot Module Replacement
    • Debugging
    • Building For Production
  • 2. Frontend Development Guide
    • UI Structure
    • Root Container
    • Theming
    • Dark mode
    • Type safe CSS Properties
    • Basic Components
    • Icons and Images
    • Buttons and Toolbars
    • Layout Containers
    • Events
    • Working with State
    • DOM Bindings & Lifecycle Hooks
    • W3C, Snabdom, and KVision Elements
    • Forms
    • Form controls
    • Drag and drop
    • Internationalization
    • Adding custom tags (SVG example)
    • Custom components
  • 3. Optional UI Functionality (via modules)
    • Using Redux
    • Bootstrap
      • Navigation and menus
      • Tooltips and popovers
      • Modals, windows and toasts
    • Charts
    • Toasts
    • Tabulator Tables
    • Handlebars.js Templates
    • JS Routing with Navigo
    • jQuery Bindings
    • Using REST Services
  • 4. Integrating With Javascript Libraries
    • Integrating With React Components
  • 5. Fullstack Development Guide
    • Select Remote
    • Tom Select Remote
    • Tom Typeahead Remote
    • Tabulator Remote
  • FAQ
  • Useful References
Powered by GitBook
On this page
  1. 2. Frontend Development Guide

Dark mode

KVision fully supports Bootstrap dark mode. You can use io.kvision.theme.ThemeManager component from the kvision-bootstrap module to work with color themes.

import io.kvision.theme.ThemeManager

class MyApp : Application() {
    init {
        ThemeManager.init()
    }
}

By default theme manager is initialized with auto-detected mode and saves the mode selected by the user in the browser local storage. You can modify this behavior with additional parameters of the init() method.

import io.kvision.theme.Theme
import io.kvision.theme.ThemeManager

class MyApp : Application() {
    init {
        ThemeManager.init(initialTheme = Theme.DARK, remember = false)
    }
}

You can use ThemeManager.theme property to manually select the color theme.

button("Switch to dark mode").onClick {
    ThemeManager.theme = Theme.DARK
}

You can also use built-in ThemeSwitcher, component which is a Button subclass designed as the color mode toggler (you need to also include Font Awesome module for icons).

themeSwitcher(style = ButtonStyle.OUTLINESECONDARY, round = true)
PreviousThemingNextType safe CSS Properties

Last updated 27 days ago