Dark theme: make it darker

[Feichtmeier]

IMO the dark theme is too bright. Not much, but a bit. Maybe make it 4-5% darker

[Jupi007]

@Feichtmeier Here is a proposal for a darker theme background:

Current	-0.03 (proposal)	-0.05 (libadwaita)

I used the handy_window example to show it with the new headerbar colour.

[Feichtmeier]

I fear I need to test this on a real app - could set up two branches?

[Jupi007]

Ofc 👍 I do it at once

[Jupi007]

@Feichtmeier Done:

https://github.com/Jupi007/yaru.dart/tree/darker-theme-0.03
https://github.com/Jupi007/yaru.dart/tree/darker-theme-0.05

I did it on my fork.

Note that it is requiring this PR to looks like it should (especially the headerbar): ubuntu/handy_window.dart#22

[Feichtmeier]

The handy_window branch is only needed for the gtk headerbars, right?

[Jupi007]

Yes, it is only for gtk headerbars.
I think our own flutter version already got the correct background colour.

[Feichtmeier]

hmmmm

I am not sure if this still fits.

libadwaita does:

• very dark background
• content bright, as bright as the headerbar
  

I don't know if this still works with our style. Eventually we've moved too far away for this to make the theme so dark now

I can not use your branch on software because yaru widgets and software dependencies on yaru but I could check it as shown above in yaru widgets

[jpnurmi]

dependency_overrides:
  handy_window:
    git:
      url: https://github.com/Jupi007/handy_window.git
      ref: mimic-libadwaita
  yaru:
    git:
      url: https://github.com/Jupi007/yaru.dart.git
      ref: darker-theme-0.05
  yaru_widgets:
    git:
      url: https://github.com/ubuntu/yaru_widgets.dart.git
      ref: main

(plus trailing -> actions in message_bar.dart)

[Feichtmeier]

thanks jp! :)

Yeah, this does not work well with our current set of widgets IMO

[Jupi007]

I agree that 0.05 is too much.
How does look the 0.03 version in software?

[Feichtmeier]

The problem is the strong contrast to the headerbar without any content having the same color
we would need to brighten up all navigations then plus think about how to present content

[jpnurmi]

0.03 looks more promising :)

[jpnurmi]

@Feichtmeier fixed the incompatibility with the latest yaru_widgets so now you can use a pubspec_overrides.yaml file for easy experimenting:

dependency_overrides:
  handy_window:
    git:
      url: https://github.com/Jupi007/handy_window.git
      ref: mimic-libadwaita
  yaru:
    git:
      url: https://github.com/Jupi007/yaru.dart.git
      ref: darker-theme-0.03
  yaru_widgets:
    git:
      url: https://github.com/ubuntu/yaru_widgets.dart.git
      ref: main

$ flutter pub get
Warning: pubspec.yaml has overrides from pubspec_overrides.yaml
Warning: You are using these overridden dependencies:
! handy_window 0.2.0 from git https://github.com/Jupi007/handy_window.git at b9b2c5
! yaru 0.4.8 from git https://github.com/Jupi007/yaru.dart.git at cadea8
! yaru_widgets 2.0.0-beta-4 from git https://github.com/ubuntu/yaru_widgets.dart.git at 1bae20
Running "flutter pub get" in software...                         1,941ms

[Jupi007]

Imo, the 0.03 version is fine (the 0.05 one was only here to show how it was too much).

@Feichtmeier About gtk apps, if you look at nautilus the background color is quite close to the 0.03 version.

[Jupi007]

The other solution would be to make the headerbar background like the gtk3 one (quite darker).

[Feichtmeier]

yes I know I don't say it's wrong but that we need to rethink many design ideas we have then

[Jupi007]

Honestly, I think our design still looks good with the soft darker background on the latest @jpnurmi screenshot.
I would even say that I prefer it over the current background color :)

[Feichtmeier]

could you create a branch with is a little bit lighter than this 0.03 branch?

[jpnurmi]

what about a lighter color for cards and banners?

[Jupi007]

I will try your both ideas, and create some branches for testing 🙂

[Feichtmeier]

what about a lighter color for cards and banners?

prob is there ain't only pages with app banners

if you got a page with woidgets that have the same bg as this dark bg, the contrast from the page to the headerbar will be super strong and looks IMO pretty off

[Jupi007]

I think that 0.02 is good compromise for the bg:

https://github.com/Jupi007/yaru.dart/tree/darker-theme-0.02

But I think that the title bar doesn't stand out enough. Maybe should we make it a very little bit brighter 🤔

[Feichtmeier]

I think that 0.02 is good compromise for the bg:

https://github.com/Jupi007/yaru.dart/tree/darker-theme-0.02

But I think that the title bar doesn't stand out enough. Maybe should we make it a very little bit brighter 🤔

If we make navbars use background instead of surface this could work. Then we have the scaffold in the middle darker where content can be drawn on lighter so it stands out a little more. But we need to test this. I think we need to change both yaruwidgets and yaru to make this work in our apps

[Feichtmeier]

I love the color extension idea btw! We could also use a lighten function

Color darken([double amount = .1]) {
  assert(amount >= 0 && amount <= 1);
  final hslColor = HSLColor.fromColor(this);
  final darkenedHslColor =
      hslColor.withLightness((hslColor.lightness - amount).clamp(0.0, 1.0));
  return darkenedHslColor.toColor();
}

Color lighten([double amount = .1]) {
  assert(amount >= 0 && amount <= 1);
  final hslColor = HSLColor.fromColor(this);
  final lightenedHslColor =
      hslColor.withLightness((hslColor.lightness + amount).clamp(0.0, 1.0));
  return lightenedHslColor.toColor();
}

However, we could also just darken YaruColors.jet :) Initially some years ago it was 1B1B1B I think... or 1A1A1A 🤔

But we also need to make the sidebars we use then use surface instead of background so they stand out more against the background.

[Jupi007]

Okay, I was thinking that jet was a fixed color.
Anyway, I would prefer to use that extension to change it, because it seems cleaner for me 🙂

We could move the extension to yaru_colors, and add this lighten version you propose, wdyt?

[Feichtmeier]

ok 👍

[Feichtmeier]

another option should be those material color shades

w500
w400

etc

[Jupi007]

You mean generate a MaterialColor palette for the jet one?

If yes, I don't think it would work, because we really need fine tune. The gap between 900 and 800 is too big.

[Feichtmeier]

oh ok 👍

[Feichtmeier]

Got some more thoughts on this one

Independently of the colour:

Background is the colour of the widgets really in the background like scaffold or yarudetailspage

Surface is the colour of appbar, navbars and content

This needs to sorted out first
(Because I was inconsistent and unaware)

(Source: https://twitter.com/jordanphughes/status/1619714993250861057?t=h57CaAq99kaaXIcAks1I_A&s=19)

I don't know which way we should go with colours yet (brighter in darker in the dark theme in pretty sure but if darker in lighter in the light theme or lighter on darker in the light theme I'm not sure yet but the usage is wrong and I need to fix this first)

[Feichtmeier]

🧓 half a year later I remembered about this again, and modified MusiPod to have a darker dark theme with a modification of yaru.dart and I am kind ahappy with the result

current snap store snap from edge with vanilla yaru.dart as comparison on the right side.

the color is
Color.fromARGB(255, 37, 37, 37)
hex should be
#252525