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

2.2.0 • Public • Published

@sjsf/skeleton-theme

The skeleton v3 (tailwind v3) based theme for svelte-jsonschema-form.

Installation

npm install @sjsf/form @sjsf/skeleton-theme

Usage

Setup styles

There is two ways to setup styles:

  1. Use tailwindcss config
import { skeleton } from '@skeletonlabs/skeleton/plugin';
import * as themes from '@skeletonlabs/skeleton/themes';
import forms from '@tailwindcss/forms'
import { THEME_CONTENT } from '@sjsf/skeleton-theme/preset'

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}', THEME_CONTENT],
  plugins: [
    forms,
    skeleton({
      themes: [/* themes.something */],
    })
  ],
}

Or with a preset

import themePreset from '@sjsf/skeleton-theme/preset'

/** @type {import('tailwindcss').Config} */
export default {
  presets: [themePreset],
}
  1. Inject prepared styles (not recommended)
// Inject them as you like
import themeStyles from "@sjsf/skeleton-theme/styles.css?inline";

Bundled themes:

  • cerberus
  • catppuccin
  • pine
  • rose

Apply theme

<script lang="ts">
  import { createForm } from '@sjsf/form';
  import { theme } from '@sjsf/skeleton-theme';

  const form = createForm({
    theme,
    ...
  })
</script>

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i @sjsf/skeleton-theme

Weekly Downloads

1

Version

2.2.0

License

MIT

Unpacked Size

103 kB

Total Files

70

Last publish

Collaborators

  • x0k