What about an easier styling/theming system?

I like this but I would add MailChimp’s suggested or popular colors as it takes some of the guesswork out:

3 Likes

Perhaps color scheme plugins for those of us who are not artistically or design inclined?

2 Likes

Not a bad idea - I just recently saw http://www.colormoo.com/ on hackernews and was pretty impressed.

3 Likes

You also have https://kuler.adobe.com/ to find colors scheme.

The unfinished color theme UI is available to play with:

The CSS, HTML tab is the existing “Site Customization” stuff. Better name ideas are welcome.

As the warning says, it doesn’t make any changes to the site. Stuff to do next:

  • add a color scheme from a plugin
  • asset pipeline stuff to include the custom colors

Also, what is a “Theme”? I imagine it’s a bundle that includes one (or more, but choose one?) color scheme, and CSS and HTML.

2 Likes

If this means being able to change colors rather than override them I’m all for it! :slight_smile: Nice work thus far!

Override in that context means that it’s different than Discourse’s default theme. What do you mean by change?

For example if I set a link color to red then I’d like the CSS that was defining the link color as blue to be changed to say red, rather than have it define a new css rule which simply overrides the color value (this causes issues with CSS transitions, and is overall just messy and error-prone).

Oh, yeah it changes. ie, It writes the variables with the configured values once.

Don’t forget this, please: https://meta.discourse.org/t/how-do-we-customize-embedded-discourse-css/14617

I start to play with Ghost blog with my dark theme and I also need to custom the embedded css stylesheets. http://blog.onaldan.com/avril-2014-turquie-cappadoce/ (at bottom).

The themer is available to use! Give it a try!

Still to do:

  • support for dark themes
  • embedded css
  • a set of sample color schemes
10 Likes

I think the default button colors should also be settable or adjust automatically for enough contrast between them and the background color. With a light greyish background the buttons disappear.

Definitely a good point… I’ll look at the best way to add that. I’ve just recently submitted this PR

Which detects the difference in lightness between the $primary (text etc,) and $secondary (background, etc) variables and adjusts how scale-color functions (this effects borders and a bunch of other minor elements right now). That’s a pretty simple function… buttons could certainly work in a similar way, as outlined in this article about button text.

4 Likes

Well (lots of use of “color:white;”, mixed with everything else being “color:#XXX”). If we h

Thanks, this, along with some other recent improvements, made Discourse customization easier. :slight_smile:

I was wondering if there were other steps planned to the process in the near future to allow more styling customizations?

(The users of my Discourse installation are asking about a per-user theme selection to allow both a “funky” and a “more-suitable-for-furtive-usage-at-work” theme. I can’t do that for the moment, right, it’s one or the other?)

We don’t have any plans for per-user theme selection at the moment. Something like Stylish may be of use?

There are versions for both Firefox and Chrome.

1 Like

Thank you - I think most of my users will find a browser plugin to be too cumbersome, but I’ll mention it anyway.

I think we will try to have our resident UX artist create a theme that would meet the needs of most of our userbase.
Are there plans for a Discourse theme repository?

Is it possible to set these values from a plugin yet? That would make this a lot more useful and powerful.

As a suggestion, you should be able to change fonts as well. Preferably from google fonts to make it simple.

Yes, it is possible! Here’s an example of how to do that in a plugin.rb:

register_color_scheme 'Purples', {
  primary: 'EEE0E5',
  secondary: '2E0854',
  tertiary: '4B0082'
}

The names match the ones in the colors.scss file.

2 Likes