JWM Part 3 Window Color

Published on September 23, 2021 at 6:28 am by LEW

Introduction

After previously walking through adding menu items to JWM, we will now turn our attention to style elements related to the graphical display. We will take a high level look at setting colors, and images for the window display element.

I will start with a somewhat technical discussion, before moving into some of the common styling options related to color.

Somewhat Technical Stuff

Lets assume your screen is a canvas. The color of the canvas is referred to as the β€œBackground” color. Anything we put on the screen over the background will be in the β€œForeground” color. Now if we put a border around the screen, that will be an β€œOutline” color. These three terms are used repeatedly when styling the various elements in JWM.

Another item used repeatedly is β€œActive”. Any element you are using or pointing to is considered active. Conversely, though there is no specific design element for it, anything you are not pointing at/using is considered β€œInactive”. Items like windows and menus can can be active when you are pointing at them. They are inactive or in default state when you are not pointing at them. So any styling parameters are considered inactive unless they are within the active tag.

JWM has three ways of representing colors. Either as a six digit hex number (16 million colors), three digit hex numbers (4096 colors), or a known defined color name.

Six digit colors are RGB (Red Green Blue) represented as a hexadecimal number of the form #RRGGBB. Three digit colors are also a hex number represented as #RGB. In both formats the first digits represent the amount of red, then next the amount of green, and the last the amount of blue.

Color names can be found on a Debian install in the file /usr/share/X11/rgb.txt. Any of the color names in this file can be entered instead of a RGB hex color.

Working With Window Colors

Below is the WindowStyle tag section from a default JWM configuration file, which we will use to test some color combinations. Note the use of indentation and white space for better readability. Also note that this is mostly a visual post, as picture’s explain it much better than I could write it.

In this first set of images, the left image is inactive and the right image is active. We are also using six digit hex numbers for the colors.

Default JWM Window Colors

The next set of images is the same as before, except we have exchanged the six digit hex numbers for some color names from the rgb.color file.

JWM Color Name Model

This set of images is using three hex numbers for the colors.

JWM 3 Hex Number Color Model

And finally one last example. We will use the JWM gradient option using two colors for the window border color. Note how the two colors are separated by a colon.

JWM Gradiant Color Modle

Conclusion

This has been a real quick look into adding color your JWM windows as part of theme customization. it is a fairy easy task to modify and testΒ  the color values.

Next post, we will visit the desktop background.

JWM Part 1 Taking Control
JWM Part 2 The Menu
JWM Part 3 Window Color
JWM Part 4 Desktop Background
JWM Part 5 The Tray
JWM Part 6 Exiting JWM
JWM Part 7 Bindings and Groups

Add New Comment

Your email address will not be published. Required fields are marked *