svelte-theme
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.3 • Public • Published

    Svelte Theme

    The theme module easily provides ability to make light and dark theme.

    Npm Version Downloads CI publish-package

    Installation

    yarn add svelte-theme

    Usage

    1. Wrap your App with ThemeProvider.

    import {ThemeProvider} from 'svelte-theme';

    2. Retrieve the theme with Svelte Context API

    const {theme} = getContext<ThemeStore>('svelte-theme');

    Note that generic type ThemeStore help you see theme props with autocomplete when using typescript.

    Usage in css style

    The theme props will be converted to kebab-case in global css variables. For mainDark prop, it will be converted to --main-dark css variable. Thereofre inside style tag, you can you it like below.

    <style>
      p {
        color: var(--main-dark);
      }
    </style>

    If you want to add opacity to theme color, you should use color-rgb instead of color.

    <style>
      p {
        color: rgba(var(--main-dark), 0.2);
      }
    </style>

    Note that rgb value is calculated based on hex string, such as #000 or #0DB293.

    Customizing theme

    1. Define colors for light and dark theme.

    export const colors = {
      primary: '#0DB293',
      primaryLight: '#75D0B8',
      secondary: '#00D9D5',
      success: '#33FF2F',
      danger: '#FF002E',
      warning: '#F2DF0F',
      info: '#3A74E7',
      brand: '#28DB98',
      dusk: '#414D6B',
      red: '#FF728D',
      orange: '#F6A623',
      yellow: '#EED100',
      green: '#24CD97',
      blue: '#679EFF',
      purple: '#B669F9',
      light: '#EDEDED',
    };
    
    export type CommonColors = typeof colors;
    
    export const light = {
      ...colors,
      paper: '#F2F5F6',
      disabled: '#C4C4C4',
      background: '#FFF',
      placeholder: '#6D6D6D',
      text: '#000',
      textLight: '#1B1B1B',
      textContrast: '#FFF',
      main: colors.primary,
      mainDark: colors.primaryLight,
      card: '#FFF',
      link: '#8E9095',
      border: '#D3D4D5',
    };
    
    export type Theme = typeof light;
    
    export const dark: Theme = {
      ...colors,
      paper: '#2A2A2A',
      disabled: '#515151',
      background: '#000',
      placeholder: '#6D6D6D',
      text: '#FFF',
      textLight: '#D3D3D3',
      textContrast: '#FFF',
      main: colors.primaryLight,
      mainDark: colors.primary,
      card: '#1C1C1C',
      link: '#B5B7BC',
      border: '#343536',
    };

    2. Wrap your component with ThemeProvider with given customTheme.

    <ThemeProvider customTheme={{light, dark}}>
      <App />
    </ThemeProvider>

    Keywords

    Install

    npm i svelte-theme

    DownloadsWeekly Downloads

    39

    Version

    1.4.3

    License

    ISC

    Unpacked Size

    101 kB

    Total Files

    18

    Last publish

    Collaborators

    • dooboolab