Skip to content
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

Question: How do I change the color of messages? #6

Open
AymanAliS opened this issue Jul 14, 2023 · 5 comments
Open

Question: How do I change the color of messages? #6

AymanAliS opened this issue Jul 14, 2023 · 5 comments

Comments

@AymanAliS
Copy link

Hi, Love the theme, but right now the messages(not mine) are a dark red/purpely color which I don't like, is there any way to change this. I see that the colors are different in your screenshot when in mine each groupchat has it's own colors instead of varied in one and I would love something like that.

Here are some examples of what I mean

image

image

@Madelena
Copy link
Owner

There is a setting in Beeper that you might need to turn off in the Appearance section:
image

@AymanAliS
Copy link
Author

I tried it and it made every other chat that same redish color

@Madelena
Copy link
Owner

I tried it and it made every other chat that same redish color

When it's redish, it's following the theme color. You can then change the number in this line of code:

--metrology-hue: 335; /* Enter values between 0 and 359 to change the color of the theme. */

@zvux
Copy link

zvux commented Aug 15, 2024

@AymanAliS

found the fix after looking at much simpler, less complicated themes unlike this metrology one.
add the following snippet at the top of the css file just after :root {

    --metrology-my-bubble-color: #YOURCOLOR;
    --chatview__message_self__backgroundcolor: var(--metrology-my-bubble-color);
    --metrology-their-bubble-color: #YOURCOLOR;
    --chatview__message_tail__color: var(--metrology-their-bubble-color);
    --chatview__message__backgroundcolor: var(--metrology-their-bubble-color);  
    --metrology-chat-background-color: #YOURCOLOR;
    --chatview__backgroundcolor: var(--metrology-chat-background-color);
    --theme-chat-background-image: #YOURCOLOR;
    --chatview__backgroundimage: var(--metrology-chat-background-image);

replace #YOURCOLOR with your color of choice
my-bubble-color is the color of the bubble from your side, and their-bubble-color is the color of the bubble from their side, and in case you want to change the background of the chat screens, you can put a color or an image in there in the theme-chat-background-image variable.

cheers;

@zvux
Copy link

zvux commented Aug 15, 2024

@Madelena i feel like you can close this one now

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants