よりスムーズなカラーパレット編集

お知らせ
1

Meet the next evolution in the management of your community branding — a redesigned interface for creating and editing color palettes!

This update builds upon our recent color palette management improvements and enhanced dark and light mode handling, providing admins with an even smoother way to customize their site’s appearance.

:sparkles: What’s new?

The new color palette interface seamlessly integrates with the overall admin design system, delivering a cohesive experience that makes palette management both powerful and approachable.

The new color palette editing interface.
The new color palette editing interface.1540×2029 286 KB

The new interface includes:

  • Integrated design that matches the modern admin interface aesthetic.

  • Clear naming to make sure you know how each color is applied.

  • Smoother workflow for creating new palettes or modifying existing ones.

  • Default palette controls right from the editing interface, for both light and dark modes.

When creating a new palette, you can now see a visual preview of the base palette before you select it:

Previews for base palettes.
Previews for base palettes.1214×790 44.5 KB

This matches the previews that are now also available in other areas where you select colour palettes - on the palette list page, in user preferences, and in theme settings.

:rocket: How to access the new interface

The new colour palette UI is available now for all Discourse sites! You can access it by:

  1. Going to Admin → Appearance → Color palettes

  2. Clicking Edit on any existing palette, or the New button to create a new palette.

This latest update represents our ongoing commitment to providing admins with powerful, user-friendly tools for customizing the appearance of their Discourse communities.

The enhanced interface makes it easier than ever to create beautiful, branded experiences for your members while maintaining the flexibility and control you need.

Have questions or feedback about the new interface? We’d love to hear from you in the replies below!

「いいね！」 13
2

Would it be possible to allow finer color settings? There are lots of calculations to get subtle shades of the entered color codes and not all of them work great for some scenarios. I would normally do it in custom CSS but I set up Horizon theme and it has no way to edit CSS. So I realized it anyway belongs to the color palette setting.

Actually the best would be to add a custom CSS option in here (obviously one would only play with colors) and to also allow Horizon to edit color palette CSS.

3

You can add a custom component to Horizon where you add your custom css.

「いいね！」 1
4

That sounds great! Thanks for an idea.

BUT my point here was more general (not just Horizon). If the Color palettes feature is supposed to allow people switching color schemes as they wish, custom CSS would not help a lot. The custom CSS would have to be assigned to each color palette. From the architecture perspective.

5

Could you give some more context for what kind of things you want to do with finer colour settings? That would help see if there’s something we could improve in the palette UI, or if custom CSS is the best solution.

6

Currently my issue is with the tertiary color. Let’s say the color of my choice is #f7b618. It’s a light yellow and I want to see it somewhere. Having it as a button color looks great but button texts are white. But if I set a button text it changes other colors. I guess the problem is that you just suppose I select a dark color so the button texts will be light.

Also all kinds of shades are calculated by the tertiary color. E.g. sidebar background (still talking about Horizon theme). And I might want to choose other color for that (altogether, e.g. just grey).

So whenever I am a little bit picky about the colors AND I want to let the user select a color palette (which I agree might be a little contradictory) I might use a color palette based custom CSS.

Another option could be some Advanced mode where you would allow to assign ANY color variables. Not just those 12 main ones. So then you would stop calculating and let me adjust all the colors by hand but still using UI.

7

I think the advanced mode is kind of covered by the repository approach in Create and share a color scheme

I think you can use Targetable Color Schemes to overwrite something only for one color palette

「いいね！」 2
8

I see, I found more details in Reference for full color customization. It even shows them in the UI! Terrific. Thanks!

「いいね！」 2
9

It sounds like you have things sorted. Custom CSS combined with the Targetable Color Schemes component is a powerful combination, and adding additional color fields is also very useful.