Theming individual toast icons

[RatulMaharaj]

Hi @kbrgl

This library is 🔥, so let me start by saying thanks!

I've been trying to figure out how to change the colours of the icons that come bundled with svelte-french-toast, I really like them but wanted to tweak them ever so slightly to be a bit more consistent with the rest of my app.

The website does show how to do this, but if you follow that approach, it results in both the toast.success and toast.error having the same colour.

By reading some of the source, I realised it's possible to do this as well:

<script lang="ts">
	import { Toaster, type ToastOptions } from 'svelte-french-toast';
	const toastOptions = {
		style: `background-color: oklch(var(--color-dark-300)); color: oklch(100% 0 0); font-size: 0.875rem;`,
		error: {
                        // also possible to declare style here
			iconTheme: {
				primary: `oklch(var(--color-error-200))`,
				secondary: `oklch(100% 0 0)`
			}
		},
		success: {
			iconTheme: {
				primary: `oklch(var(--color-success-200))`,
				secondary: `oklch(100% 0 0)`
			}
		}
	} as ToastOptions;
</script>

<Toaster {toastOptions} />

Took me a a little while to figure this out so I thought I would post this here for anyone else who may be trying to achieve the same thing.

[H1Mohamed]

Hello!
thank you very much for posting this post to help other, But I have a question regarding this approach, can I use tailwind CSS variables to style the colors? or do I have to include the colors in my self
and thanks in advance

[RatulMaharaj]

Hi @H1Mohamed

You should be able to use any css variables (including the tailwind ones). I'm using Daisy UI, which is built on top of tailwind and this seems to work fine for me. Here are my toastOptions:

const toastOptions = {
  className: `!bg-base-200 !text-base-content !text-sm`,
  error: {
    iconTheme: {
      primary: `oklch(var(--er))`,
      secondary: `oklch(var(--erc))`,
    },
  },
  success: {
    iconTheme: {
      primary: `oklch(var(--su))`,
      secondary: `oklch(var(--succ))`,
    },
  },
};

[RatulMaharaj]

After looking into it, it seems that tailwind does not create variables for each default colour.

So unless you're using a framework like daisyui or something similar that exposes it's colors as variables, you will have to create them yourself.

[H1Mohamed]

Thank you very much for your help!