Change color of personal messages

Theme component
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
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 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

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?

1 Like
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