Change color of personal messages

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개의 좋아요

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개의 좋아요

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개의 좋아요

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개의 좋아요

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개의 좋아요

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

3개의 좋아요

Done !
Thanks for the tips.

5개의 좋아요

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개의 좋아요

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개의 좋아요

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

6개의 좋아요

Thanks for that !

But no thanks for those who built the json norm…

4개의 좋아요

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

2개의 좋아요

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개의 좋아요

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개의 좋아요