@yfill/theme
TypeScript icon, indicating that this package has built-in type declarations

1.1.2 • Public • Published

Theme

GitHub license Code Style NPM Package Monthly Downloads Build Size Dependencies Status DevDependencies Status

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>

Package Sidebar

Install

npm i @yfill/theme

Weekly Downloads

0

Version

1.1.2

License

MIT

Unpacked Size

76.6 kB

Total Files

9

Last publish

Collaborators

  • yfill98