Minimal custom themes implementation #330

joshuamegnauth54 · 2023-08-02T05:02:45Z

This is a much simpler patch than the last PR. Themes are implemented as plain structs directly in the code. They're automatically added to the settings page after the official themes as well.

I'm opening this as a draft so you can take a look at the code. I'll add 3-5 more themes later, but for now everything works so you can try it or review the source.

The new types are to avoid mangling the current style implementation too much.

For now, custom themes will use constant structs like in Sniffnet's original code. Custom themes will be self contained instead of polluting the original code base. This should make it easier for contributors to modify or add any extra themes without having to change code in too many files.

I implemented a theme to ensure there are no compiliation issues. Floating point math can't be called from a const context, so the themes are returned from a non-const function for now. `iced::color!` is used for ergonomics.

* Support appending extra styles to the settings page AFTER the built in styles. * Make the whole thing scrollable.

GyulyVGC · 2023-08-02T05:49:18Z

Tyvm!
I have to merge a pretty big PR that could break something first (#324).
After that, I'll start reviewing and introducing some changes I have in mind to discuss with you.

joshuamegnauth54 · 2023-08-02T23:26:45Z

No problem. Luckily, this PR is very small and easy to maintain.

`StyleType::Custom` should be serialized to and deserialized from a TOML table. The `toml` crate doesn't seem to figure this out which causes saving and loading the settings to fail. I fixed this by hinting that the type should be a table using serde's attributes.

GyulyVGC · 2023-08-03T11:24:48Z

I've merged #324 🎉
Feel free to solve conflicts but don't feel forced to, I'll review this PR in some days so I can do it myself in case you're busy.

joshuamegnauth54 · 2023-08-04T02:54:00Z

I merged in the latest changes. 😺 There weren't many conflicts - just a few imports and updating the code to handle the new is_nightly function.

src/gui/styles/types/custom_styles.rs

src/gui/styles/types/custom_styles/dracula.rs

joshuamegnauth54 · 2023-08-05T01:55:56Z

In terms of extra styles, I'm using bat's implemented themes as a guide. I'll add a few more, but we can figure out which to keep or add later.

src/gui/styles/style_constants.rs

GyulyVGC · 2023-08-05T06:39:31Z

In terms of extra styles, I'm using bat's implemented themes as a guide. I'll add a few more, but we can figure out which to keep or add later.

Sounds good.
Ideally, I'd like to drop a new release in a few days and merge this PR in short time.
It'd be nice to have an even amount of total themes and dark themes equal to light ones, so that we can keep all the dark on the left and viceversa.

GyulyVGC · 2023-08-05T11:53:05Z

Changes

I've generalised the colors for round borders and containers and now it's sufficient to specify their opacity.
I've also merged the opacity of badges and charts in a single parameter.

Improvements

Some of the palettes required changes to be more aesthetically pleasing in my opinion, particularly Solaraized (Day) because green text wasn't clearly readable.
Feel free to share your ideas though.
Color gradients are computed in an automatic way and look good to me.

Notes

Nord theme is amazing.

I'm planning to introduce for each Night theme its Day counterpart.
To this purpose, I'll add Gruvbox Day and Nord Day.

The only theme without a bright counterpart would be Dracula.
Do you know by chance a bright theme we could use to pair with Dracula?
It should be a theme without a dark counterpart itself.

Edit

For this PR, I think 8 additional themes are sufficient.
Let me know your ideas about the 5 new themes already defined.
The missing ones are:

Gruvbox (Day)
Nord (Day)
An exclusively day-based theme to be counterpart of Dracula (if a Dracula Day theme doesn't exist as I suspect)

Edit 2

It'd be amazing to also get Sniffnet featured on the official pages of the themes we are using

joshuamegnauth54 · 2023-08-06T05:37:53Z

You covered a lot of the questions I intended to ask today before I asked them. 😂

Improvements

I'm not great at aesthetics, so you can definitely tweak the styles in any way you see fit. I also like the color gradients a lot!

Notes

Yes, Nord is amazing. I'm pleased with how the style turned out as well. The official Nord site has excellent documentation too which made it easier to implement the style. Also, a lot of programs implement the theme, so you can probably use it for other programs if you want to as well.

I added light versions of Gruvbox and Nord. As for Dracula, I'll look into a light style that looks kind of similar. The official Dracula site has an FAQ on whether there will be a light theme - and the answer is "Nope. Dracula can't stand the light." It's clever. 😂

As for featuring Sniffnet on the themes' sites, I think most of them allow you to open a PR or issue to add it. Some themes, like Solarized, don't have an official list or anything. However, solarized is well-known and a lot of people love it.

GyulyVGC · 2023-08-06T09:40:51Z

As for Dracula, I'll look into a light style that looks kind of similar. The official Dracula site has an FAQ on whether there will be a light theme - and the answer is "Nope. Dracula can't stand the light." It's clever. 😂

That's pretty hilarious, legit.

As for featuring Sniffnet on the themes' sites, I think most of them allow you to open a PR or issue to add it. Some themes, like Solarized, don't have an official list or anything. However, solarized is well-known and a lot of people love it.

I'm waiting for the approval from the Dracula team (I sent a request this morning), the other teams repos seem pretty inactive and have lots of requests opened since months... I don't think it's worth to try with them...

Btw... I finally understood why highlighted text was not clearly visible.
Its color was conditionally generated based on the body text being black or not.
I've updated it using the is_nightly method and now everything looks hella clearer.
I've also switched back Solarized Day to use green since it's lot cooler now that text is well visible.

joshuamegnauth54 · 2023-08-07T02:43:22Z

Oh yeah, some of the themes don't really publish or update their lists. Dracula, Nord, and Catppuccin seem to keep their lists fairly updated.

I have a question about the eight themes. Do you mean eight theme pairs or eight themes total?

In other words, does "Nord (Day)" and "Nord (Night)" count as one theme (pair) or two?

For Dracula's day theme, I found this edited port which was linked on GitHub. It uses Dracula's colors for a light theme as well. I'll see if I can port it over.

I used colors from: https://github.com/AshGrowem/Dracula.min/blob/master/colors-used-table.md

GyulyVGC · 2023-08-07T05:41:18Z

I have a question about the eight themes. Do you mean eight theme pairs or eight themes total?

Eight in total, so we should be done now!

GyulyVGC · 2023-08-07T15:07:14Z

Thank you very much for your time on Sniffnet 🙏
I hope we'll collaborate again in the future!

@all-contributors please add @joshuamegnauth54 for code, design.

allcontributors · 2023-08-07T15:07:23Z

@GyulyVGC

I couldn't determine any contributions to add, did you specify any contributions?
Please make sure to use valid contribution names.

I've put up a pull request to add @joshuamegnauth54! 🎉

joshuamegnauth54 added 4 commits July 30, 2023 23:01

Define palette extension structs.

2d00141

The new types are to avoid mangling the current style implementation too much.

Add Dracula as an example theme to test.

3efdceb

I implemented a theme to ensure there are no compiliation issues. Floating point math can't be called from a const context, so the themes are returned from a non-const function for now. `iced::color!` is used for ergonomics.

Automatically append custom styles to settings.

5e333e3

* Support appending extra styles to the settings page AFTER the built in styles. * Make the whole thing scrollable.

GyulyVGC added the design Styling and appearance label Aug 2, 2023

GyulyVGC added this to the v1.2.2 milestone Aug 2, 2023

joshuamegnauth54 added 2 commits August 2, 2023 21:38

Add gruvbox.

2044602

Merge remote-tracking branch 'upstream/main' into custom_themes_minimal

474aaeb

joshuamegnauth54 and others added 3 commits August 4, 2023 01:11

Add style Solarized light.

e1a1c7f

improvements to style settings page layout

5386d87

format files and fix lints

dd3f5ac

GyulyVGC reviewed Aug 4, 2023

View reviewed changes

src/gui/styles/types/custom_styles.rs Outdated Show resolved Hide resolved

src/gui/styles/types/custom_styles/dracula.rs Outdated Show resolved Hide resolved

GyulyVGC added 2 commits August 4, 2023 11:35

use StyleType::is_nightly to determine font weights

85a6596

fix tests

b165fcd

joshuamegnauth54 commented Aug 5, 2023

View reviewed changes

src/gui/styles/style_constants.rs Outdated Show resolved Hide resolved

joshuamegnauth54 added 2 commits August 4, 2023 22:53

Add style Solarized dark.

306c46d

Add Nord and update solarized.

d677171

GyulyVGC and others added 3 commits August 5, 2023 13:57

improvements to overall palettes structure and colors

2a4ca7f

Add Nord (Day) as a light theme.

09deb57

Add Gruvbox light.

5004407

fixed highlighted text and minor palettes improvements

a344376

Add a light variation of Dracula.

ff0c702

I used colors from: https://github.com/AshGrowem/Dracula.min/blob/master/colors-used-table.md

joshuamegnauth54 marked this pull request as ready for review August 7, 2023 03:22

GyulyVGC added 3 commits August 7, 2023 15:04

fix Dracula Light palette

32ec19f

refactoring

66f1b8d

some more refactoring

0b56a2a

GyulyVGC approved these changes Aug 7, 2023

View reviewed changes

allcontributors bot mentioned this pull request Aug 7, 2023

docs: add joshuamegnauth54 as a contributor for code, and design #334

Merged

GyulyVGC changed the base branch from main to v1.2.2 August 7, 2023 15:13

GyulyVGC merged commit e6c75e7 into GyulyVGC:v1.2.2 Aug 7, 2023
3 checks passed

chenrui333 mentioned this pull request Aug 8, 2023

sniffnet 1.2.2 Homebrew/homebrew-core#139003

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Minimal custom themes implementation #330

Minimal custom themes implementation #330

joshuamegnauth54 commented Aug 2, 2023

GyulyVGC commented Aug 2, 2023

joshuamegnauth54 commented Aug 2, 2023

GyulyVGC commented Aug 3, 2023

joshuamegnauth54 commented Aug 4, 2023

joshuamegnauth54 commented Aug 5, 2023

GyulyVGC commented Aug 5, 2023

GyulyVGC commented Aug 5, 2023 •

edited

joshuamegnauth54 commented Aug 6, 2023 •

edited

GyulyVGC commented Aug 6, 2023

joshuamegnauth54 commented Aug 7, 2023

GyulyVGC commented Aug 7, 2023

GyulyVGC commented Aug 7, 2023

allcontributors bot commented Aug 7, 2023

Minimal custom themes implementation #330

Minimal custom themes implementation #330

Conversation

joshuamegnauth54 commented Aug 2, 2023

GyulyVGC commented Aug 2, 2023

joshuamegnauth54 commented Aug 2, 2023

GyulyVGC commented Aug 3, 2023

joshuamegnauth54 commented Aug 4, 2023

joshuamegnauth54 commented Aug 5, 2023

GyulyVGC commented Aug 5, 2023

GyulyVGC commented Aug 5, 2023 • edited

Changes

Improvements

Notes

Edit

Edit 2

joshuamegnauth54 commented Aug 6, 2023 • edited

Improvements

Notes

GyulyVGC commented Aug 6, 2023

joshuamegnauth54 commented Aug 7, 2023

GyulyVGC commented Aug 7, 2023

GyulyVGC commented Aug 7, 2023

allcontributors bot commented Aug 7, 2023

GyulyVGC commented Aug 5, 2023 •

edited

joshuamegnauth54 commented Aug 6, 2023 •

edited