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

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!

huseyinfiliz

@ram0ng1 Your extension was adding the color #536f90 to the <html> element as the primary color. It looks like this happens when the extension cannot detect a primary color attribute, and in that case the hardcoded fallback is applied.

However, I think using a hardcoded color value might not be ideal. In cases where the forum’s own primary color can't be detected (which normally shouldn’t happen), applying a fixed color can lead to inconsistent or unexpected styling across different themes or custom setups.

I believe a safer approach would be to avoid injecting a fallback color at all, or to rely on Flarum’s default variables instead of a custom hardcoded value. This would make the extension more compatible with customized themes and prevent visual conflicts.

Just wanted to share this in case it helps improve the extension. Thank you for your work!

ram0ng1

huseyinfiliz

I'll change that approach soon!

I just haven't had time to dedicate myself to flarum again...

Tutrix

Hi @ram0ng1, it would be great if you could add a border-left, e.g., 4px based on tag colors or tag-id=“xx” to the discussion list so that the border could be added via CSS.
Example:

ernestdefoe

Tutrix that would actually be pretty cool.

Tutrix

@ram0ng1 As I see on your page, you are working on it. 🙂

<div class="DiscussionListItem" style="--tag-color: #099525;">

so I just need to add this CSS

.DiscussionListItem { border-left: 4px solid var(--tag-color); }

ram0ng1

Tutrix As I see on your page, you are working on it. 🙂

It can also be used var(--primary-color, #d42a5b) on any element within the discussion to change to the primary tag color.
I've been gradually updating my installation with some new features... I just haven't had time to test and publish them yet.

I'm still studying a better way to make it revert to the default color defined in the settings so as not to cause problems with most extensions.

Could you help me and tell me which extensions you are experiencing the most problems with?

ram0ng1

Tutrix As I see on your page, you are working on it. 🙂

this is for the theme Asirem

Tutrix

ram0ng1 this is for the theme Asirem

Thanks for the info.
I don't use the Asirem theme, it's also marked as abandoned.

ram0ng1 Could you help me and tell me which extensions you are experiencing the most problems with?

I'm not using Colored at the moment.
I'd just like to have the borders in the discussion list.

ram0ng1

Tutrix Obrigado pela informação. Eu não uso o tema Asirem, também está marcado como abandonado.

Tutrix

ram0ng1
Yes, that's how I would like it. 😉
Is that now integrated into Colored?

ram0ng1

Tutrix Yes, that's how I would like it. 😉
Is that now integrated into Colored?

I'm getting ready to change now 😃