Document colors without Svelte UX

[techniq]

Provide examples to specifying Tailwind colors (or mapping to existing theme colors with other frameworks).

Would be nice to provide integration examples for:

Skeleton

Skeleton

tailwind.config.ts

export default {
  theme: {
    extend: {
      colors: {
        'surface-100': 'rgb(var(--theme-color-surface-100) / <alpha-value>)',
        'surface-200': 'rgb(var(--theme-color-surface-200) / <alpha-value>)',
        'surface-300': 'rgb(var(--theme-color-surface-300) / <alpha-value>)',
        'surface-content': 'rgb(var(--theme-color-surface-content) / <alpha-value>)',
      }
    },
  },
};

app.postcss (or anywhere to define CSS)

/* `:root` doesn't work as needs to be a descendant of `:root` where Skeleton defined `--color-*`  */
body {
  --theme-color-surface-100: var(--color-surface-50);
  --theme-color-surface-200: var(--color-surface-100);
  --theme-color-surface-300: var(--color-surface-200);
  --theme-color-surface-content: var(--theme-font-color-base);

  html.dark & {
    --theme-color-surface-100: var(--color-surface-700);
    --theme-color-surface-200: var(--color-surface-800);
    --theme-color-surface-300: var(--color-surface-900);
    --theme-color-surface-content: var(--theme-font-color-dark);
  }
}

shadcn-svelte

TODO

flowbite

TODO

Tailwind only

TODO

CSS only

TODO

[techniq]

Skeleton

tailwind.config.ts

export default {
  theme: {
    extend: {
      colors: {
        'surface-100': 'rgb(var(--theme-color-surface-100) / <alpha-value>)',
        'surface-200': 'rgb(var(--theme-color-surface-200) / <alpha-value>)',
        'surface-300': 'rgb(var(--theme-color-surface-300) / <alpha-value>)',
        'surface-content': 'rgb(var(--theme-color-surface-content) / <alpha-value>)',
      }
    },
  },
};

app.postcss (or anywhere to define CSS)

/* `:root` doesn't work as needs to be a descendant of `:root` where Skeleton defined `--color-*`  */
body {
  --theme-color-surface-100: var(--color-surface-50);
  --theme-color-surface-200: var(--color-surface-100);
  --theme-color-surface-300: var(--color-surface-200);
  --theme-color-surface-content: var(--theme-font-color-base);

  html.dark & {
    --theme-color-surface-100: var(--color-surface-700);
    --theme-color-surface-200: var(--color-surface-800);
    --theme-color-surface-300: var(--color-surface-900);
    --theme-color-surface-content: var(--theme-font-color-dark);
  }
}

[x4080]

Hi I'm using daisyui and I added it in my .css

@media (prefers-color-scheme: dark) {
	:root {
		--customTextColor: white;
		--primaryTextColor: #ff5757;
		--softTextColor: rgba(156, 163, 175, 1);
		--softLineColor: rgba(156, 163, 175, 0.4);
		--screenBgColor: rgba(70, 70, 70, 0.5);
		--errorBgColor: darkred;
		--bgbase200: #2a2e37;
		--scrollBarColor: rgba(86, 93, 105, 1);
		--bgbase100: #3d4451;
		--bgaccent: #078d7e;
		/* layerchart */
		--theme-color-surface-100: #2a2e37;
		--theme-color-surface-200: #2a2e37;
		--theme-color-surface-300: #2a2e37;
		--theme-color-surface-content: white;
	}
}

But it seems nothing changes (using the bar chart example), when I set to light theme, colors is black and white, but using dark theme all is still black and white (nothing changes)

Is there something I missed ?

Thanks

[techniq]

Hi @x4080 👋, a few thoughts:

You need to have at least the following Tailwind colors defined

• surface-100
• surface-200
• surface-300
• surface-content

You can define them without CSS variables (just set to #2a2e37, etc), but if you decide to use CSS variables, they must be defined as colors channels separated by spaces (ex. R G B as 42 62 55 or H S L as 39 19.2 20.4) and then reference the the colors in the tailwind config with the applicable color function (rgb(...), hsl(...), etc). Ultimately follow the Tailwind Using CSS Variables guide.

Daisy UI usually sets colors in the OKLCH color space. They also have similar variables as Svelte UX / LayerChart's variables/tokens (they were a big source of inspiration). You should be able to map base-100, base-200, base-300, and base-content variables to the applicable surface-* variable.

Something like this should work (but untested, and might need some refinement):

export default {
  theme: {
    extend: {
      colors: {
        'surface-100': 'oklch(var(--b1) / <alpha-value>)',
        'surface-200': 'oklch(var(--b2) / <alpha-value>)',
        'surface-300': 'oklch(var(--b3) / <alpha-value>)',
        'surface-content': 'oklch(var(--bc) / <alpha-value>)',
      }
    },
  },
};

Let me know if that helps get you going. If you can setup a repo with Daisy UI and LayerChart, I could investigate it further.

[x4080]

Thanks for quick answer, I'll try it with

surface-100
surface-200
surface-300
surface-content