[Community Poll] New Color Palette and Themes for 2.1.55

Dear community,

Until now, UI colors have been introduced - and used - in a rather non-systematic way. Values were chosen without too much thought about the relation to other colors, variables like flag3-fg were used for elements that do not have anything to do with flags etc.

With PR #2016 I want to improve this situation. Over the summer, I’ve been working on integrating a fixed color palette with 10 shades for each color. The grays are custom-fitted to Anki, the colors are from Tailwind CSS.

Example:

In the future we will curate the set of global CSS variables (e.g. --flag-1) from that palette like this:

image

As a result, all previously used colors and most gray tones will change.

To make sure these changes are for the better, I invite you to share your thoughts about the old themes, my current proposals and how we can improve them. My current plan is to stay conservative and make dark mode just a bit darker and light mode a teeny-weeny bit lighter. Once we got a solid system to support more than two official themes, we can get more daring.

Gray Tones

These are the gray tones I picked through weeks of trial and error:

As you can see, this isn’t your everyday linear gradient - it’s quite the steep transition from light to dark tones, but relatively flat within the respective theme. This reflects the general idea of making light mode brighter and dark mode darker, but also smoothing transitions (=borders) within each theme.

Hex values
    gray: (
        0: #f4f4f4,
        1: #efefef,
        2: #e3e3e3,
        3: #d1d1d1,
        4: #919191,
        5: #3a3a3a,
        6: #2d2d2d,
        7: #2a2a2a,
        8: #252525,
        9: #181818,
    ),

Showcase

Here you can compare my changes to the the current main branch. The first screenshot is always from main, the one below from #2016.

Dark theme

Browser

Other screens

Main window with open menu

Preferences

What do you think about my proposed dark theme (lower screenshots)?

  • Better than status quo
  • Better than status quo, but too dark
  • Better than status quo, but still too bright
  • Worse than status quo

0 voters

Light theme

These changes seem less significant to me. Background is a bit brighter and borders less harsh. Some of you surely got more capable monitors than me and can judge this better.

Browser

Other screens

Main window with open menu

Preferences

What do you think about my proposed light theme (lower screenshots)?

  • Better than status quo
  • Better than status quo, but still too gray
  • Worse than status quo
  • I don’t notice any difference

0 voters

I updated the browser screenshot with less saturated flag and card-view toggle colors one day after publishing this poll. If you already voted, please take a look at it again to check if your answer still applies.

2 Likes

I love your suggests. :slight_smile:

On the other hand, I believe that we should take note of the changes made by the AnkiRedesign package, as it has been popular. What do you think?

1 Like

The light screenshot poll has a ‘too gray’ option, but no ‘too bright’ option :slight_smile: Maybe personal preference, but I find the increased separation of the sidebar and card list area a bit easier to see. But maybe that’s just what I’m used to. A line like we have on the editor on the right is a possible alternative.

Currently we have different colors for the active field highlight, the selected card highlight, and the card/notes toggle. Maybe using the same shade of blue throughout (maybe something close to the Anki star color) would look a bit more consistent?

I slightly prefer the lighter flag and card state shades in the original dark screenshot.

3 Likes

I had the same feeling when I first saw the side-by-side comparison and already pushed a change that unifies flag colors across both themes: c5f9e99.

Also the card/note toggle was too saturated in light theme, which is also fixed now.

Both default dark themes introduced with that add-on both got strong blue hues. As we currently only support a single night and day theme, I’d be concerned many people don’t like that particular hue. That’s why

Of the two light themes I prefer Catpuccin, because it looks more neutral. It does however lighten the window background even more than my PR does (#fafafa vs #f4f4f4). As @dae said:


One thing I took note of was the main window toolbar and button design changes. As the main view is just a huge blank canvas right now, it makes sense to spread elements out a bit and use drop shadows instead of harsh borders for buttons. But that’s a bit off-topic, because we’re talking about colors in this thread. See Brainstorming for modern UI [Anki 3.0] for more discussion on the UI itself.

As expected, light theme is a bit more difficult to judge and poll answers are spread out almost evenly.

Dark theme: fields

You guys seem to like the dark theme I proposed. Now I’m curious what you think about an inset versus elevated look for the fields.

Elevated fields (brighter than background)

Inset fields

Which look do you prefer?

  • Elevated fields (brighter than background)
  • Inset fields (darker than background)

0 voters

Please note I had to lighten the window background a bit (#2b2b2b instead of #2a2a2a) for the inset look to ensure contrast.

Buttons


I slipped another change into the screenshots which I would like to make: borderless toolbar buttons.

Status quo

image

image

Darker border and gradient

image

image

Borderless, no background

image

image

Button groups would be separated with vertical lines. Label buttons like Fields…, Cards… and Preview might need further changes.

Which button design would you prefer?

  • Status quo (fusion-style border and gradient)
  • With border, but different color for background
  • With border, but no background
  • Borderless and no background

0 voters

Border, but different background it is. I’ve published a PR:

This PR unifies Qt widget styles across platforms.

Notable changes:

  • The default border-radius of 5px is used in almost all widgets except menus.
  • All buttons use cursor: pointer regardless if Qt or web component.
  • Scrollbars look the same everywhere, across themes and platforms.
  • The fusion vars for dark theme have been changed (respective files and objects still need to be renamed, but I’ll wait for Introduce new color palette using Sass maps #2016 to be merged first.)
  • Several color variables for buttons and scrollbars are introduced.

Please note: this PR doesn’t contain the theme changes, as #2016 isn’t merged yet.

Edit: I made a test branch and merged the two PRs. Here’s what it would look like with the dark theme you upvoted and the elevated field color:

This was quite the marathon, but the finish line is on the horizon. I’ll be more busy IRL the next month and won’t be able to continue at this pace, so I’ll let the dust settle and leave these before-after screenshots for you to discuss and vote.

Dark theme


The first image is always from 2.1.54, the second one from my prototype for 2.1.55.

Browser

Preferences

Add dialog

Light theme


Browser

Preferences

Add dialog

1 Like