-
Notifications
You must be signed in to change notification settings - Fork 18
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Documentation for custom styles #5
Comments
For anyone looking, we figured out a way:
This will work if your app supports scss. You should compile this to |
@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; |
What's your issue with styling these items?? |
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.
|
I was also trying to update the icon of the send button, but couldn't find a way |
@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
|
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! |
Using this approach, I manage to change some of the variables (i.e. the default font family), but only if i replace |
@axelferdinand Please share the code (e.g. your _chat-overrides.scss ), how do you override values? |
@supersnager Sure!
|
Try to remove !default in Change this: $color-primary: #000 !default;
$color-primary-light: #FFF !default;
$color-primary-dark: #000 !default;
$color-primary-dark: #000 !default; to this: $color-primary: #000;
$color-primary-light: #FFF;
$color-primary-dark: #000;
$color-primary-dark: #000; |
@supersnager I tried that, but it didn't work, unfortunately. My console says this:
...but the colors (or other variables) doesn't update. This is the only thing that will update:
|
@axelferdinand I think I have found the source of the problem. Try to remove the following line from the import styles from "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css"; and remove <main className={styles.main}> Your example is not working because you import @import "./chat-overrides";
@import "../../../node_modules/@chatscope/chat-ui-kit-styles/themes/default/main"; and next you import After importing BTW in the @chatscope/chat-ui-kit-styles/dist/default/styles.min.css there is no "main" class. |
@supersnager That did indeed work!! Thank you so much!! |
Hello I was wondering if there is any way possible to style the chat-ui-kit using the tailwind? I tried with the MainContainer, ChatContainer, MessageList and it worked... However when I tried to style the MessageInput and the MessageSeperator using tailwind I couldn't... so I was wondering if you can help me with that please? |
@dolce-emmy What exactly do you want to do? |
I want dark theme |
Me too. It'd be nice to just add a dark mode functionality in the kit itself |
Any updated guide on how to change the style? |
Just take these classnames to your styles.css and change accordingly. This overrides the default styles. div .cs-message-list__typing-indicator-container div { div .cs-main-container, div .cs-message--incoming .cs-message__content, div .cs-message-input__content-editor, div .cs-message--outgoing .cs-message__content { div .cs-typing-indicator__dot { |
Must do all this to over-ride the default styles. chatscope/chat-ui-kit-styles#5
In your chat component:
|
I would love to see some documentations on how to stylized the different components (eg. colors, fonts, change of icons, etc)
The text was updated successfully, but these errors were encountered: