Styling not being applied to toast when using custom theme

[X86-7]

When using a theme produced by the theme generator, the style isn't being applied to the toast and is only showing bare bone elements.

Here is my reshaped.config.js:

const { generateThemeColors } = require("reshaped/themes");

const config = {
  themes: {
    hilltopadmin: {
      color: generateThemeColors({ primary: "#e6c961" }),
    },
  },
};

module.exports = config;

Everything else has the proper styles applied to it. I am trying to apply the critical token to the toast and it shows up without any styling.

A photo is attached.

[blvdmitry]

Seems to be working for me with your theme configuration:

Let's compare our setup.

1. I've copied your theme configuration and built it with CLI to get a CSS output. I kept the name plain since that's the theme I had in my repository, it can be any name.

const { generateThemeColors } = require("reshaped/themes");

// @ts-check
/** @type {import('reshaped').ReshapedConfig} */
const config = {
  themes: {
    plain: {
      color: generateThemeColors({ primary: "#e6c961" }),
    },
  },
};

module.exports = config;

In the root App component, I import the theme and set it on the provider:

import "./themes/plain/theme.css";

function App() {
  return (
    <Reshaped theme="plain" >
      <AppInner />
    </Reshaped>
  );
}

In my chat field, I'm calling the toast on button click:

const ChatField = () => {
  const toast = useToast();

  return (
    <Button 
      color="primary" 
      icon={IconReply} 
      onClick={() => toast.show({ text: 'Something went wrong', color: 'critical', position: 'top' })}
    >
      Send to chat
    </Button>

Anything stands out for you?

[X86-7]

Hey, my bad! Meant to respond earlier!

You know what, interestingly enough, by wrapping the entire root app component, that fixed it. I was originally wrapping each individual component. Not sure why that would cause a difference, but nevertheless, we're good. Thank you!