Colored - An extension to color elements based on tag colors. 🛠️

ram0ng1

🚀 Colored

An extension to color elements based on tag colors.

Colored is an extension that allows you to customize your Flarum forum's color schemes easily and intuitively. While it's still in beta, it's fully functional and ready for you to try out.

Note 🛠️

This extension is still a Work In Progress (WIP), so some things may behave unexpectedly. However, everything should work as intended. Your feedback is invaluable as I continue to refine and improve it. 🚧

Demo

Feature:

Colors based on tags
Activate and see it working

Useful Links:

Give it a try and let me know what you think! I'm open to feedback and suggestions to improve the extension.

Installation

composer require ramon/colored

Styling 💎

The extension looks great with the Asirem theme! Check it out here: Asirem Theme

Thanks for your support and happy customizing!

ram0ng1

I tested on two forums: one with version 1.7.1 and the other with 1.8.1

tolgaaaltas

Great extension! I love it!

ScreamingFoxGames

Thank you and great work! I really like this, really adds a lot 🙂

Q: Can I somehow get a reference for the current color? (in CSS)

ram0ng1

ScreamingFoxGames Q: Can I somehow get a reference for the current color? (in CSS)

In this case, everything is handled by JavaScript… I am studying the best way to apply it to CSS (similar to dark mode)

ram0ng1/coloredblob/main/js/src/forum/index.js

flavour1

I have an css issue - when using untagged discussions - like in my case the privte discussions (Byōbu), which have no explicit tag-color, the highlight color is either too light or too dark to read. Simple Links appear to be almost unreadable.
e.g. in dark-mode:

 Style Attribute {
--link-color: rgb(27, 34, 40);
--primary-color: rgb(27, 34, 40);
}

interfering with

:root {
--body-bg: #141a1f;

So I assume this is something with the "--primary-color:" css

This also affects Mobile tab Extension icons when using untagged discussions. When selecting the "Tags" or "Notifications" menu item, it will render the css color in an inadequate contrast.

.MobileTab-items a[active="true"] {
    color: var(--primary-color);

Anyone else experiencing this issue and any possible solutions?

ram0ng1

flavour1 I have an css issue - when using untagged discussions - like in my case the privte discussions (Byōbu), which have no explicit tag-color, the highlight color is either too light or too dark to read. Simple Links appear to be almost unreadable.
e.g. in dark-mode:

Oh, I’ll try to fix a patch for the mentioned extension… 😊

flavour1

Thank you for the response, Ramon.

I'm not very good with css, but I assume the issue is somehow related to the "primary-color" class, as this one seems to affect both the color of the links and the icons in the MobileTab extension.

Your efforts on the Colored extension are much apprechiated - I think its an absoluetely elegant and smart approach to spice up the flarum UI - kudos!

ram0ng1

flavour1 I'm not very good with css, but I assume the issue is somehow related to the "primary-color" class, as this one seems to affect both the color of the links and the icons in the MobileTab extension.

Actually, this extension was initially developed based on my own forum. Since I don't use the dark mode or other extensions (like the mobile tab), I didn't encounter any issues.

However, now that I've released it to a broader audience, it's my responsibility to ensure compatibility with other modes and extensions 😆.
Rest assured, I will soon release an update along with a more stable version.

Thank you for providing feedback on this. 😉

ernestdefoe

@Subarist shared this code with me to get rid of the color at the top of the screen hope it helps others as it helped me. Just add this to your custom CSS. Thank you for that bit of code. That was the only thing about this extension that bugged me.

header#header {border-top: none !important;}

flavour1

Dear Ramon,
hope, you are doing well and wish you all the best for 2025.

just kindly wanted to ask, if you had any chance to work on the extension in order to make it compatible with night mode and private discussions (untagged discussions) - i think it is about the style attributes

Style Attribute {
--link-color: rgb(27, 34, 40);
--primary-color: rgb(27, 34, 40);
}

interfering with

:root {
--body-bg: #141a1f;

or does anyone maybe has a hint on how to fix that via the custom css configuration?

ram0ng1

flavour1 Hello @flavour1 😉

Wishing you an excellent 2025!
I'm planning a launch in the next few days with some new features. I hope not to be too late 😃

Regarding the night mode, I'm making some adjustments and will have a solution soon.

flavour1

ram0ng1 thank you for your reply and for working on it - this is great news! looking forward to use the Colored extension soon!

ram0ng1

flavour1

📌 | Version

🔧 | Installation

To install the Colored extension, run the following command in your terminal from the root directory of your Flarum:

composer require ramon/colored

After installation, clear the cache with:

php flarum cache:clear

🆕 | Updating

To update the extension to the latest version, use:

composer update ramon/colored
php flarum cache:clear

⚙️ | Configuration

After installation, go to the Flarum admin panel and adjust the configuration options. You can:

Define which elements will be colored.
Configure the speed of color transitions.

🛠️ | Features

Apply colors to interface elements based on primary tags.
Support for headers, buttons, user cards, posts, alerts, and dropdown menus.
Customize the speed of color transitions.
Automatically revert to default colors when leaving the discussion page.
Fix darkmode 😃

🖇️ | Contribute

If you encounter issues or want to suggest improvements, contribute through:

GitHub Repository
Report issues and suggestions: Open an issue
Donate for me

flavour1

ram0ng1 this is simply awesome! such an elegant way to spice up the forum design, thank you!