Changing theme/"Appending colour palettes in .config."

Support
1

I’m trying to change theme of i3 to Dracula and have downloaded the theme from here Dark theme for i3 and 245+ apps — Dracula. The instructions are very short, simply:

  • Download using the GitHub .zip download option.
  • Append the colour palettes in .config to your existing i3 configuration files.

It’s in the second step that I’m a bit hesitant about how to proceed. There are two files in the downloaded zip-file, “.config/i3status/config” and “.config/.i3/config”. I’m considering looking up the matching code in my “.i3/config” and replacing it with what is present in the two files from the .zip-file. Is there another safer and more effective way of doing it?

2

Hi @glob,

While I don’t use i3, I would have backed up the current directories/files and then replaced them with the downloaded ones.

If it doesn’t overwrite anything, the backup gives you an easy way to revert changes to when it wasn’t installed yet.

Hope this helps!

Edit:

Also see how to use gtk themes with i3 - i3 FAQ

2 Likes
3

I’m afraid there isn’t another way of doing it, you have to manually replace the entries in your existing config file.
As @Mirdarthos already mentioned, create a backup copy of your i3 config file first.

The section for the bar you have to edit is this one:

For the theme colors (colors for floating windows, window borders, etc) you have to edit this section of your config file:

To see the changes just restart i3 using $mod+Shift+r. If there are any errors in your config file, you’ll get a notification, so that you can correct them.

1 Like
4

Thanks! Yes, I wouldn’t dare fiddling with the config without taking a backup first!

5

You are a smarter man than I, when I just started Linux.

So that advice comes from personal experience.

6

Thanks! Some of the customization worked (the color of focused windows and dmenu), but the only difference I can see on the status bar is that it left the color of my active workspace gray. This also happened to me when I tried to change colors in Conky. With Conky, I looked up the hexademicals and replaced them, but it only resulted in this same gray color on the information regarding shortcuts, monitors of CPU etc. For reference, this was the original code:

bar {
    colors {
        background #222D31
        statusline #F9FAF9
        separator  #454947

#                      border  backgr. text
        focused_workspace  #F9FAF9 #16a085 #292F34
        active_workspace   #595B5B #353836 #FDF6E3
        inactive_workspace #595B5B #222D31 #EEE8D5
        binding_mode       #16a085 #2C2C2C #F9FAF9
        urgent_workspace   #16a085 #FDF6E3 #E5201D
    }
}

And this is what I replaced it with:

bar {    
    colors {
        background #282A36
        statusline #F8F8F2
        separator  #44475A

    #                      border  backgr. text
        focused_workspace  #44475A #44475A #F8F8F2
        active_workspace   #282A36 #44475A #F8F8F2
        inactive_workspace #282A36 #282A36 #BFBFBF
        binding_mode       #FF5555 #FF5555 #F8F8F2
        urgent_workspace   #FF5555 #FF5555 #F8F8F2
        }
    }

I couldn’t find code in my “~.i3/config”-file to replace with the code in the file “.config/i3status/config”, which is why I added it as a new section. This breaks the config file though, making the bar disappear. The config-breaking code is this:

    general {
      	output_format = "i3bar"
      	colors = true
      	color_good = "#50FA7B"
      	color_degraded = "#F1FA8C"
      	color_bad = "#FF5555"
    	}

And I added it in this manner to the code shown above:

bar {    
    colors {
        background #282A36
        statusline #F8F8F2
        separator  #44475A

    #                      border  backgr. text
        focused_workspace  #44475A #44475A #F8F8F2
        active_workspace   #282A36 #44475A #F8F8F2
        inactive_workspace #282A36 #282A36 #BFBFBF
        binding_mode       #FF5555 #FF5555 #F8F8F2
        urgent_workspace   #FF5555 #FF5555 #F8F8F2
    }
    general {
      	output_format = "i3bar"
      	colors = true
      	color_good = "#50FA7B"
      	color_degraded = "#F1FA8C"
      	color_bad = "#FF5555"
    	}
    }

And finally, this is the part that seems to work, but I’m posting it just in case it could be the cause of my issues. New code:

# Theme colors
# class                   border  backgr. text    indic.   child_border
client.focused          #6272A4 #6272A4 #F8F8F2 #6272A4   #6272A4
client.focused_inactive #44475A #44475A #F8F8F2 #44475A   #44475A
client.unfocused        #282A36 #282A36 #BFBFBF #282A36   #282A36
client.urgent           #44475A #FF5555 #F8F8F2 #FF5555   #FF5555
client.placeholder      #282A36 #282A36 #F8F8F2 #282A36   #282A36

client.background       #F8F8F2

And old code:

# Theme colors
# class                   border  backgr. text    indic.   child_border
  client.focused          #556064 #556064 #80FFF9 #FDF6E3
  client.focused_inactive #2F3D44 #2F3D44 #1ABC9C #454948
  client.unfocused        #2F3D44 #2F3D44 #1ABC9C #454948
  client.urgent           #CB4B16 #FDF6E3 #1ABC9C #268BD2
  client.placeholder      #000000 #0c0c0c #ffffff #000000 

  client.background       #2B2C2B
7

Haha, same here. Think I started doing this after breaking my second OS.

8

Something like that, yeah. But, at least we learned. Theoretically.

9

i3status has a separate config file. Create the directory ~/.config/i3status/ and copy the default config file in it:

cp /etc/i3status.conf ~/.config/i3status/config

After doing so, open the file ~/.config/i3status/config and change the section general with the one provided from the theme you downloaded.

If this is the final edition in your i3 config file, the background color of the active workspace should be #44475A (Very dark grayish blue). You can replace this color with something you like better. Just because it’s in the theme you downloaded, doesn’t mean that you can’t change it.

1 Like
10

Thank you for the thorough explanation!

It’s a bit strange, but after following your instructions, the only thing that changed was the text “no lan” turning yellow in my i3bar (the bar on the bottom of the screen). Looking at the picture from the site I provided in the OP, it looks like a lot more should change. Any idea what could be the reason? After making the edit, I saved the config (located in i3status) and pressed mod+shift+r.

11

I looked at the screenshot from the repository. Seems to me that colors were changed in .Xresources as well.

OT: Big thumbs-up for sway…you can actually source/include files in the main config.

2 Likes
12

I’m not sure how the colors were applied in the picture you posted, since there is no configuration for that.

Probably they used pango markup in the ~/.config/i3status/config file.

If you want to try it yourself, add markup = "pango" at the end of the general definition, so that it becomes like this:

general {
      	output_format = "i3bar"
      	colors = true
      	color_good = "#50FA7B"
      	color_degraded = "#F1FA8C"
      	color_bad = "#FF5555"
        markup = "pango"
}

After that, go to every module defined in your ~/.config/i3status/config file and add a color you like in the output of it.
For example, let’s take the definition for the CPU usage module. You probably have something similar to this in your file:

cpu_usage {
        format = " cpu  %usage "
}

You can change the color of the output of this module in the i3bar to red #ff0000 (as an example) like this:

cpu_usage {
        format = " <span color='#ff0000'>cpu  %usage</span> "
}

The same way, you can color the output of the other modules (battery, memory, etc), so that they become similar to the picture you posted.

After every change you make, a restart of i3 is needed using $mod+Shift+r.

More information about i3status can be found here:
https://i3wm.org/docs/i3status.html

1 Like
13

Thank you! Looks like I will do some further tweaking. I finally installed Manjaro as a separate partion instead of running it on a flash drive, so I have some stuff to get in order before I’m back where I left off in the thread!

1 Like
14

Thank you, I will checkit out!