允许用户选择新的调色板

:bookmark: 本指南介绍如何为所有用户提供新的颜色方案以供他们在个人资料偏好设置中选择。

:person_raising_hand: 所需用户级别:管理员

包含新的颜色方案

  1. 前往 管理外观颜色方案
  2. 点击 \text{+ 新建} 按钮创建一个新的颜色方案
  3. 从列表中选择首选的基础颜色方案
  4. 勾选 用户可以选择颜色方案 选项
  5. 根据需要对调色板进行适当调整
  6. 保存颜色方案

选择颜色方案

现在,用户可以在其各自的 https://your-site.com/my/preferences/interface 页面上选择新的颜色方案:

  1. 访问用户偏好设置: 用户可以通过点击论坛右上角的个人资料图标并从下拉菜单中选择“偏好设置”来导航到其偏好设置。
  2. 界面选项卡: 在偏好设置中,“界面”选项卡包含选择浅色和深色模式的颜色方案的设置。
  3. 颜色方案选择: 用户可以从提供的下拉菜单中选择他们首选的颜色方案。
  4. 界面颜色模式: 用户还可以选择他们首选的界面颜色模式——自动(遵循系统偏好设置)、浅色或深色。
  5. 保存更改: 选择所需的颜色方案后,用户需要点击页面底部的“保存更改”按钮以应用更改。

深色模式

默认情况下,Discourse 中已经定义了 Dark、WCAG Light、WCAG Dark、Dracula、Solarized Light 和 Solarized Dark 作为颜色方案。

附加资源

37 个赞

Great work! Simple to understand how to compose themes together quite nicely – I’m going to play around with themes soon, for sure!

Bit o’ feedback on this:

I’m seeing that there’s an option to import themes directly - What’s the structure that import-able themes should take? A repository with the .dcstyle.json file(s) at the root? It’s not clear, and the placeholder value – https://github.com/discourse/discourse/sample_theme - doesn’t lend any clues.

It also seems that exporting themes got a little more difficult as you can’t just export a theme with a single click if that theme is dependent on child themes. I understand why this might need to be this way, but I’m concerned about portability of themes with the added inheritance - will there be a way to export the theme as a bundle with all child themes attached as well?

2 个赞

You can read about that here:

5 个赞

We are going to ship both dark and light themes by default out of the box, yes? That’s my goal here. We also need:

  • small font
  • large font

themes to ship natively as well.

8 个赞

This is fabulous. :rocket: Thanks for adding this feature and for writing up this howto. Can you add instructions for specifying a different logo for the dark theme? That will be a common request I am sure.

11 个赞

Yup, this is the primary (only?) blocker for this. I see that Meta is switching logos, or applying some kind of shadow.

This is actually pretty simple:

old method
.logo-big {
    display: block;
    -moz-box-sizing: border-box;
     box-sizing: border-box;
     background: url(awesome-dark-logo.png) no-repeat;
     width: 150px; 
     height: 40px; 
     padding-left: 150px; 
     background-size: 150px 40px;
}

You basically evict the existing image out of the IMG tag

13 个赞

Setting up a dark theme made me inquire into where this grey background colour comes from:

I do not have any black in my colour scheme so I suppose that the grey is calculated as a lighter version of the complementary colour of the primary colour (white, in my case).

While I can see the reasoning behind it, it doesn’t really work if your black theme is using anything outside the black/grey spectrum as secondary colour. Perhaps it’s a matter of taste, but I’d probably prefer that navigation button background colour (or whatever it’s called) to be based on the secondary colour.

I am not saying that every colour should be chosen manually (discourse is generally doing a great job in calculating colours - mainly shades and tints, I believe - based on the few customizable ones) but this particular formula seems a bit too constraining.

Perhaps it can be solved with a single switch that allows the user to switch the color base between primary and secondary colour?

Use secondary colour as base for button backgrounds

2 个赞

@tophee, I think the derivative colors make it really easy to use. For advanced color schemes you have to use advanced features—specifically custom CSS in this case. That seems like a logical ask to me.

Awesome. This makes browsing the discourse at night so much easier on the eyes, even with the new Windows 10 “night mode” the light theme is pretty bright.

Now the ability to switch the theme easily through a keyboard shortcut, menu item or other button, and we’re set! :sunglasses: :heart_eyes:

1 个赞

I am not calling derivative colours into question, merely pointing out that the way one of them is derived could be improved.

So using a colour outside the black-white continuum is advanced? I wouldn’t think so.

In my testing I am noticing some peculiarities, and I even had another user on my site test this because this seemed to simple that I thought I was missing something, but here are my steps to reproduce:

  1. Have no user selectable themes enabled.
  2. Change your default theme.

Observed Result: The theme doesn’t change for the user until they go in to their Preferences > Interface and click Save Changes, even though that is the only theme available to them in the dropdown. Is anybody else seeing this?

I think this is an admin thing, also make sure you are on latest.

If you ever set the theme via the selector in prefs we set a cookie (this cookie is validated server side with an admin bypass)

So, I would re-test this theory of yours on Chrome incognito … what happens? Then as a non admin … what happens?

Yeah, must just be a cookie refresh issue. I was doing a hard refresh clearing the cache, but I had two logged in tabs open so I think that may have played a part. I can reproduce in incognito, but not after a hard refresh, so this appears to be a non-issue. I will be more careful about testing in incognito mode before reporting again. Thanks for the quick reply.

2 个赞

Hello
I have try it but i am not able to change theme from menu (like on meta) i use discourse app and safari and still not show . I run the latest version of discourse .

You need the Hamburger Theme Selector to display themes inside the hamburger menu.

4 个赞

Oh y understand now …Thanks .

What would be the right code for .logo-small? Seems to be a large gap on right when using:

.logo-small { display: block; -moz-box-sizing: border-box; box-sizing: border-box; background: url(awesome-dark-icon.png) no-repeat; width: 40px; height: 40px; padding-left: 150px; background-size: 40px 40px; }

Not totally sure, can you add a screenshot of what you have now? Perhaps @awesomerobot can help.

My guess from looking at your CSS is that the padding-left: 150px; is the cause; your .logo-small is 40px wide, so you’d have 110px of space to the right of it because of that padding-left.

5 个赞