Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(example): improve appearance of dark mode filter #2003

Merged
merged 1 commit into from
Dec 19, 2024

Conversation

TechnicJelle
Copy link
Contributor

@TechnicJelle TechnicJelle commented Dec 19, 2024

Hi there!
I love the library, it's very good.

However, I felt like the default dark mode filter could be improved somewhat.
It just only inverted the colours, which made the sea orange and the trees purple.

So I've figured out a nicer-looking dark mode filter!
It inverts the colours first, but then hue-rotates by 180 degrees to make the colours look normal again!

Thanks to my friend @Stvff for helping me with these calculations!

You can see it in action here:

Light:
image

Old dark mode:
image

New dark mode:
image

This hard-coded matrix was generated by the following Dart code:

// Using the `ml_linalg` package for the Matrix maths
//  https://pub.dev/packages/ml_linalg

// Matrices from https://www.w3.org/TR/filter-effects-1/#feColorMatrixElement
Matrix mat1 = Matrix.fromList([
  [0.213, 0.715, 0.072],
  [0.213, 0.715, 0.072],
  [0.213, 0.715, 0.072],
]);
Matrix mat2 = Matrix.fromList([
  [0.787, -0.715, -0.072],
  [-0.213, 0.285, -0.072],
  [-0.213, -0.715, 0.928],
]);
Matrix mat3 = mat1 - mat2;
final hueRotator3x3 = mat3.asFlattenedList;

Matrix hueRotator5x5 = Matrix.fromList([
  [hueRotator3x3[0], hueRotator3x3[1], hueRotator3x3[2], 0, 0],
  [hueRotator3x3[3], hueRotator3x3[4], hueRotator3x3[5], 0, 0],
  [hueRotator3x3[6], hueRotator3x3[7], hueRotator3x3[8], 0, 0],
  [0, 0, 0, 1, 0],
  [0, 0, 0, 0, 1],
]);

Matrix inverter5x5 = Matrix.fromList([
  [-1, 0, 0, 0, 255],
  [0, -1, 0, 0, 255],
  [0, 0, -1, 0, 255],
  [0, 0, 0, 1, 0],
  [0, 0, 0, 0, 1],
]);

Matrix result = inverter5x5 * hueRotator5x5;
final values = result.asFlattenedList;

final ColorFilter nicerInvertFilter = ColorFilter.matrix([
  values[0], values[1], values[2], values[3], values[4], // R
  values[5], values[6], values[7], values[8], values[9], // G
  values[10], values[11], values[12], values[13], values[14], // B
  values[15], values[16], values[17], values[18], values[19], // A
]);
print(nicerInvertFilter);

Copy link
Contributor

@josxha josxha left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this awesome pull request!

@JaffaKetchup JaffaKetchup self-requested a review December 19, 2024 09:46
Copy link
Member

@JaffaKetchup JaffaKetchup left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thanks!

@JaffaKetchup JaffaKetchup changed the title Nicer-looking default dark mode filter feat(example): improve appearance of dark mode filter Dec 19, 2024
@JaffaKetchup JaffaKetchup merged commit 18e3f47 into fleaflet:master Dec 19, 2024
7 checks passed
@TechnicJelle
Copy link
Contributor Author

Thanks for accepting it! :D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

3 participants