HHL-UI

Theme background colors

This is the themes colors that can be added by class.


Theme text colors


Theme css variables


Name Color Describtion
--col-pri
The primary color.
--col-txt-on-pri
TEXT
 The text color for primary.
--col-sec
The secondary color.
--col-txt-on-sec
TEXT
 The text color for secondary.
--col-ok
The ok color.
--col-txt-on-ok
TEXT
 The text color for ok.
--col-err
The error color.
--col-txt-on-err
TEXT
 The text color for error.
--col-warn
The warning color.
--col-txt-on-warn
TEXT
 The text color for warning.
--col-info
The info color.
--col-txt-on-info
TEXT
 The text color for info.


Change Theme colors

You can change the theme colors by gives the css variables new values. You can do it in app.vue like this

<style>
  body {
  --col-pri: #0069cc;
  --col-txt-on-pri: #fff;
  --col-sec: #6c757d;
  --col-txt-on-sec: #fff;
  --col-ok: #28a745;
  --col-txt-on-ok: #fff;
  --col-err: #dc3545;
  --col-txt-on-err: #fff;
  --col-warn: #ffc107;
  --col-txt-on-warn: black;
  --col-info: #17a2b8;
  --col-txt-on-info: #fff;
  }
 </style>

← Background and Text colors →