Change color of personal messages

Customization Theme component

AI-generated summary

The discussion revolves around the theme component “Change color of personal messages” created by oca. The component changes the appearance of the page when a personal message is being read, including the head banner color, font color, background color, and title color. However, users have pointed out some limitations, such as the inability to use HEX color codes and the component’s incompatibility with existing themes.

Johani suggested adding "component": true to the about.json file to convert the theme to a theme component, making it compatible with existing themes. oca implemented this change.

Users also requested the ability to use HEX color codes, and oca considered adding it as a component parameter.

However, oca later mentioned that there might be a better way to achieve this, and recommended using the “Personal Message Bubbles” feature, which has been added to the core. JammyDodger questioned whether the original component still works with the core feature.

1

For some time I borrowed @ChrisBeach’s CSS snippet, so I converted it into a theme component, find the result here:

What it does

It changes the appearance of the page when a personal message is being read:

  • the head banner color (with a gradient),
  • the font color,
  • the background color,
  • the title color,
  • by adding some text after reply.

All these changes are optional and can be toggled with their on/off setting. The main «personal messages» color can also be changed with a setting. To tweak the different colors, edit the top part of the CSS file.

18 Likes
How to simplify DM's to individuals
Reply and PM should be siblings
Private vs Public space
Change "Reply" text independently for public topics and PMs
Change highlight color of selected CHAT message block
2019: The Year in Review
Isn’t it kind of hard to figure out that there is a mail/messaging system?
2

Thank you, @oca!

I’ve found that this only works with color names, not Hex color codes. This makes it tricky to match to a colour palate. From looking at the CSS and the way colours are mixed, I’m guessing it wouldn’t be very easy to change this. Can anyone prove me wrong?

2 Likes
3

It appears that this is a Theme and not a Theme “Component” but please correct me if I’m wrong.

I’m already using a Theme that I’ve completely customized, and only one theme can be used at a time, and you can allow users to toggle from one theme to another… is that right?

It’s my understanding that theme COMPONENTS allow you to apply the component to your active/main/default theme. At least this is how the other theme components seem to work for me. In the theme Components, there’s a box that says " Include component on these themes" which allows you to apply the component to your default theme.

Would it be possible to turn this into a component so I can keep my main/defualt theme active, while enability these customizations for the personal messages or DMs/PMs ?

2 Likes
4

I remember sending PRs to all the theme components we have here on Meta when we made the change that differentiates between themes and theme components.

I think this one slipped through the cracks because it was a reply to some other topic and has since been moved to its own topic in the Customization > Theme category.

@oca You only need to add one line to this “theme” to make it function as a theme component. You need to add

"component": true

to the about.json file of your component like so

{
  "name": "Private messages with color",
  "about_url": "https://framagit.org/oca/discourse-theme-colored-private-messages   ",
  "license_url": "https://framagit.org/oca/discourse-theme-colored-private-messages/blob/master/LICENSE",
+ "component": true,
   "assets": {
        "asset-variable": "assets/background.svg"
   }
}

Once you do that, it should work just like any other component and we can then add the theme-component tag to this topic.

6 Likes
5

In the meantime @Rhidian taught me a new trick that you can convert a theme to a component or vise versa, using the “Convert” button…

2 Likes
6

I would also love to see the ability to use a HEX code here!

3 Likes
8

Done !
Thanks for the tips.

5 Likes
9

I’ll have a look.
It could be worth adding that as a component parameter now that we can do that.
Can’t promise anything, i’m still learning that stuff.

6 Likes
10

Nice :+1:

I’ve added the tag to this topic. When you get a chance, can you please add a screenshot or two to the OP in this topic? No rush, but it makes it easier to see the changes this component makes.

6 Likes
12

I think the issue is that there’s an extra comma at the end of about.json

Screen Shot 2020-05-11 at 9.29.37 PM
Screen Shot 2020-05-11 at 9.29.37 PM184×136 5.53 KB

6 Likes
13

Thanks for that !

But no thanks for those who built the json norm…

4 Likes
14

Is this still the way to go for changing the colour of DMs/PMs?

2 Likes
15

I think it can be done in a better way.
I’ve used Personal Message Bubbles for some time instead, but it has been added as core feature.

1 Like
16

Does that component still work okay now the personal message bubbles are in core? I think someone had some conflicts a little while back Personal Message Bubbles - #93 by AntiMetaman

3 Likes