Chat look customization

I’m trying to customize the new chat window (full screen mode) on desktop.

I have the css I’d like to use, but I can’t figure out where to put it in my theme to have it take effect.

I’ve tried …


None of those seem to override the default css.

For completeness, here’s the css I’m trying to inject.

// Adjust full screen chat appearance

.full-page-chat .chat-full-page-header {
	background: var(--primary-very-low);

.full-page-chat .chat-full-page-header {
	border-top: 0px;

:root {
	--d-max-width: 2000px;

.has-full-page-chat:not(.discourse-sidebar) {
	--max-chat-width: 2000px;

#main-outlet-wrapper {
	padding: 0 0px;
1 Like

Your folder/file name structure is incorrect.

Take a read through: Beginner's guide to developing Discourse Themes


I must be missing something. What is incorrect about it?

This is my folder structure.

1 Like

That’s different to what you shared in the OP:


If you want to name the chat mods as something different, you must reference them in the main file.


Sorry for the confusion. In the OP I was trying to communicate what files I tried making, and the locations in which I placed them. I don’t want to name the chat mode differently, I’m just trying to figure out which scss file I should place the css in to effect only the desktop, full screen mode chat.

1 Like

You can put your CSS in theme/desktop/desktop.scss — to impact chat it doesn’t have to be in a chat-specific file, you just have to target the relevant classes.


You can use @import "chat" or equivalent to import them into your main file.


This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.