ColorScheme - defines color values for standard set of internal
color names, to be used in other configuration files
- Active
-
Color that will be used for background of different focused elemets, such as
focused window's titlebar, 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 slightly lesser value then Active (be 5-10% darker).
This is useful when background of focused titlebar is a gradient.
- ActiveLight
-
This color should have slightly higher value then Active (be 5-10% lighter).
This is useful when background of focused titlebar is a gradient.
- ActiveText
-
Color of the text on focused titlebars. It should be in high value contrast
with Active color.
- Angle
-
Defines angle on the hue circle between Inactive1, Base and Inactive2 colors
in color schemes, that are automagically calculated by AfterStep. Default
angle is 30 degrees. Use smaller angle to make Inactive and Base colors
more similar.
- Base
-
This color is defining color of the color scheme. It will be used for
desktop background. When AfterStep is allowed to calculate color scheme
automagically - it will use this color in conjunction with the Angle value
as base of calculations.
- BaseDark
-
Color that should be about 10% darker then the Base color, but have similar
hue and saturation. Useful for drawing gradiented desktop background.
- BaseLight
-
Color that should be about 10% lighter then the Base color, but have similar
hue and saturation. Useful for drawing gradiented desktop background.
- Cursor
-
This color will be used for pmouse pointer, and it should be in high
contrast with all the other colors.
- DisabledText
-
Color of the text of disabled menu items. Should be very similar to menu
item's background color.
- HighActive
-
Used for focused menus. Should be similar to Active color, but somewhat
lighter.
- HighActiveBack
-
Used for current menu item's background. Should be similar, but somewhat
brighter them Active color.
- HighActiveBackDark
-
Should be 10% darker then HighActiveBack color. Useful for gradiented
background of selected menu item.
- HighActiveBackLight
-
Should be 10% lighter then HighActiveBack color. Useful for gradiented
background of selected menu item.
- HighActiveDark
-
Should be 10% darker then HighActive color. Useful for gradiented background
of focused menu titlebar.
- HighActiveLight
-
Should be 10% lighter then HighActive color. Useful for gradiented
background of focused menu titlebar.
- HighActiveText
-
Color to be used for drawing text on focused menu titlebar. Should be in
high contrast with HighActive color.
- HighInactive
-
Used for unfocused menus. Should be similar to Inactive1 color, but somewhat
lighter.
- HighInactiveBack
-
Used for inactive menu item's background. Should be similar, but somewhat
brighter them HighInactive color.
- HighInactiveBackDark
-
Should be 10% darker then HighInactiveBack color. Useful for gradiented
background of inactive menu item.
- HighInactiveBackLight
-
Should be 10% lighter then HighInactiveBack color. Useful for gradiented
background of inactive menu item.
- HighInactiveDark
-
Should be 10% darker then HighInactive color. Useful for gradiented
background of inactive menu titlebars.
- HighInactiveLight
-
Should be 10% lighter then HighInactive color. Useful for gradiented
background of inactive menu titlebars.
- HighInactiveText
-
Color of the text on unfocused menu titlebar. Should be highly contrasting
with HighInactive color.
- Inactive1
-
Primary color used for unfocused window titlebar's background.
- Inactive1Dark
-
Should be 10% darker then Inactive1. Useful for gradiented background of
unfocused windows.
- Inactive1Light
-
Should be 10% lighter then Inactive1. Useful for gradiented background of
unfocused windows.
- Inactive2
-
Secondary color used for unfocused window titlebar's background. Should be
used for unfocused sticky windows.
- Inactive2Dark
-
Should be 10% darker then Inactive2. Useful for gradiented background of
sticky windows.
- Inactive2Light
-
Should be 10% lighter then Inactive2. Useful for gradiented background of
sticky windows.
- InactiveText1
-
Color of the text on unfocused titlebars. Should be highly contrasting with
Inactive1.
- InactiveText2
-
Color of the text on sticky titlebars. Should be highly contrasting with
Inactive2.
AfterStep color schemes are supposed to ease the pain of assembling set of
colors that go well with each other, while providing additional flexibility
while designing custom looks/themes.
AfterStep Colorscheme is a standard set of color names, that may have different
color values assigned to them. This color names are used in defining Look and
in XML images. By assigning different color values to the same color names it
is possible to instantly change colors throughout entire Look, without
altering any images or configuration files.
Not all of the Colorscheme colors have to be explicitly defined. Only the Base
color is important. AfterStep is capable of autogeneration of good-looking
colorscheme, from this single color. Explicit color definition in colorscheme
file will override any automatic choice. Example of this is the NeXTish
colorscheme, where all of the colors are customized. If grayscale color is
chosen for Base - it will generate grayscale colorscheme, where different
shades of gray are used for different colors.
Selected colorscheme file is loaded by all modules and afterstep proper.
Whenever 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 color scheme - single hue, or several
hues.
Single hue colors differ in its saturation, and usually allow for a soothing,
simple theme. Such 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 theme a bit more exciting, and adds more visual cues to
the screen, providing for easier operation, and allowing 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
harmonious theme? The rule of the thumb is that hues that are close to each
other on color circle go well with each other, while those, located on
opposing sides of the circle, create 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 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 way to make sure that hue of the image matches that of the
background :
- tinting
- If an image has 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 image into HSV
colorspace, changing range of hues, and then converting 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 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.
- 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.