Added theme for i3wm

[en0]

No description provided.

[roosta]

Hi, thank you for your contribution. I'm having some issues with this theme:

• The colors should ideally be defined in variables.
• There is no good way of differentiating between focused, focused_inactive, and unfocused window, the border is the same regardless, which I find really confusing when navigating between windows.
• The dmenu call should probably not be included since there is no standard way of opening programs in i3. I use rofi personally but there are many options out there. I feel this is somewhat unrelated to i3.

Some opinionated things:

• The i3bar background should be same background as in vim (#1C1B19)
• Not to keen on the bright border around workspaces, I'd prefer it darker or no border.

[en0]

Thanks for the feedback roosta. I didn't even know i could define variables in i3 config. Thanks for that. I will do that and see if i can apply your suggestions.

[R0flcopt3r]

I'm too lazy to do this the proper way...

I have added inn all the colors from the vim version of srcery.

I also made some changes to make the active window more focused, and the inactive windows less focused.

set $black           #1C1B19
set $red             #EF2F27
set $green           #519F50
set $yellow          #FBB829
set $blue            #2C78BF
set $magenta         #E02C6D
set $cyan            #0AAEB3
set $white           #D0BFA1
set $bright_black    #918175
set $bright_red      #F75341
set $bright_green    #98BC37
set $bright_yellow   #FED06E
set $bright_blue     #68A8E4
set $bright_magenta  #FF5C8F
set $bright_cyan     #53FDE9
set $bright_white    #FCE8C3
set $orange          #FF5F00
set $bright_orange   #FF8700
set $hard_black      #121212
set $xgray1          #262626
set $xgray2          #303030
set $xgray3          #3A3A3A
set $xgray4          #444444
set $xgray5          #4E4E4E
set $xgray6          #585858

# class                 border          bground     text            indicator   child_border
client.focused          $bright_blue    $blue       $white          $yellow     $bright_blue
client.focused_inactive $xgray1         $xgray1     $white          $xgray4     $xgray4
client.unfocused        $xgray4         $xgray4     $white          $xgray4     $xgray4
client.urgent           $bright_red     $red        $hard_black     $bright_red $bright_red
client.placeholder      $xgray4         $hard_black $bright_black   $hard_black $hard_black

client.background       $hard_black

bar {
    colors {
        background $hard_black
        statusline $white
        separator  $blue

        focused_workspace  $bright_blue $blue $white
        active_workspace   $xgray1 $xgray1 black
        inactive_workspace $xgray4 $xgray4 $white
        urgent_workspace   $bright_red $red $hard_black
        binding_mode       $bright_yellow $yellow $hard_black
  }
}

[en0]

@roosta I tried to address your concerns but i might not have the same vision that you do. Let me know what you think. I went a different direction with it.

[R0flcopt3r]

@en0 I really like this new revised version, it's still really hard to tell which window has focus if you don't run titlebars like I do.

I would recommend setting the active window to something like this:

# Colors                border  backgr  text          indicator child_border
client.focused          $xgrey5 $xgrey5 $orange       $orange   $xgrey5

That gives it gives a bit more contrast to the other windows around the border, and still looks rather neat.

[roosta]

@en0 I like it, and don't worry about my opinionated comments, that's why I listed those as opinionated :) If I were to nitpick a bit more I think that focused_inactive is not different enough from unfocused, I propose this change:

client.focused_inactive $bright_black $bright_black $black $xgray4 $xgray4

But its up to you, I'm gonna go ahead and merge this regardless, but there might be some changes down the line if you're ok with that?

@R0flcopt3r Thanks for adding your two cents, good too have a few more eyes on this. I no longer have the issue of telling which window is in focus, the blue border solves that handily. Could you share the settings you use that makes it hard to differentiate?

[roosta]

Thanks to both of you for taking an interest, I hope my nitpicking doesn't kill your enthusiasm. I got my own i3 config as you might have guessed, and some opinions follow, but I'll happily keep those opinions to my own config.

[R0flcopt3r]

I'm not using titlebars, so I need the actual border of the window change. When the border for a focused window is almost the same for an unfocused, which makes them really hard to differentiate.

With my current twist it looks like this:

The last screenshot uses these settings. Borders are changed to white when in focus which makes them stand out more. I've also changed the indicator to $yellow, since it kind of acts as a cursor.

# Colors                border  backgr  text          indicator child_border
client.focused          $white  $xgrey1 $white        $yellow   $white
client.focused_inactive $xgrey3 $xgrey1 $orange       $xgrey3   $xgrey3
client.unfocused        $xgrey3 $xgrey1 $white        $xgrey1   $xgrey1
client.urgent           $red    $xgrey1 $red          $red      $red
client.placeholder      $xgrey1 $xgrey1 $white        $xgrey1   $xgrey1
client.background       $black

bar {
    tray_output primary
    status_command i3blocks
    colors {

        background $black
        statusline $white
        separator  $white

        # Colors           Border        Background   Text
        focused_workspace  $white       $xgrey3      $orange
        active_workspace   $xgrey3       $xgrey3      $white
        inactive_workspace $xgrey3       $xgrey1      $white
        urgent_workspace   $red          $red         $black
        binding_mode       $green        $green       $black
    }
}

[roosta]

I'm not using titlebars myself...I think, the blue border around the active window makes it very easy to tell apart. Are you using gaps? is there some setting I don't have? I've set new_window pixel 1

[R0flcopt3r]

There are too many configs running about now.. 😂

In the original commit, 0c3962b, the child_border parameter was the same for all window types except urgent and placeholder. child_border is the actual border around the window, whilst border is the border around the titlebar [¹]. My original comment, #4 (comment), addresses this.

In the latest commit by @en0, be227df, the child_border is very similar, however not identical. Still hard to differentiate between active and inactive windows. This comment, #4 (comment), addresses this.

I think I prefer the colors in be227df, with the modifications from #4 (comment). It's more discrete and I like the added touch of the yellow indicator color, as it matches well with the other color schemes from srcery. I think the bright blue background on the titlebars and statusbar from 0c3962b is a bit distracting.

There are still quite a bit of refining and discussion left I think, to make it as polished as the other themes.

---

EDIT:

I'm unable to replicate the colors used in #4 (comment) as we've used different variable naming standards, and my color pallet includes more colors. using the variables from @en0 this is no longer a problem.

https://i3wm.org/docs/userguide.html#_changing_colors

Footnotes

1. ↩

[roosta]

Yeah, getting pretty confusing at this point :D

Could've sworn that the child border was blue in the latest commit, but seems I'm mistaken.

I completely agree that the way it stands now isn't great when trying to differentiate windows. I also still think focused_inactive and focused are too similar. I propose this change then, based on your config example @R0flcopt3r.

# Colors                border  backgr  text          indicator child_border
client.focused          $white  $xgrey3 $orange       $yellow   $white
client.focused_inactive $xgrey3 $xgrey3 $white        $xgrey3   $xgrey3
client.unfocused        $xgrey1 $xgrey1 $white        $xgrey1   $xgrey1
client.urgent           $red    $xgrey1 $red          $red      $red
client.placeholder      $xgrey1 $xgrey1 $white        $xgrey1   $xgrey1
client.background       $black

bar {
    colors {

        background $black
        statusline $white
        separator  $white

        # Colors           Border        Background   Text
        focused_workspace  $white        $xgrey3      $orange
        active_workspace   $xgrey3       $xgrey3      $white
        inactive_workspace $xgrey3       $xgrey1      $white
        urgent_workspace   $red          $red         $black
        binding_mode       $green        $green       $black
    }
}

I'm also not a huge fan of the orange color used as highlight. I've always thought magenta was srcery's signature color, the orange was more of an afterthought due to the fact that we didn't have enough colors in the 16 color palette for certain things like macro calls and the like. The orange is just plain old x11 [202] OrangeRed1.

[R0flcopt3r]

The orange could very well be replaced with yellow, which looks very nice, and obviously matches very well with the yellow indicator. It also indicates which workspace/window you have in focus, which gives it a nice touch, I think.

I can't really see a nice place to fit the magenta inn where it's always visible, as it sticks out a lot... However it could work well as binding_mode under bar{colors{}} instead of green.

[roosta]

Yellow is a good compromise, here's my latest attempt:

set $black #1C1B19
set $brightblack #918175

set $red #EF2F27
set $brightred #F75341

set $green #519F50
set $brightgreen #98BC37

set $yellow #FBB829
set $brightyellow #FED06E

set $blue #2C78BF
set $brightblue #68A8E4

set $magenta #E02C6D
set $brightmagenta #FF5C8F

set $cyan #0AAEB3
set $brightcyan #53FDE9

set $white #D0BFA1
set $brightwhite #FCE8C3

set $orange #D75F00
set $brightorange #FF8700

set $xgrey1 #262626
set $xgrey2 #303030
set $xgrey3 #3A3A3A
set $xgrey4 #444444
set $xgrey5 #4E4E4E

# Colors                border       backgr  text         indicator child_border
client.focused          $brightblack $xgrey3 $yellow      $yellow   $brightblack
client.focused_inactive $xgrey3      $xgrey3 $brightblack $xgrey3   $xgrey3
client.unfocused        $xgrey1      $xgrey1 $brightblack $xgrey1   $xgrey1
client.urgent           $red         $xgrey1 $red         $red      $red
client.placeholder      $xgrey1      $xgrey1 $brightblack $xgrey1   $xgrey1
client.background       $black

bar {
  colors {
    background $black
    statusline $white
    separator  $white

    # Colors           Border        Background   Text
    focused_workspace  $brightblack  $xgrey3      $yellow
    active_workspace   $xgrey3       $xgrey3      $brightblack
    inactive_workspace $xgrey3       $xgrey1      $brightblack
    urgent_workspace   $red          $red         $black
    binding_mode       $magenta      $magenta     $brightwhite
    }
}

@R0flcopt3r I had to update your colors, you were using dated white and black colors. They went through a change recently.

I haven't properly tested placeholder since I can't find an easy way of spawning one. Might need some work.

[en0]

Thanks for the great feedback, I really like the yellow change and I think using magenta on the bar mode indicator makes sense. I will push up changes for that, i am not sure how to get good differentiation between the windows using only boarders without using more color there. there is just not enough contrast between the grays. I will try some of the suggestions from above.

[en0]

as you can see from the commit message, that last commit doesn't address the focus visibility when borders are off. I will see if i can come up with something.

[en0]

Yellow is a good compromise, here's my latest attempt:

set $black #1C1B19
set $brightblack #918175

set $red #EF2F27
set $brightred #F75341

set $green #519F50
set $brightgreen #98BC37

set $yellow #FBB829
set $brightyellow #FED06E

set $blue #2C78BF
set $brightblue #68A8E4

set $magenta #E02C6D
set $brightmagenta #FF5C8F

set $cyan #0AAEB3
set $brightcyan #53FDE9

set $white #D0BFA1
set $brightwhite #FCE8C3

set $orange #D75F00
set $brightorange #FF8700

set $xgrey1 #262626
set $xgrey2 #303030
set $xgrey3 #3A3A3A
set $xgrey4 #444444
set $xgrey5 #4E4E4E

# Colors                border       backgr  text         indicator child_border
client.focused          $brightblack $xgrey3 $yellow      $yellow   $brightblack
client.focused_inactive $xgrey3      $xgrey3 $brightblack $xgrey3   $xgrey3
client.unfocused        $xgrey1      $xgrey1 $brightblack $xgrey1   $xgrey1
client.urgent           $red         $xgrey1 $red         $red      $red
client.placeholder      $xgrey1      $xgrey1 $brightblack $xgrey1   $xgrey1
client.background       $black

bar {
  colors {
    background $black
    statusline $white
    separator  $white

    # Colors           Border        Background   Text
    focused_workspace  $brightblack  $xgrey3      $yellow
    active_workspace   $xgrey3       $xgrey3      $brightblack
    inactive_workspace $xgrey3       $xgrey1      $brightblack
    urgent_workspace   $red          $red         $black
    binding_mode       $magenta      $magenta     $brightwhite
    }
}

@R0flcopt3r I had to update your colors, you were using dated white and black colors. They went through a change recently.

I haven't properly tested placeholder since I can't find an easy way of spawning one. Might need some work.

I think this one looks really good except with boarders off, it doesn't feel like a srcery theme. It needs some color. and of-course the boarders are the only opportunity here.

[en0]

What if we added a bit more color into the borders.

set $mod Mod4

set $black #1C1B19
set $brightblack #918175

set $red #EF2F27
set $brightred #F75341

set $green #519F50
set $brightgreen #98BC37

set $yellow #FBB829
set $brightyellow #FED06E

set $blue #2C78BF
set $brightblue #68A8E4

set $magenta #E02C6D
set $brightmagenta #FF5C8F

set $cyan #0AAEB3
set $brightcyan #53FDE9

set $white #D0BFA1
set $brightwhite #FCE8C3

set $orange #D75F00
set $brightorange #FF8700

set $xgrey1 #262626
set $xgrey2 #303030
set $xgrey3 #3A3A3A
set $xgrey4 #444444
set $xgrey5 #4E4E4E

# Colors                border        backgr  text         indicator child_border
client.focused          $brightyellow $xgrey3 $yellow      $magenta  $yellow
client.focused_inactive $xgrey5       $xgrey3 $brightblack $xgrey3   $xgrey5
client.unfocused        $xgrey1       $xgrey1 $brightblack $xgrey1   $xgrey1
client.urgent           $red          $xgrey1 $red         $red      $red
client.placeholder      $xgrey1       $xgrey1 $brightblack $xgrey1   $xgrey1
client.background       $black

bar {
  colors {
    background $black
    statusline $white
    separator  $white

    # Colors           Border        Background   Text
    focused_workspace  $brightblack  $xgrey3      $yellow
    active_workspace   $xgrey3       $xgrey3      $brightblack
    inactive_workspace $xgrey3       $xgrey1      $brightblack
    urgent_workspace   $red          $red         $black
    binding_mode       $magenta      $magenta     $brightwhite
    }
}

[en0]

a note, in gaps, i use smart_gaps and smart_boarders which i think is pretty common. It removes that bright border if you only have one window in the screen.

[R0flcopt3r]

What if we added a bit more color into the borders.

set $mod Mod4

set $black #1C1B19
set $brightblack #918175

set $red #EF2F27
set $brightred #F75341

set $green #519F50
set $brightgreen #98BC37

set $yellow #FBB829
set $brightyellow #FED06E

set $blue #2C78BF
set $brightblue #68A8E4

set $magenta #E02C6D
set $brightmagenta #FF5C8F

set $cyan #0AAEB3
set $brightcyan #53FDE9

set $white #D0BFA1
set $brightwhite #FCE8C3

set $orange #D75F00
set $brightorange #FF8700

set $xgrey1 #262626
set $xgrey2 #303030
set $xgrey3 #3A3A3A
set $xgrey4 #444444
set $xgrey5 #4E4E4E

# Colors                border        backgr  text         indicator child_border
client.focused          $brightyellow $xgrey3 $yellow      $magenta  $yellow
client.focused_inactive $xgrey5       $xgrey3 $brightblack $xgrey3   $xgrey5
client.unfocused        $xgrey1       $xgrey1 $brightblack $xgrey1   $xgrey1
client.urgent           $red          $xgrey1 $red         $red      $red
client.placeholder      $xgrey1       $xgrey1 $brightblack $xgrey1   $xgrey1
client.background       $black

bar {
  colors {
    background $black
    statusline $white
    separator  $white

    # Colors           Border        Background   Text
    focused_workspace  $brightblack  $xgrey3      $yellow
    active_workspace   $xgrey3       $xgrey3      $brightblack
    inactive_workspace $xgrey3       $xgrey1      $brightblack
    urgent_workspace   $red          $red         $black
    binding_mode       $magenta      $magenta     $brightwhite
    }
}

It looks very nice with yellow borders. However in use, and my eyes are focusing on a different window, or off screen, I feel drawn back to the screen. Like it's urgent.

[en0]

@R0flcopt3r I can see where you are coming from. I am going to try to run this for a few days and see if i get any brilliant ideas. or if anyone else has some more tweaks that make it work for everyone.

[roosta]

I don't mind a bit of color, but its worth noting that various srcery themes lean heavily on the gray colors. Take srcery-tmux for example, or lightline for vim. Granted there are splashes of color there but mainly it's using grays for shading.

In my own theme I use magenta as a highlight color, and I don't mind some colorful borders, but I can see where @R0flcopt3r is coming from as well. I could lean either way I guess I'm trying to say. I'll try out some theme variations on my own and if I find anything worthwhile I'll paste it here.

[R0flcopt3r]

I suppose there isn't any issue having a i3wm-colorful, i3wm-dark etc.?

[roosta]

No, I shouldn't think so, good idea.

[barskern]

Personally I also like the white/gray colored borders as @R0flcopt3r added. This screenshot is currently using this version.

With my setup however, the colors in my status bar is not really matching with the window selector anymore. I was previously using blue as a highlight, which was a better fit with a more colored status bar. Also instead of using magenta I was using yellow for the "mode selector".

In conclusion, I like the suggested theme. I will play around with my status bar colors to see if I can get them to fit this theme better.

[en0]

i ran the last 2 days at work with the yellow boarder and i have to admit that i really like it. I am willing to change my MR to suite your needs though. If everyone is good with this version i will modify the PR to use it.

set $black #1C1B19
set $brightblack #918175

set $red #EF2F27
set $brightred #F75341

set $green #519F50
set $brightgreen #98BC37

set $yellow #FBB829
set $brightyellow #FED06E

set $blue #2C78BF
set $brightblue #68A8E4

set $magenta #E02C6D
set $brightmagenta #FF5C8F

set $cyan #0AAEB3
set $brightcyan #53FDE9

set $white #D0BFA1
set $brightwhite #FCE8C3

set $orange #D75F00
set $brightorange #FF8700

set $xgrey1 #262626
set $xgrey2 #303030
set $xgrey3 #3A3A3A
set $xgrey4 #444444
set $xgrey5 #4E4E4E

# Colors                border       backgr  text         indicator child_border
client.focused          $brightblack $xgrey3 $yellow      $yellow   $brightblack
client.focused_inactive $xgrey3      $xgrey3 $brightblack $xgrey3   $xgrey3
client.unfocused        $xgrey1      $xgrey1 $brightblack $xgrey1   $xgrey1
client.urgent           $red         $xgrey1 $red         $red      $red
client.placeholder      $xgrey1      $xgrey1 $brightblack $xgrey1   $xgrey1
client.background       $black

bar {
  colors {
    background $black
    statusline $white
    separator  $white

    # Colors           Border        Background   Text
    focused_workspace  $brightblack  $xgrey3      $yellow
    active_workspace   $xgrey3       $xgrey3      $brightblack
    inactive_workspace $xgrey3       $xgrey1      $brightblack
    urgent_workspace   $red          $red         $black
    binding_mode       $magenta      $magenta     $brightwhite
    }
}

[roosta]

I don't have time to test this today, but from what I can see it looks good. I'll give it a go tomorrow. Thanks for putting so much effort into this pull request.

[roosta]

I like it, but I'd like to make a few suggestions:

• Currently the placeholders look a bit off, its all colored the same except the text. I suggest using hard_black for background. Some screens:
  
  
• I renamed the greys to gray. We made the decision to adher to american naming of variables a while back, so I think this theme should conform.
• I renamed the bright[color] to bright_[color], it's the naming convention in the other themes.

set $black #1C1B19
set $bright_black #918175

set $red #EF2F27
set $bright_red #F75341

set $green #519F50
set $bright_green #98BC37

set $yellow #FBB829
set $bright_yellow #FED06E

set $blue #2C78BF
set $bright_blue #68A8E4

set $magenta #E02C6D
set $bright_magenta #FF5C8F

set $cyan #0AAEB3
set $bright_cyan #53FDE9

set $white #D0BFA1
set $bright_white #FCE8C3

set $orange #D75F00
set $bright_orange #FF8700

set $xgray1 #262626
set $xgray2 #303030
set $xgray3 #3A3A3A
set $xgray4 #444444
set $xgray5 #4E4E4E

set $hard_black #121212


# Colors                border        backgr      text          indicator child_border
client.focused          $bright_black $xgray3     $yellow       $yellow   $bright_black
client.focused_inactive $xgray3       $xgray3     $bright_black $xgray3   $xgray3
client.unfocused        $xgray1       $xgray1     $bright_black $xgray1   $xgray1
client.urgent           $red          $xgray1     $red          $red      $red
client.placeholder      $xgray3       $hard_black $bright_black $xgray3   $xgray3
client.background       $black

bar {
  colors {
    background $black
    statusline $white
    separator  $white

    # Colors           Border        Background   Text
    focused_workspace  $bright_black $xgray3      $yellow
    active_workspace   $xgray3       $xgray3      $bright_black
    inactive_workspace $xgray3       $xgray1      $bright_black
    urgent_workspace   $red          $red         $black
    binding_mode       $magenta      $magenta     $bright_white
    }
}

[en0]

Good changes. I have update the pull request with your changes. Thank you for letting me contribute to your repository. And thank you for the great colors!

[roosta]

Thank you for the contribution. If everyone is OK with these latest changes (@R0flcopt3r, @barskern ) I'm gonna merge.

[barskern]

On 29/05/20 00:33, Daniel Berg wrote: Thank you for the contribution. If everyone is OK ***@***.***) with these latest changes I'm gonna merge. -- You are receiving this because you commented. Reply to this email directly or view it on GitHub: #4 (comment)

I haven't had time to properly test it yet, but personally the `hard_black` background for inactive windows seems a bit harsh on the eyes. I will give it a testrun later today. However if you all like it, I could also modify it locally if need be.

[roosta]

Might be a bit harsh, but it does a good job distinguishing between what is a placeholder and what is just a regular window. I considered just using black but then it just looks like a terminal window. I'm open to other suggestions. Let us know if you find something that works better for you @barskern.

[R0flcopt3r]

I'm okay with the changes, and for a merge.

[roosta]

K, I'm just gonna merge then. Add more comments to this pull request if there's anything that needs tweaking.

[barskern]

distinguishing between what is a placeholder and what is just a regular window.

Aaah I misunderstood. I didn't notice that you called it placeholders, as I assumed it was "normal" terminal windows. I actually haven't used placeholders before, so TIL! Further hard_black is a good way of making this difference clear.