Svelte you theme generator

This is a script to generate material you compatible DCP CSS tokens.

It has some additional token to be used with svelte you UI library.

Installation

To install the script use the following command:

npm i -g svelte-you-theme-generator
yarn add -g svelte-you-theme-generator

Library usage

Generate theme from color

Usage: sytg from-color [options] <primary>

Generate material you theme with colors inputs. Compatible with svelte-you.

Arguments:
  primary                                Primary color of palette

Options:
  -v                                     Print current version
  -s, --secondary <color>                Secondary color of palette
  -t, --tertiary <color>                 Tertiary color of palette
  -n1, --neutral <color>                 Neutral color of palette
  -n2, --neutral-variant <color>         Neutral variant color of palette
  -e --error <color>                     Error color of palette
  --full                                 Output complete css files. (Not just theme file)
  -d, --destination <path>               Output path for generated path, default to pwd
  -c --custom <name:color:harmonize...>  Extended colors for palette
  -f --force                             Force entered color, i.e Skip harmonizing color. Useful if brand color needs to be preserved
  -h, --help                             display help for command

Examples

1. Generate theme file from just primary color

sytg from-color "#6750A4"

2. Generate theme file in a different folder

sytg from-color "#6750A4" -d /tmp/theme

3. Generate theme file in a additional colors

sytg from-color "#6750A4" -s "#958DA5" -t "#B58392" -n2 "#939094" -d /tmp/theme

4. Generate complete theme file, along with supporting css file

sytg from-color "#6750A4" --full

5. Generate theme file without harmonizing colors

sytg from-color "#6750A4" -s "#958DA5" -f

6. Add extended colors and harmonize it wih primary color

sytg from-color "#6750A4" -c "spaceGray:#958DA5:true"

7. Add extended colors and don't harmonize it wih primary color

sytg from-color "#6750A4" -c "spaceGray:#958DA5:false"

7. Add multiple extended colors

sytg from-color "#6750A4" -c "spaceGray:#958DA5:false" -c "deepRed:#730024:true"

Use in programs

Generate style sheet

import { createStylesheet } from 'svelte-you-theme-generator/lib/index.js';
import { argbFromHex } from 'svelte-you-theme-generator/lib/util/index.js';

const themeCSS = createStylesheet({
  primary: argbFromHex('#6750A4'),
  tones: [
    {
      name: 'spaceGray',
      color: '#423123',
      harmonize: true,
    },
  ],
});

console.log(themeCSS);

Development

This script is built with Node (yarn), TypeScript, Nx.

Development is pretty straightforward:

• Clone the project
• Install dependencies yarn install
• Build the project yarn nx run svelte-you-theme-generator:build
• To run demo script node libs/svelte-you-theme-generator/demo/index.mjs

License

• This extension is provided under Apache 2.0 License.

• This extension is a wrapper around material-color-utilities which is also published under Apache 2.0 License.

• Shout out to Google Material Team for Material You design system.