Documentation for custom styles

[chloe-schoreisz]

I would love to see some documentations on how to stylized the different components (eg. colors, fonts, change of icons, etc)

[chloe-schoreisz]

For anyone looking, we figured out a way:
We created our own main.scss file, that looks like this:

@charset "utf-8";
@import "./variables";
@import "./helpers/mixins";
@import "./helpers/functions";
@import "@chatscope/chat-ui-kit-styles/themes/default/main.scss";

• mixins and functions are copy pasted from @chatscope/chat-ui-kit-styles/themes/helpers/mixins and @chatscope/chat-ui-kit-styles/themes/helpers/functions.
• variables is initially copy pasted from @chatscope/chat-ui-kit-styles/themes/variables, and then updated with the appropriate colors for the different component (keeping the !default for the color variables)
• We then imported the main.scss into our app (we're using nextjs, which supports scss direct imports)
  ⚠️ I'm still getting issues for stylizing the send button and the input box.

This will work if your app supports scss. You should compile this to css if it doesn't.

[supersnager]

@chloe-schoreisz Thank you for your explanation. It's awesome that somebody helps me maintaining the project :)

And here is the solution that I use in my projects based on Create React App.

Assuming your app supports scss (e.g. CRA, NEXTjs).

project_root/src/themes/default/_chat-overrides.scss:

/* The path depends on the current location of the scss file */
@import "../../../node_modules/@chatscope/chat-ui-kit-styles/themes/default/variables";

// Here you can override variables from the imported file above. Check its source for a list of available variables
$main-container-border: 0;
$color-text: red;
$conversation-color: pink;

// ... and so on 

project_root/src/themes/default/main.scss:

@charset "utf-8";
@import "./chat-overrides";
@import "../../../node_modules/@chatscope/chat-ui-kit-styles/themes/default/main";

// ... any other imports 

project_root/src/App.js:

import './themes/default/main.scss';
import MyApp from "./MyApp"

function App() {
 return (<MyApp />);
}
export default App;

[supersnager]

@chloe-schoreisz

I'm still getting issues for stylizing the send button and the input box

What's your issue with styling these items??

[chloe-schoreisz]

I was trying to obtain a specific color for the SendButton through the custom scss file. I could not change it from there, and I tried all the variables. The only way I was able to change the color was by implementing my own CustomMessageInput, and hardcode the color in the styling.

// CustomMessageInput.tsx

                         <MessageInput
				ref={...}
				onSend={sendMessage}
				onChange={(_: string, textContent: string) => {
					setMessageInputValue(textContent);
				}}
				value={messageInputValue}
				sendButton={false}
				attachButton={false}
			/>
			<SendButton
				onClick={() => sendMessage(messageInputValue)}
				style={{
					color: '#0C3276',
					backgroundColor: '#C7FED2',
					width: '48px',
					height: '45px'
					
				}}
			/>

[chloe-schoreisz]

I was also trying to update the icon of the send button, but couldn't find a way

[supersnager]

@chloe-schoreisz Your solution is fine, especially when there is a need to make more changes than simply color change.

However, the send button color should be changeable by overriding $send-button-color variable

chat-ui-kit-styles/themes/default/_variables.scss

Line 180 in 6823363

$button-send-color: $button-color;

but now I see there is a bug 😅 (missing !default) I will fix fixed it in here: #8

[sh1ggy]

Just gave this a try in NextJS with my own project and ran into some issues with the styles not applying despite following the instructions that @supersnager laid out so thought it would be good to share here. The import of the variables.scss file in your custom.scss styles should be happening after your actual custom variables are assigned. We referred to this article to figure this out. Unfortunately, we weren't able to get modular styles to work (in attempts to follow NextJS conventions), having to import and apply the styles globally on _app.tsx.

$color-text: red;

@import "../../../node_modules/@chatscope/chat-ui-kit-styles/themes/default/variables";
@import "../../../node_modules/@chatscope/chat-ui-kit-styles/themes/default/main";

Not sure if this is a quirk of NextJS, but would be interested to know. Thank you!

[axelferdinand]

/* The path depends on the current location of the scss file */
@import "../../../node_modules/@chatscope/chat-ui-kit-styles/themes/default/variables";

// Here you can override variables from the imported file above. Check its source for a list of available variables
$main-container-border: 0;
$color-text: red;
$conversation-color: pink;

Using this approach, I manage to change some of the variables (i.e. the default font family), but only if i replace !default with !important, and that's not possible with all variables (i.e. the color variables – they throw an error if I use !important – do you know a way around?