Theme

An ultra-light, universal and concise theme mode.

Install

using npm:

npm install @yfill/theme --save

or using yarn:

yarn add @yfill/theme

Usage

• Import resources and use the run method to get started.

  import Theme from '@yfill/theme';
  Theme.run();

  <script src="https://unpkg.com/@yfill/theme"></script>
  <script>
    Theme.run();
  </script>

• Set the theme attribute on the tag.

  background-color-[?main]-[-10-10]-[?a]-[?hover]
  font-color-[?main]-[-10-10]-[?a]-[?hover]
  border-color-[?main]-[-10-10]-[?a]-[?hover]
  box-shadow-[?main]-[0-2]-[?hover]
  font-size-[12-52]-[?hover]

• It can also be used by enabling css variables.

  Theme.run({
    enableCssVariables: true,
  });

  .item {
    background-color: var(--background-color-[?main]-[-10-10]-[?a]);
    color: var(--font-color-[?main]-[-10-10]-[?a]);
    border-color: var(--border-color-[?main]-[-10-10]-[?a]);
    box-shadow: var(--box-shadow-[?main]-[0-2]);
    font-size: var(--font-size-[12-52]);
  }
  .item:hover {
    background-color: var(--background-color-[?main]-[-10-10]-[?a]);
    color: var(--font-color-[?main]-[-10-10]-[?a]);
    border-color: var(--border-color-[?main]-[-10-10]-[?a]);
    box-shadow: var(--box-shadow-[?main]-[0-2]);
    font-size: var(--font-size-[12-52]);
  }

Code example

<style>
  .variable {
    background-color: var(--background-color-1);
  }

  .variable:hover {
    color: var(--font-color-main-0);
  }
</style>
<div
  class="item variable"
  font-size-12
  box-shadow-0
  border-color--4-a
  font-size-52-hover
  background-color-2-hover
  box-shadow-main-0-hover
  border-color-main-1-hover
>
  content
</div>
<div
  class="item"
  font-size-12
  background-color-1
  box-shadow-0
  border-color--4-a
>
  font12
</div>
<div
  class="item"
  font-size-52
  font-color-main-0
  background-color-2
  box-shadow-main-0
  border-color-main-1
>
  font52
</div>