Theming
Last updated
Last updated
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.
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.
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.
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.
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 ).