Create a Nyxt theme with a style inspired by the visual identity of the Nyxt Academy slides

[pdelfino]

It would be interesting to use it in some videos. And it would be fun :)

[pdelfino]

The designer who did the visual identity suggested these material for us:

She uses this website to generate combinations of colors.

[aartaka]

I like the second combination -- this shade of yellow would look insanely cool in element hints!

EDIT: cook -> cool.

[aartaka]

I've played a bit this Coolors, and here's a combinations that could work:

Or, as a configuration snippet that you could try out in your config file:

(define-configuration browser
  ((theme (make-instance
           'theme:theme
           :dark-p t
           :background-color "black"
           :text-color "white"
           :accent-color "#FCBA04"
           :primary-color "#A45C30"
           :secondary-color "#DB9665"
           :tertiary-color "#AD693E"
           :quaternary-color "#7D3509"))))

It has some Greek amphora vibe to it, hasn't it?

[aartaka]

Things I don't like about the theme that I suggested are:

• The yellow is a bit too bright, maybe use some lighter shade?
• Primary and tertiary colors are too close. This could cause confusion.

EDIT: plural and sentence construction （＞д＜）

[aartaka]

@pdelfino, @jmercouris, any feedback?

[pdelfino]

@pdelfino, @jmercouris, any feedback?

I think it is great! Good job, Artyom.

I showed this to Nivea (the designer) and she liked it :slightly_smiling_face:

For me, it is ready to go :)

Since you did some self-assessment, I tried giving some contribution:

(define-configuration browser
  ((theme (make-instance
           'theme:theme
           :dark-p t
           :background-color "black"
           :text-color "white"
           :accent-color "#7E5D01"
           :primary-color "#A45C30"
           :secondary-color "#DB9665"
           :tertiary-color "#AD693E"
           :quaternary-color "#7D3509"))))

I inserted #FCBA04 on this feature of the above mentioned tool: Color Picker generation.

They show a roll of options to add "darkness" to a specific color. I picked one to reduce the brightness and this is the result:

What do you think? An improvement?

For me, your version is better. The bright yellow fits well with the purpose of the "select" color on the prompt-buffer.

Primary and tertiary colors are too close. This could cause confusion.

Not sure if this could really cause any damage considering how the UI is divided. Maybe I missed something. What could be a possible concrete problem? Can you think of a concrete example of confusion a user could have?

Thanks!

[aartaka]

Indeed, the bright yellow seems to be optimal here. After all, accent color is made to be noticeable :)

The closeness of primary and tertiary colors can cause confusion in complex interfaces with a lot of theming baked in. We do not yet have such interfaces, but it's better to prepare for it. However, I may be over-engineering here -- colors are relatively distinguishable, so it should not cause much problems.

I wonder if there are tools for interface color audits, like there are tools for text color contrast checking...

@pdelfino, would you be interested is implementing theme settings, as we discussed via email (+dark-theme+ and +light-theme+ variables, Common Settings page with color samples and ability to change the theme). If not, I can do it sometime this week :)

[unixbhaskar]

Well, as this still active(holding my breath) .....can some of you smart people get us a "Dark Solarized theme"...please! @Ambrevar @aartaka @pdelfino

The present one look like this :

[aartaka]

@unixbhaskar, if you're on master, then you can see the snippet above, alter it to the colors you like, and use is as the theme of the browser.

As far as I understand, you're using my config as the base for yours. If so, then you'll find the theme definition in style.lisp. Should be easy replacing colors and observing the change after restarting Nyxt :)

[unixbhaskar]

@unixbhaskar, if you're on master, then you can see the snippet above, alter it to the colors you like, and use is as the theme of the browser.

As far as I understand, you're using my config as the base for yours. If so, then you'll find the theme definition in style.lisp. Should be easy replacing colors and observing the change after restarting Nyxt :)

I am using stable i.2.4 and I tried to put the above code snippet in style.lisp ...but it errors out. I am doing something wrong for sure.

Let me ask you a very stupid question, honestly, why it is so hard to do the simple thing?? Why do people have to go through all the rigmorale of this much change?? Heads up...I am speaking from my lack of understanding (No pun intended).

I have tried to place this code from above into my style.lisp file and started ...it errors out ..

(define-configuration browser
  ((theme (make-instance
           'theme:theme
           :dark-p t
           :background-color "black"
           :text-color "white"
           :accent-color "#7E5D01"
           :primary-color "#A45C30"
           :secondary-color "#DB9665"
           :tertiary-color "#AD693E"
           :quaternary-color "#7D3509"))))

I am lost.

[aartaka]

Theming will only be part of 3.0, unfortunately. It's non-existent on 2-series :(

[aartaka]

It is indeed hard to configure Nyxt in between versions. But, well, we cannot freeze Nyxt forever for the sake of config compatibility :)

The APIs and changes coming in 3.0 (including theming) will help in both using and extending Nyxt :)

[pdelfino]

This task was delivered with #2116. Thus, I am closing the issue :v: