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)
Last modified 3mo ago