ColorScheme(1x)

✨ ColorScheme(1x) ✨

okay so bestie, you're looking at the ColorScheme(1x) page for the AfterStep X11 window manager 💖 and it's literally all about defining color values for a standard set of internal color names, which then get used in other configuration files. no cap, it's giving palette central. 🎨✨

---

🌸 NAME 🌸

ColorScheme — defines color values for a standard set of internal color names, to be used in other configuration files. periodt. 💅

---

🎀 CONFIGURATION OPTIONS 🎀

here's the whole menu of color names, bestie. don't skip any, they all matter. 🫶

• Active — the color that gets used for the background of all the different focused elements, like the focused window's titlebar, the selected menu item, etc. This color should be contrasting with Base, Inactive1, and Inactive2 in hue, but similar in saturation. 💅
• ActiveDark — this color should have a slightly lesser value than Active (like 5-10% darker). It's useful when the background of the focused titlebar is a gradient. 🦋
• ActiveLight — this color should have a slightly higher value than Active (like 5-10% lighter). It's useful when the background of the focused titlebar is a gradient. ✨
• ActiveText — the color of the text on focused titlebars. It should be in high value contrast with the Active color. 💖
• Angle — defines the angle on the hue circle between the Inactive1, Base, and Inactive2 colors in color schemes that are automagically calculated by AfterStep. The default angle is 30 degrees. Use a smaller angle to make the Inactive and Base colors more similar. 🌈
• Base — this color is what defines the color of the color scheme. It will be used for the desktop background. When AfterStep is allowed to calculate the color scheme automagically, it will use this color in conjunction with the Angle value as the base of calculations. 👑
• BaseDark — a color that should be about 10% darker than Base, but with similar hue and saturation. Useful for drawing a gradiented desktop background. 💜
• BaseLight — a color that should be about 10% lighter than Base, but with similar hue and saturation. Useful for drawing a gradiented desktop background. 🌸
• Cursor — this color will be used for the pmouse pointer, and it should be in high contrast with all the other colors. 🎀
• DisabledText — the color of the text of disabled menu items. It should be very similar to the menu item's background color. 💀
• HighActive — used for focused menus. Should be similar to the Active color, but somewhat lighter. 🔥
• HighActiveBack — used for the current menu item's background. Should be similar, but somewhat brighter than the Active color. ✨
• HighActiveBackDark — should be 10% darker than HighActiveBack. Useful for a gradiented background of the selected menu item. 🦋
• HighActiveBackLight — should be 10% lighter than HighActiveBack. Useful for a gradiented background of the selected menu item. 💖
• HighActiveDark — should be 10% darker than HighActive. Useful for a gradiented background of the focused menu titlebar. 🌈
• HighActiveLight — should be 10% lighter than HighActive. Useful for a gradiented background of the focused menu titlebar. 💅
• HighActiveText — the color to be used for drawing text on the focused menu titlebar. Should be in high contrast with the HighActive color. 👑
• HighInactive — used for unfocused menus. Should be similar to the Inactive1 color, but somewhat lighter. 🎀
• HighInactiveBack — used for the inactive menu item's background. Should be similar, but somewhat brighter than the HighInactive color. 💜
• HighInactiveBackDark — should be 10% darker than HighInactiveBack. Useful for a gradiented background of the inactive menu item. 🌸
• HighInactiveBackLight — should be 10% lighter than HighInactiveBack. Useful for a gradiented background of the inactive menu item. ✨
• HighInactiveDark — should be 10% darker than HighInactive. Useful for a gradiented background of inactive menu titlebars. 🦋
• HighInactiveLight — should be 10% lighter than HighInactive. Useful for a gradiented background of inactive menu titlebars. 💖
• HighInactiveText — the color of the text on the unfocused menu titlebar. Should be highly contrasting with the HighInactive color. 💅
• Inactive1 — the primary color used for the background of unfocused window titlebars. 🌈
• Inactive1Dark — should be 10% darker than Inactive1. Useful for a gradiented background of unfocused windows. 👑
• Inactive1Light — should be 10% lighter than Inactive1. Useful for a gradiented background of unfocused windows. 🎀
• Inactive2 — the secondary color used for the background of unfocused window titlebars. Should be used for unfocused sticky windows. 💜
• Inactive2Dark — should be 10% darker than Inactive2. Useful for a gradiented background of sticky windows. 🌸
• Inactive2Light — should be 10% lighter than Inactive2. Useful for a gradiented background of sticky windows. ✨
• InactiveText1 — the color of the text on unfocused titlebars. Should be highly contrasting with Inactive1. 🦋
• InactiveText2 — the color of the text on sticky titlebars. Should be highly contrasting with Inactive2. 💖

✨ DESCRIPTION ✨

Okay bestie, so AfterStep color schemes? They're literally here to ease the pain of assembling a set of colors that go well with each other, while also giving you extra flexibility while designing custom looks/themes. 💖

AfterStep Colorscheme is a standard set of color names, that may have different color values assigned to them. These color names are used in defining Look and in XML images. By assigning different color values to the same color names, you can instantly change colors throughout the entire Look, without altering any images or configuration files. Slay. ✨

Not all of the Colorscheme colors have to be explicitly defined. Only the Base color is important. AfterStep is capable of autogeneration of a good-looking colorscheme from this single color. Explicit color definition in the colorscheme file will override any automatic choice. Example of this is the NeXTish colorscheme, where all of the colors are customized. If a grayscale color is chosen for Base, it will generate a grayscale colorscheme, where different shades of gray are used for different colors. 🩶

Selected colorscheme file is loaded by all modules and afterstep proper. Whenever a new colorscheme is selected, it triggers reloading of the Look file and all image files. 🔄

All of the supplied Look files had been written to take advantage of the AfterStep colorschemes. 👑

Please read below for more details on how colorschemes are generated and other color-related topics: 👇

🌈 HARMONIOUS COLORS 🌈

Task of selecting a set of matching colors is a serious matter, and it was studied by artists and designers for centuries. As the result, there are certain rules developed to simplify this task. 🎨

Firstly, instead of selecting colors in Red/Green/Blue colorspace, matching colors should be selected using Hue/Saturation/Value (HSV) colorspace. Color hues are the most important characteristic of the color, and is measured in degrees from 0 (red hue) to 60 (yellow hue) to 120 (green hue) to 180 (cyan hue) to 240 (blue hue) to 300 (purple hue) and then to 360 which is the same hue as 0 — red. Hues could be placed on a so called color circle, making it easier to choose matching colors. 🌈

There are two main approaches to selecting a color scheme — single hue, or several hues.

Single hue colors differ in its saturation, and usually allow for a soothing, simple theme. Such a theme could be pleasant to look at, but it lacks in excitement, and makes it difficult to distinguish between different elements. 😴

Using several hues makes the theme a bit more exciting, and adds more visual cues to the screen, providing for easier operation, and allowing the user to relax eye muscles, resulting in better ergonomics. Accordingly this is the approach that should be used for user interface colors. Now how to select hues that compose a harmonious theme? The rule of the thumb is that hues that are close to each other on the color circle go well with each other, while those located on opposing sides of the circle create a contrasting effect. 💥

AfterStep addresses the task of selecting harmonious colors by generating a set of colors from a single color using designer rules. ✨

🖼️ IMAGE HUES 🖼️

Look of the screen (aka Theme) includes numerous images, such as icons, backgrounds, bars, etc. Each such image may have one or several dominating hues, which brings us back to the task of matching hues, in order to achieve a harmonious look. 🖼️

The rule of the thumb to follow here is that each image on any particular interface element, such as titlebar, should have at least one dominating hue to be the same as the hue of the background of this element. 🎯

There are several ways to make sure that the hue of the image matches that of the background:

tinting

If an image has a single dominating hue, it could be converted to grayscale and then tinted with the color of the background. 🎨

hue rotation

If an image has several hues, or a hue and some grayscale parts — its hues could be rotated, by converting the image into HSV colorspace, changing the range of hues, and then converting the image back into RGB colorspace. 🔄

superimposition

Also image hues may be altered by superimposing it over the background image using allanon composition method, where each pixel is substituted with the average of image's pixel value and background's pixel value. 🌫️

AfterStep addresses the task of changing hues of images using XML image scripting. See asimagexml for more on that. 📜

🎨 COLOR NAMES 🎨

AfterStep Colorscheme color names could be separated in several categories:

Foreground and Background

Foreground colors are used to render text, while background colors make up a backdrop for that text. Now there are several constraints on foreground colors — they should be contrasting with backgrounds, and it is always better to constrain foreground colors to black and white, as colored text tends to "bleed" ontop background, making it less eligible. Another problem with foreground being colorful is that it increases strain on user's eyes, forcing them to adapt to too many different contrasting colors. 👀

Base, Active and Inactive

General color theme of the screen is determined by background. Accordingly we term it a Base color, and determine the rest of the colors as relation to it. Now at any given time there could be one element that is focused and active, while other are off focus and should assume lower visibility. We define Active colors to be used with focused items (should be contrasting with the Base color). We also define Inactive colors to be used with off-focus items (its a good idea to make them analogues to the Base color). Now as we may have 2 kinds of off-focus windows (sticky and non-sticky), we actually define 2 Inactive colors: Inactive1 and Inactive2. 👑

Gradient colors

Gradients create a very appealing look when used to color titlebars and other interface elements. Generally its a good idea to use colors of the same hue, but having different intensity. To denote colors designated for gradients we add Dark/Light postfix to color names. 🌈

🌈 COLOR VALUES 🌈

AfterStep supports extremely flexible and extensive ways to define color value. Standard approach is to use #RRGGBB notation. In addition to that, AfterStep supports the following notations:

• #RGB — Same as #RRGGBB, only using 4bit values for components. For example #F84 is the same as #F08040. ✨
• #ARGB — This is the same as #RGB plus Alpha value is added (Alpha value defines opacity of the color). 🫥
• #AARRGGBB — This is the same as #RRGGBB plus 8-bit Alpha value is added. 💧
• hsv(hue,saturation,value) — Defines color using HSV colorspace. Hue is measured from 0 to 360 degrees, saturation and value are measured from 0 to 100. 🎨
• rgb(red,green,blue) — Defines color in RGB colorspace. Similar to #RRGGBB form, but values are not in hex, but in decimals (from 0 to 255). It also allows for nested expressions, such as: rgb(128,128,blue(Base)). 🧮
• ahsv(alpha,hue,saturation,value) — Same as hsv(), but also adds Alpha channel. 🫥
• argb(alpha,red,green,blue) — Same as argb(), but also adds Alpha channel. 🤔 (yes bestie, that's literally what it says)
• hue(hue,color) — Alters hue of the given predefined color, preserving its saturation and value. 🌈
• sat(saturation,color) — Alters saturation of the given predefined color. 🎚️
• val(value,color) — Alters value of the given predefined color. ⚡
• alpha(alpha,color) — Alters alpha of the given predefined color. This is useful to make colors from colorscheme semi-transparent. 👻
• red(red,color) — Alters red channel value of the given predefined color. ❤️
• green(green,color) — Alters green channel value of the given predefined color. 💚
• blue(blue,color) — Alters blue channel value of the given predefined color. 💙

Example:

#This could be used in colorscheme definition :

Inactive1 #FF5C5B66           # or ahsv(255,245,10,40) or argb(255,92,91,102)

#This could be used in MyStyle definition in the look.  #That makes Sticky window's titlebar semi-transparent:

BackMultiGradient   6 alpha(50,Inactive2Dark) 0.0 alpha(50,Inactive2Light) 1.0

Actuall usage of colors is defined in AfterStep look file, in MyStyle definitions. Also all ColorScheme colors could be used in AfterStep XML images, similarly to standard X color aliases. It is also possible to use different aspects of each color — red, green, blue and alpha, hue, saturation and value individualy. For each color there are 6 variables defined using following sytax: $ascs.colorname.component. For example $ascs.Active.hue represents hue of the Active color. This is useful while doing transformations (tinting, hsv, etc ) in AfterStep XML images. 🧚

---

That's the whole vibe, bestie. This page came from the 3rd Berkeley Distribution, AfterStep v.2.2.12, and it's the ColorScheme(1x) manual page. Now go make your desktop look absolutely iconic. 💅✨