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
  • Adding a custom CSS file to your application
  • Replacing Bootstrap CSS with a custom one
  • Using free themes from Bootswatch
  • Using KVision without Bootstrap
  1. 2. Frontend Development Guide

Theming

PreviousRoot ContainerNextDark mode

Last updated 27 days ago

By default KVision includes the standard look and feel. It's modern, elegant and proven in many production environments. Just include kvision-bootstrap module in your build.gradle.kts file. But there are other possibilities as well.

Adding a custom CSS file to your application

You can add a custom CSS file to define your own CSS classes, which can be used throughout your code (almost every component supports the className: String? constructor parameter and the addCssClass(css: String) and removeCssClass(css: String) methods). Of course you can also overwrite and change the standard Bootstrap classes.

You can add as many CSS files as you wish. Just save your *.css files in src/jsMain/resources/modules/css directory and use @JsModule annotation in your main App object.

App.kt
import io.kvision.utils.useModule

@JsModule("/kotlin/modules/css/kvapp.css")
external val kvappCss: dynamic

@JsModule("/kotlin/modules/css/other.css")
external val otherCss: dynamic

class App : Application() {
    init {
        useModule(kvappCss)
        useModule(otherCss)
    }
    
    override fun start() {
    // ...
    }
}

Replacing Bootstrap CSS with a custom one

You can remove BootstrapCssModule initializer from your application and include different CSS file in the main index.html of your application. It can be loaded from any local or remote source.

index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>KVision App</title>
    <link rel="stylesheet" href="css/mybootstrap.min.css" >
    <script type="text/javascript" src="main.bundle.js"></script>
</head>
<body>
<div id="kvapp"></div>
</body>
</html>
index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>KVision Address Book</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@5.1.0/dist/materia/bootstrap.min.css" integrity="sha256-T8h7oW5tHp4MhFhmRoDI8xjnB2ld89qSgc3s9g8T0uU=" crossorigin="anonymous">
    <script type="text/javascript" src="main.bundle.js"></script>
</head>
<body>
<div id="kvapp"></div>
</body>
</html>

Using KVision without Bootstrap

You can create such a file manually or version from sources. To include a local version of Bootstrap, simply place mybootstrap.min.css in the src/jsMain/resources/css directory.

Using free themes from

There are some great free themes ready to use available at . For instance to use Materia (material-like) theme make the following change to your index.html.

KVision can also be used with no Bootstrap at all. Just exclude all *bootstrap* modules from your build.gradle.kts file. You won't be able to use components from these modules, which depend on Bootstrap's JavaScript and styling. But you can use any other CSS framework (see examples for , and ).

Bootstrap
build your own Bootstrap
Bootswatch
JSDelivr
TailwindCSS
Fomantic UI
Patternfly