HHL-UI

Background colors


Text colors


Css variables


Background colors light theme.

Name Color Describtion
--col-body
The body background color.
--col-bg-0
The bg-0 background color.
--col-bg-1
The bg-1 background color.
--col-bg-2
The bg-2 background color.
--col-bg-3
The bg-3 background color.
--col-bg-4
The bg-4 background color.
--col-bg-5
The bg-5 background color.

Text colors light theme.

Name Color Describtion
--col-txt-0
The txt-0 color.
--col-txt-1
The txt-1 color.
--col-txt-2
The txt-2 color.
--col-txt-3
The txt-3 color.
--col-txt-4
The txt-4 color.

Background colors dark theme.

Name Color Describtion
--col-body
The body background color.
--col-bg-0
The bg-0 background color.
--col-bg-1
The bg-1 background color.
--col-bg-2
The bg-2 background color.
--col-bg-3
The bg-3 background color.
--col-bg-4
The bg-4 background color.
--col-bg-5
The bg-5 background color.

Text colors dark theme.

Name Color Describtion
--col-txt-0
The txt-0 color.
--col-txt-1
The txt-1 color.
--col-txt-2
The txt-2 color.
--col-txt-3
The txt-3 color.
--col-txt-4
The txt-4 color.

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-txt-0: rgb(0, 0, 0);
  --col-txt-1: rgba(0, 0, 0, 0.87);
  --col-txt-2: rgba(0, 0, 0, 0.6);
  --col-txt-3: rgba(0, 0, 0, 0.45);
  --col-txt-4: rgba(0, 0, 0, 0.3);

  --col-body: hsl(200, 15%, 90%);
  --col-bg-0: hsl(0, 0%, 100%);
  --col-bg-1: hsl(0, 0%, 95%);
  --col-bg-2: hsl(0, 0%, 91%);
  --col-bg-3: hsl(0, 0%, 86%);
  --col-bg-4: hsl(0, 0%, 81%);
  --col-bg-5: hsl(0, 0%, 76%);
  }
  body.darkTheme {
  --col-txt-0: rgba(255, 255, 255);
  --col-txt-1: rgba(255, 255, 255, 0.87);
  --col-txt-2: rgba(255, 255, 255, 0.6);
  --col-txt-3: rgba(255, 255, 255, 0.45);
  --col-txt-4: rgba(255, 255, 255, 0.3);

  --col-body: hsl(200, 10%, 20%);
  --col-bg-0: hsl(0, 0%, 26%);
  --col-bg-1: hsl(0, 0%, 31%);
  --col-bg-2: hsl(0, 0%, 36%);
  --col-bg-3: hsl(0, 0%, 40%);
  --col-bg-4: hsl(0, 0%, 45%);
  --col-bg-5: hsl(0, 0%, 50%);
  }
 </style>

← Spacing →