search

regolith-linux / regolith-desktop

Meta package for the Regolith Desktop Environment
1.5k stars 31 forks source link

Consolidate theme colors into xresources and gtk themes #24

Closed kgilmer closed 5 years ago

kgilmer commented 5 years ago

Color theme info is defined in many places in Regolith:

  1. gtk theme
  2. st terminal (compiled)
  3. i3wm (config file)
  4. i3bar (config file)
  5. rofi theme (config file)

Ideally all color info could be consolidated into xresources but probably also at least the gtk theme. This change is valuable because it allows users to more easily configure their color theme.

muniter commented 5 years ago

I agree It wold be great. I think the most problematic would be i3blocks since all the others can read the colors from ~/.Xresources.

  1. i3wm supports it
  2. i3Blocks, It seems like It must be done at the script level, make each block query for the color, It's kind of a not very clean solution
  3. Rofi supports it.
  4. St can be patched.

A good thing one everything is set up, might be to include pywal and add to the documentation how to use it.

kgilmer commented 5 years ago

Awesome feedback @muniter ! Let me know if you'd like to take a crack at this one, or even work on it together.

kgilmer commented 5 years ago

regolith-st - 0.8.2-1ubuntu19 has the Xresources patch and is available in the regolith-unstable PPA for testing. I did some testing and if there is no Xresources file in the user session than the Regolith color and font settings are preserved. I have not yet looked into writing an Xresources file that conforms to Regolith's theme.

kgilmer commented 5 years ago

Note that xrdb must be run after adding or editing an ~/.Xresources file before it will be picked up by st. More details are available from the excellent Arch wiki on X resources.

kgilmer commented 5 years ago

Add this: https://github.com/solarized/xresources

kgilmer commented 5 years ago

And this: https://github.com/arcticicestudio/nord-xresources/blob/develop/src/nord

drewofdoom commented 5 years ago

One enhancement suggestion related to this issue would be to provide popular alternate themes in a select-able list somehow. Sort of a "look and feel" dialog that would automatically set the theme colors across the various applications (essentially set the Xresources appropriately) and set the most appropriate GTK theme all at the same time.

The GTK theme bit would be more difficult, though, as it would require theme installation on run, which would necessitate prompting the user for their password.

ian-battaglia commented 5 years ago

So this is still in testing on the latest unstable version? Just wondering where we stand on changing the theme. I get the love for Solarized, but it's not for me. @kgilmer, the intention is to wrap all the theming info into xresoures rather than modifying all the config files separately?

kgilmer commented 5 years ago

@MoreThanLuck yep that's the plan. What's currently in unstable that could use some testing is just the wallpaper fix. The consolidation is ongoing (only st term is ready), but you can see some of that if you update your packages from regolith-unstable. Or look here: https://github.com/regolith-linux/regolith-assets/tree/master/Xresources

The general idea is to have a separate file for each app and each color scheme. I'm thinking this may make it easier to add and change the themes, but also worry about over abstraction...

ian-battaglia commented 5 years ago

Gotcha, let me know how I can help. I patched my wallpaper by modifying the config file and wallpaper refresh shell script, and lockscreen through GNOME tweaks. I have my own color palette from terminal.sexy I was using in zsh and nvim, and started to go through and patch that in place of Solarized in the config file but things got a little funky. Would love to swap everything over to my own color scheme as uniformly as Solarized is integrated now.

kgilmer commented 5 years ago

@MoreThanLuck once I have the Xresources theming ready I'd love to get your feedback. Like, does the structure make sense...is there an easier or simpler way, etc.. I'll update the ticket again when there is something functional in regolith-unstable to play around with, hopefully this weekend.

kgilmer commented 5 years ago

moving colors Xresources in st was pretty straight forward but both i3wm and i3blocks are a lot more challenging. Specifically, it's been hard to determine the best translation of all the colors that each system requires into a canonical set of color definitions. In addition, both have restrictions on how Xresource strings can be loaded and handled that make composition difficult.

My plan is to push the work out I've already done for st, and continue to think about the best way of supporting i3* apps. I may need to use the m4 preprocessor to get something I believe will be a suitable improvement over just editing the config files directly.

ghost commented 5 years ago

Just wanted to mention that it would be awesome if there was a Gruvbox theme implemented for Regolith. I tried changing over all the config files but it was a mess and i3bar didn't like it. So having multiple themes from the get go would be very helpful.

kgilmer commented 5 years ago

Hi @gottaStartNow , yep it's a mess right now. I'm in the middle of migrating all color theme info to Xresources but need to make some changes to i3bar or replace it with something else that integrates in a clean way. Please bear with me while this work continues.

kgilmer commented 5 years ago

Xresources that define solarized, and map them to ST and i3wm are now staged in ~/.Xresources.d/ @MoreThanLuck if you want to take a gander.

kgilmer commented 5 years ago

I am happy to report that I have everything reading colors and fonts from Xresources on my local machine. Some work remains in packaging up but the light is at the end of the tunnel.

ghost commented 5 years ago

So can I start working on a gruvbox theme yet?

kgilmer commented 5 years ago

Soon! I mean, you will soon be able to setup your theme by editing the files in your ~/.Xresources.d/ directory.

Latest change to support this: https://github.com/regolith-linux/i3xrocks

cafeoh commented 5 years ago

So can I start working on a gruvbox theme yet?

@gottaStartNow Started dipping my feet in the same water, unfortunately don't have enough time on my hands at the moment, I currently have vscode on Gruvbox dark (hard), and whatever's in the i3 config file with the matching theme (the one by jdinhlife)

# GRUV PORT
set $base03       #1d2021
set $base02       #282828
set $base01       #504945
set $base00       #665c54
set $base0        #7c6f64
set $base1        #928374
set $base3        #fbf1c7
set $base2        #ebdbb2
set $yellow       #fabd2f
set $orange       #fe8019
set $red          #fb4934
set $magenta      #d33682
set $violet       #d3869b
set $blue         #83a598
set $cyan         #8ec07c
set $green        #b8bb26
set $transparent  #00000000
set $lucent       #00000088

This is what I got for now, but It'd be great if you shared your progress if you went further! This issue isn't the best place but I'd be very happy if you send a quick mail or discord message (Cafe#3216) to me! :heart:

kgilmer commented 5 years ago

Status update: everything but i3blocks is now Xresources-enabled in regolith-unstable. Regarding i3blocks, I am waiting to see if the upstream project wants to take the change or I shall have to fork it.

ian-battaglia commented 5 years ago

Xresources that define solarized, and map them to ST and i3wm are now staged in ~/.Xresources.d/ @MoreThanLuck if you want to take a gander.

Absolutely! Do I need to jump on the regolith-unstable package for your progress on this? How would I do so?

kgilmer commented 5 years ago

The Xresources and the initialization code is now in regolith-stable. st can be configured now with Xresources in stable. i3-wm, i3blocks, and rofi are not yet ready. At this point there is no reason to use regolith-unstable.

ian-battaglia commented 5 years ago

Got it! So if I'm reading this right, at least for st, it should be possible to add color palettes alongside solarized in /.Xresources.d, and then call them in the .Xresources-regolith file?

kgilmer commented 5 years ago

Sorry, yeah there's no documentation yet so it's a bit confusing. The workflow I use is this:

  1. edit a Xresource file, say ~/.Xresources.d/st-term
  2. change a value, like maybe the font size
  3. reload the Xresources database (this happens automatically when your session starts): xrdb -merge ~/.Xresources-regolith
  4. launch a new instance of st and notice your font change
kgilmer commented 5 years ago

This is an interesting rofi bug report: https://github.com/davatorium/rofi/issues/756

ian-battaglia commented 5 years ago

Got it, nice! Got a gruv palette working off of the values provided by @cafeoh above. Screenshot from 2019-07-12 09-40-38

ghost commented 5 years ago

That is indeed Gruvbox, so how are these new themes going to be rolled out to the end user? Do I need to reinstall regolith from scratch to get ahold of these?

ian-battaglia commented 5 years ago

Here's what I did:

  1. In the .XResources.d directory, create a file called gruv. That looks like this: 
    ! GRUV PORT
#define gruv_base03       #1d2021
#define gruv_base02       #282828
#define gruv_base01       #504945
#define gruv_base00       #665c54
#define gruv_base0        #7c6f64
#define gruv_base1        #928374
#define gruv_base3        #fbf1c7
#define gruv_base2        #ebdbb2
#define gruv_yellow       #fabd2f
#define gruv_orange       #fe8019
#define gruv_red          #fb4934
#define gruv_magenta      #d33682
#define gruv_violet       #d3869b
#define gruv_blue         #83a598
#define gruv_cyan         #8ec07c
#define gruv_green        #b8bb26
#define gruv_transparent  #00000000
#define gruv_lucent       #00000088
  2. I modified the st-term file in that same directory, which now looks like this: 
    St.font:              Anonymous Pro for Powerline:pixelsize=16:antialias=true:autohint=true
St.color0:            gruv_base03
St.color1:            gruv_red     
St.color2:            gruv_green       
St.color3:            gruv_yellow       
St.color4:            gruv_blue       
St.color5:            gruv_magenta       
St.color6:            gruv_cyan       
St.color7:            gruv_base1       
St.color8:            gruv_base03       
St.color9:            gruv_orange      
St.color10:           gruv_base01       
St.color11:           gruv_base00       
St.color12:           gruv_base0       
St.color13:           gruv_violet       
St.color14:           gruv_base1       
St.color15:           gruv_base3
  3. Refresh!
ghost commented 5 years ago

So currently it only applies to the default terminal?

kgilmer commented 5 years ago

Other terminals may also integrate with Xresources, I'm not sure. But, as you can tell from the key names, these values are intended specifically for st, the default terminal.

kgilmer commented 5 years ago

Real documentation will be forthcoming but here is what I did to get gruvbox theme in st and i3-wm:

Note: i3-wm color changes will only work if you are using regolith-unstable PPA but I plan on pushing those changes to the stable PPA this weekend.

  1. Take @MoreThanLuck 's gruvbox definitions and add them to a new file: ~/.Xresources.d/gruvbox. (as above)
  2. Add the new gruvbox colors to the root Xresources file ~/.Xresources-regolith: 
    #include ".Xresources.d/solarized"
#include ".Xresources.d/gruvbox"
#include ".Xresources.d/st-term"
#include ".Xresources.d/i3-wm"
#include ".Xresources.d/i3blocks"
  3. Update sts colors with @MoreThanLuck 's mapings by editing ~/.Xresources.d/st-term. (as above)
  4. Update i3-wm Xresources colors by replacing 'Solarized' with 'gruv': 
    
i3-wm.bar.font: pango:Source Code Pro Medium 13, FontAwesome 13

i3-wm.bar.background.color: gruv_base03 i3-wm.bar.statusline.color: gruv_base1 i3-wm.bar.separator.color: gruv_blue i3-wm.bar.workspace.focused.border.color: gruv_base02 i3-wm.bar.workspace.focused.background.color: gruv_base02 i3-wm.bar.workspace.focused.text.color: gruv_base2 i3-wm.bar.workspace.active.border.color: gruv_base02 i3-wm.bar.workspace.active.background.color: gruv_base02 i3-wm.bar.workspace.active.text.color: gruv_base01 i3-wm.bar.workspace.inactive.border.color: gruv_base03 i3-wm.bar.workspace.inactive.background.color: gruv_base03 i3-wm.bar.workspace.inactive.text.color: gruv_base01 i3-wm.bar.workspace.urgent.border.color: gruv_red i3-wm.bar.workspace.urgent.background.color: gruv_red i3-wm.bar.workspace.urgent.text.color: gruv_base3

i3-wm.client.focused.color.border: gruv_base03 i3-wm.client.focused.color.background: gruv_base01 i3-wm.client.focused.color.text: gruv_base3 i3-wm.client.focused.color.indicator: gruv_blue i3-wm.client.focused.color.child_border:

i3-wm.client.focused_inactive.color.border: gruv_base03 i3-wm.client.focused_inactive.color.background: gruv_base02 i3-wm.client.focused_inactive.color.text: gruv_base0 i3-wm.client.focused_inactive.color.indicator: gruv_base02 i3-wm.client.focused_inactive.color.child_border:

i3-wm.client.unfocused.color.border: gruv_base03 i3-wm.client.unfocused.color.background: gruv_base02 i3-wm.client.unfocused.color.text: gruv_base0 i3-wm.client.unfocused.color.indicator: gruv_base02 i3-wm.client.unfocused.color.child_border:

i3-wm.client.urgent.color.border: gruv_base03 i3-wm.client.urgent.color.background: gruv_red i3-wm.client.urgent.color.text: gruv_base3 i3-wm.client.urgent.color.indicator: gruv_red i3-wm.client.urgent.color.child_border:

define glyph_font "Source Code Pro Medium 13"

define glyph 

define Q(x) #x

define QUOTE(x) Q(x)

define WORKSPACE_NAME(INDEX, FONT, COLOR, GLYPH) INDEX: INDEX GLYPH

i3-wm.workspace.01.name: WORKSPACE_NAME(1, glyph_font, QUOTE(gruv_blue), ) i3-wm.workspace.02.name: WORKSPACE_NAME(2, glyph_font, QUOTE(gruv_cyan), ) i3-wm.workspace.03.name: WORKSPACE_NAME(3, glyph_font, QUOTE(gruv_green), ) i3-wm.workspace.04.name: WORKSPACE_NAME(4, glyph_font, QUOTE(gruv_yellow), ) i3-wm.workspace.05.name: WORKSPACE_NAME(5, glyph_font, QUOTE(gruv_orange), ) i3-wm.workspace.06.name: WORKSPACE_NAME(6, glyph_font, QUOTE(gruv_red), ) i3-wm.workspace.07.name: WORKSPACE_NAME(7, glyph_font, QUOTE(gruv_magenta), ) i3-wm.workspace.08.name: WORKSPACE_NAME(8, glyph_font, QUOTE(gruv_violet), ) i3-wm.workspace.09.name: WORKSPACE_NAME(9, glyph_font, QUOTE(gruv_base1), ) i3-wm.workspace.10.name: WORKSPACE_NAME(10, glyph_font, QUOTE(gruv_blue), ) i3-wm.workspace.11.name: WORKSPACE_NAME(11, glyph_font, QUOTE(gruv_cyan), ) i3-wm.workspace.12.name: WORKSPACE_NAME(12, glyph_font, QUOTE(gruv_green), ) i3-wm.workspace.13.name: WORKSPACE_NAME(13, glyph_font, QUOTE(gruv_yellow), ) i3-wm.workspace.14.name: WORKSPACE_NAME(14, glyph_font, QUOTE(gruv_orange), ) i3-wm.workspace.15.name: WORKSPACE_NAME(15, glyph_font, QUOTE(gruv_red), ) i3-wm.workspace.16.name: WORKSPACE_NAME(16, glyph_font, QUOTE(gruv_magenta), ) i3-wm.workspace.17.name: WORKSPACE_NAME(17, glyph_font, QUOTE(gruv_violet), ) i3-wm.workspace.18.name: WORKSPACE_NAME(18, glyph_font, QUOTE(gruv_base1), ) i3-wm.workspace.19.name: WORKSPACE_NAME(19, glyph_font, QUOTE(gruv_blue), )

4. Refresh Xresources:

$ xrdb -merge ~/.Xresources-regolith


5. Reload i3 with `Super-Shift-r`.

Behold:
![Screenshot from 2019-07-12 21-29-21](https://user-images.githubusercontent.com/49683/61166975-40ecab00-a4ec-11e9-94b4-c4bfa5a76ba3.png)

(_Notice how the sound settings are still Solarized.  You'll need to apply a gruvbox GTK theme to complete the effect._)
ghost commented 5 years ago

So can this be rolled into the next release? I prefer to theme everything in sync. If you need me to alpha test let me know.

kgilmer commented 5 years ago

Hi @gottaStartNow , yep it's my active task. There are many pieces that need to change to make this work. When a holistic alpha test can be performed, I'll let you know, and thanks for offering!

kgilmer commented 5 years ago

@MoreThanLuck or @cafeoh would either of you care to contribute the gruvbox color definitions file listed in this ticket to regolith-styles? I'm happy to do it but want to give either of you the option...

kgilmer commented 5 years ago

I'm updating the package now so I'll throw in the gruvbox theme that @MoreThanLuck and @cafeoh created.

kgilmer commented 5 years ago

Here's an update on the status of this task:

Complete:

Incomplete:

ian-battaglia commented 5 years ago

Thanks so much, Ken!

kgilmer commented 5 years ago

This feature is ready for any brave souls that care to test it. After updating from regolith-unstable, have a look at ~/.Xresources-regolith. Hopefully it is clear how to update your system. If not please comment as to what you found confusing.

Screenshot from 2019-07-26 08-08-32

kgilmer commented 5 years ago

Documentation is live: https://regolith-linux.org/configuring.html

kgilmer commented 5 years ago

I found a migration issue in testing that will need to be addressed before pushing to regolith-stable. Ongoing.

kgilmer commented 5 years ago

So many regressions! I've tested 18.04 and 19.04. I've tested migrating from previous non Xres configuration. Given the number of regressions found I expect there to be more, but I am unable to find them. Closing and will take new issues for bugs.

Thanks for everyone's feedback and support!

josedeavila15 commented 4 years ago

hay alguna forma de configurar un tema que tenga un contorno blur tanto en la terminal como el tema total del escritorio?

kgilmer commented 4 years ago

Cualquier cosa que otros hayan hecho con i3 se puede hacer con Regolith, pero puede requerir mucha personalización. Lamentablemente, Regolith no proporciona temas transparentes.

(Google Translate of: "Anything others have done with i3 can be done with Regolith, but may require a lot of customization. Regolith does not provide any transparent themes itself unfortunately.")