Home | Morfeo

Features

Web extension

🌞 🌑

Multi theming

🕍 ⛪ 🕋

Framework agnostic

🧘

Single source of truth

🧩

Extendible

CLI

How it works?

{
  "colors": {
    "primary": "#0066ff",
    "secondary": "#db2494"
  },
  "radii": {
    "s": "12px"
  }
}

set your theme

{
  "bg": "secondary",
  "color": "primary",
  "corner": "s"
}

create styles based on the theme

{
  "backgroundColor": "#db2494",
  "color": "#0066ff",
  "borderRadius": "12px"
}

Morfeo will generate a valid CSS-in-JS

Try it now!

This is a React example but Morfeo can be used everywhere

Live Editor

function Button() {
  const { cardClass, buttonClass } = useClassNames({
    cardClass: {
      componentName: 'Card',
      variant: 'hoverable',
      p: 'm',
    },
    buttonClass: {
      componentName: 'Button',
      variant: 'primary',
    }
  });
  const [currentTheme, setCurrentTheme] = useCurrentTheme();

  const onClick = () => {
    setCurrentTheme(currentTheme === 'light' ? 'dark' : 'light')
  }

  return (
    <div className={cardClass}>
      It's that easy...
      <button className={buttonClass} onClick={onClick}>
        Toggle theme
      </button>
    </div>
  )
}

function Button() {
  const { cardClass, buttonClass } = useClassNames({
    cardClass: {
      componentName: 'Card',
      variant: 'hoverable',
      p: 'm',
    },
    buttonClass: {
      componentName: 'Button',
      variant: 'primary',
    }
  });
  const [currentTheme, setCurrentTheme] = useCurrentTheme();

  const onClick = () => {
    setCurrentTheme(currentTheme === 'light' ? 'dark' : 'light')
  }

  return (
    <div className={cardClass}>
      It's that easy...
      <button className={buttonClass} onClick={onClick}>
        Toggle theme
      </button>
    </div>
  )
}

Result