~ubuntu-branches/ubuntu/wily/plasma-desktop/wily-proposed

« back to all changes in this revision

Viewing changes to doc/en/kcontrol/colors/index.docbook

  • Committer: Package Import Robot
  • Author(s): Scarlett Clark
  • Date: 2015-02-23 09:46:57 UTC
  • mfrom: (1.1.4) (0.1.10 vivid-proposed)
  • Revision ID: package-import@ubuntu.com-20150223094657-7vaqxjzob00ejdck
Tags: 4:5.2.1-0ubuntu1
New upstream release

Show diffs side-by-side

added added

removed removed

Lines of Context:
 
1
<?xml version="1.0" ?>
 
2
 
 
3
<!DOCTYPE article PUBLIC "-//KDE//DTD DocBook XML V4.5-Based Variant V1.1//EN"
 
4
"dtd/kdedbx45.dtd" [
 
5
<!ENTITY % addindex "IGNORE">
 
6
<!ENTITY % English "INCLUDE" > <!-- change language only here -->
 
7
]>
 
8
 
 
9
<article id="colors" lang="&language;">
 
10
<articleinfo>
 
11
<title>Colors</title>
 
12
<authorgroup>
 
13
<author>&Matthew.Woehlke; &Matthew.Woehlke.mail;</author>
 
14
<!-- TRANS:ROLES_OF_TRANSLATORS -->
 
15
</authorgroup>
 
16
 
 
17
<date>2013-11-05</date>
 
18
<releaseinfo>4.12</releaseinfo>
 
19
 
 
20
<keywordset>
 
21
<keyword>KDE</keyword>
 
22
<keyword>KControl</keyword>
 
23
<keyword>color</keyword>
 
24
<keyword>kcm</keyword>
 
25
</keywordset>
 
26
</articleinfo>
 
27
 
 
28
<sect1 id="color">
 
29
<title>Colors</title>
 
30
 
 
31
<sect2 id="color-intro">
 
32
  <title>Introduction</title>
 
33
 
 
34
  <para>The Color Selection module is comprised of several sections:</para>
 
35
 
 
36
  <itemizedlist>
 
37
  <listitem><para>
 
38
    <link linkend="color-scheme">The <guilabel>Scheme</guilabel> tab</link>,
 
39
    used to manage schemes.
 
40
  </para></listitem>
 
41
  <listitem><para>
 
42
    <link linkend="color-options">The <guilabel>Options</guilabel> tab</link>,
 
43
    used to change the options of the current scheme.
 
44
  </para></listitem>
 
45
  <listitem><para>
 
46
    <link linkend="color-colors">The <guilabel>Colors</guilabel> tab</link>,
 
47
    used to change the colors of the current scheme.
 
48
  </para></listitem>
 
49
  <listitem><para>
 
50
    <link linkend="color-effects">The state effects tabs</link>
 
51
    (<guilabel>Inactive</guilabel>, <guilabel>Disabled</guilabel>), used to 
 
52
    change the state effects of the current scheme.
 
53
  </para></listitem>
 
54
  </itemizedlist>
 
55
 
 
56
  <para>Note: This documentation will sometimes refer to the
 
57
  &quot;current&quot; scheme, or the &quot;active&quot; scheme.
 
58
  The &quot;current&quot; scheme is the set of colors and color scheme options
 
59
  that was most recently applied, &ie; what you would get if you choose
 
60
  <guibutton>Cancel</guibutton>. The &quot;active&quot; scheme is the set of
 
61
  colors as has been most recently edited by you, &ie; what you would get if
 
62
  you choose <guibutton>Apply</guibutton>.</para>
 
63
</sect2>
 
64
 
 
65
<sect2 id="color-scheme">
 
66
  <title>Scheme Management</title>
 
67
 
 
68
  <para>The <guilabel>Scheme</guilabel> tab lets you manage the color schemes
 
69
  on your machine. Only one scheme is active at once, but you may save schemes,
 
70
  allowing you to quickly change the scheme later. When you have created a
 
71
  scheme you like, you can save it with <guibutton>Save Scheme...</guibutton>.
 
72
  You can remove schemes using <guibutton>Remove Scheme</guibutton>.
 
73
  Note that system schemes cannot be removed; trying to do so will display an
 
74
  error.</para>
 
75
 
 
76
  <para>&kde; ships with several schemes. If you have an Internet connection,
 
77
  you can also browse and retrieve user-created schemes using <guibutton>Get
 
78
  New Schemes...</guibutton>.</para>
 
79
 
 
80
  <sect3>
 
81
    <title>Importing Schemes</title>
 
82
 
 
83
    <para>You can also import schemes that you have downloaded or otherwise
 
84
    obtained, as well as import &kde; 3 schemes. &kde; 4 color schemes are
 
85
    named like &quot;*.colors&quot;, while &kde; 3 schemes are named like
 
86
    &quot;*.kcsrc&quot;.</para>
 
87
 
 
88
    <para>Because &kde; 4 has many more color roles than &kde;, importing a
 
89
    &kde; 3 scheme is different from importing a &kde; 4 scheme. When a
 
90
    &kde; 4 scheme is imported, it becomes part of your saved scheme
 
91
    collection. When a &kde; 3 scheme is imported, the colors that exist in
 
92
    &kde; 3 are overlaid onto the active scheme, and the result is not
 
93
    automatically saved into your collection. After importing a &kde; 3 scheme,
 
94
    you will likely need to adjust the colors that are new in &kde; 4, as well
 
95
    as the state effects. For best results, before importing a &kde; 3 scheme,
 
96
    select a similar &kde; 4 scheme (you do not need to apply the scheme before
 
97
    importing).</para>
 
98
  </sect3>
 
99
</sect2>
 
100
 
 
101
<sect2 id="color-options">
 
102
  <title>Color Scheme Options</title>
 
103
 
 
104
  <para>The <guilabel>Options</guilabel> tab allows you to change some
 
105
  properties that deal with how the color scheme is used, as well as some
 
106
  options that change the color scheme that are different from actually
 
107
  assigning colors.</para>
 
108
 
 
109
  <itemizedlist>
 
110
    <listitem><para><guilabel>Apply inactive window color effects</guilabel>
 
111
      &mdash; If checked, state effects (see below) will be applied to inactive
 
112
      windows. This can help visually identify active versus inactive windows,
 
113
      and may have aesthetic value, depending on your taste. However, some
 
114
      users feel that it causes distracting &quot;flickering&quot; since
 
115
      windows must be repainted when they become inactive. Unlike desktop
 
116
      effects, color state effects do not require compositing support and will
 
117
      work on all systems, however they will only work on &kde; 4 applications.
 
118
    </para></listitem>
 
119
    <listitem><para><guilabel>Inactive selection changes color</guilabel>
 
120
      &mdash; If checked, the current selection in elements which do not have
 
121
      input focus will be drawn using a different color. This can assist visual
 
122
      identification of the element with input focus in some applications,
 
123
      especially those which simultaneously display several lists.
 
124
    </para></listitem>
 
125
    <listitem><para><guilabel>Shade sorted column in lists</guilabel>
 
126
      &mdash; If checked, multi-column lists will use a slightly different
 
127
      color to paint the column whose information is being used to sort the
 
128
      items in the list.
 
129
    </para></listitem>
 
130
    <listitem><para><guilabel>Apply colors to non-KDE4 applications</guilabel>
 
131
      &mdash; If checked, &kde; will attempt to export its color scheme so that
 
132
      non-&kde; 4 applications will use the same colors. Most applications will
 
133
      honor the exported scheme to varying degrees, though some may have bugs
 
134
      or otherwise not honor the exported scheme.
 
135
    </para></listitem>
 
136
    <listitem><para><guilabel>Contrast</guilabel>
 
137
      &mdash; This slider controls the contrast of shaded elements, such as
 
138
      frame borders and the &quot;3D&quot; effects used by most styles. A lower
 
139
      value gives less contrast and therefore softer edges, while a higher
 
140
      value makes such edges &quot;stand out&quot; more.
 
141
    </para></listitem>
 
142
  </itemizedlist>
 
143
 
 
144
</sect2>
 
145
 
 
146
<sect2 id="color-colors">
 
147
  <title>Colors</title>
 
148
 
 
149
  <para>The <guilabel>Colors</guilabel> tab allows you to change the colors in
 
150
  the active color scheme.</para>
 
151
 
 
152
  <para>Creating or changing a scheme is a simple matter of clicking on the
 
153
  swatch in the color list and selecting a new color. You can check your
 
154
  changes at any time by pressing <guibutton>Apply</guibutton>. It is suggested
 
155
  that you save your scheme (via the <guilabel>Scheme</guilabel> tab) when you
 
156
  are done.</para>
 
157
 
 
158
  <para>The <guilabel>Common Colors</guilabel> set, which is displayed
 
159
  initially, is not actually a &quot;set&quot; in the sense used by &kde; (see
 
160
  next section), but presents a number of color roles in a way that makes it
 
161
  easier to edit the scheme as a whole. When creating a new color scheme, you
 
162
  will usually change these colors first, and use the other sets to tweak
 
163
  specific colors if needed.</para>
 
164
 
 
165
  <para>Note that <guilabel>Common Colors</guilabel> makes available roles from
 
166
  all sets. For example, &quot;View Background&quot; here is shorthand for the
 
167
  Normal Background role from the View set. Also, setting colors that do not
 
168
  refer to a specific set will change that color in <emphasis>all</emphasis>
 
169
  sets. (As an exception, &quot;Inactive Text&quot; will change the color for
 
170
  all sets <emphasis>except</emphasis> for Selection; there is a separate
 
171
  &quot;Selection Inactive Text&quot; for Inactive Text in the Selection set.)
 
172
  Some roles may not be visible under <guilabel>Common Colors</guilabel> at
 
173
  all, and can only be changed (if needed) by selecting the appropriate
 
174
  set.</para>
 
175
 
 
176
  <sect3>
 
177
    <title>Color Sets</title>
 
178
 
 
179
    <para>&kde; 4 breaks the color scheme into several sets based on the type
 
180
    of user interface element, as follows:</para>
 
181
    <itemizedlist>
 
182
      <listitem><para><guilabel>View</guilabel> &mdash;
 
183
        information presentation elements, such as lists, trees, text input boxes, etc.
 
184
      </para></listitem>
 
185
      <listitem><para><guilabel>Window</guilabel> &mdash;
 
186
        window elements that are not buttons or views.
 
187
      </para></listitem>
 
188
      <listitem><para><guilabel>Button</guilabel> &mdash;
 
189
        buttons and similar elements.
 
190
      </para></listitem>
 
191
      <listitem><para><guilabel>Selection</guilabel> &mdash;
 
192
        selected text and items.
 
193
      </para></listitem>
 
194
      <listitem><para><guilabel>Tooltip</guilabel> &mdash;
 
195
        tool tips, &quot;What's This&quot; tips, and similar elements.
 
196
      </para></listitem>
 
197
      <listitem><para>Window Manager &mdash;
 
198
        window title bars and related elements.
 
199
      </para></listitem>
 
200
    </itemizedlist>
 
201
 
 
202
    <para>Each set contains a number of color roles. Except for the Window
 
203
    Manager colors, each set has the same roles. All colors are associated with
 
204
    one of the above sets.</para>
 
205
  </sect3>
 
206
 
 
207
  <sect3>
 
208
    <title>Color Roles</title>
 
209
 
 
210
    <para>Each color set is made up of a number of roles which are available in
 
211
    all other sets. (The Window Manager set is an exception; it has its own
 
212
    unique roles that do not exist in any other set, and does not use the same
 
213
    roles as the other sets.) In addition to the obvious Normal Text and Normal
 
214
    Background, these roles are as follows:</para>
 
215
 
 
216
    <itemizedlist>
 
217
      <listitem><para>Alternate Background &mdash;
 
218
        used when there is a need to subtly change the background to aid in
 
219
        item association. This might be used &eg; as the background of a
 
220
        heading, but is mostly used for alternating rows in lists, especially
 
221
        multi-column lists, to aid in visually tracking rows.
 
222
      </para></listitem>
 
223
      <listitem><para>Link Text &mdash;
 
224
        used for hyperlinks or to otherwise indicate &quot;something which may
 
225
        be visited&quot;, or to show relationships.
 
226
      </para></listitem>
 
227
      <listitem><para>Visited Text &mdash;
 
228
        used for &quot;something (&eg; a hyperlink) that has been
 
229
        visited&quot;, or to indicate something that is "old".
 
230
      </para></listitem>
 
231
      <listitem><para>Active Text &mdash;
 
232
        used to indicate an active element or attract attention, &eg; alerts,
 
233
        notifications; also for hovered hyperlinks.
 
234
      </para></listitem>
 
235
      <listitem><para>Inactive Text &mdash;
 
236
        used for text which should be unobtrusive, &eg; comments,
 
237
        &quot;subtitles&quot;, unimportant information, etc.
 
238
      </para></listitem>
 
239
      <listitem><para>Negative Text &mdash;
 
240
        used for errors, failure notices, notifications that an action may be
 
241
        dangerous (&eg; unsafe web page or security context), etc.
 
242
      </para></listitem>
 
243
      <listitem><para>Neutral Text &mdash;
 
244
        used to draw attention when another role is not appropriate; &eg;
 
245
        warnings, to indicate secure/encrypted content, etc.
 
246
      </para></listitem>
 
247
      <listitem><para>Positive Text &mdash;
 
248
        used for success notices, to indicate trusted content, etc.
 
249
      </para></listitem>
 
250
    </itemizedlist>
 
251
 
 
252
    <para>As well as the text roles, there are a few additional
 
253
    &quot;decoration&quot; roles that are used for drawing lines or shading
 
254
    UI elements (while the above may, in appropriate circumstances, also be
 
255
    used for this purpose, the following are specifically
 
256
    <emphasis>not</emphasis> meant for drawing text). These are:</para>
 
257
 
 
258
    <itemizedlist>
 
259
      <listitem><para>Focus Decoration &mdash;
 
260
        used to indicate the item which has active input focus.
 
261
      </para></listitem>
 
262
      <listitem><para>Hover Decoration &mdash;
 
263
        used for mouse-over effects, &eg; the "illumination" effects for
 
264
        buttons.
 
265
      </para></listitem>
 
266
    </itemizedlist>
 
267
 
 
268
    <para>In addition, except for Inactive Text, there is a corresponding
 
269
    background role for each of the text roles. Currently (except for Normal
 
270
    and Alternate Background), these colors are not chosen by the user, but are
 
271
    automatically determined based on Normal Background and the corresponding
 
272
    Text color. These colors may be previewed by selecting one of the sets
 
273
    other than &quot;Common Colors&quot;.</para>
 
274
 
 
275
    <para>The choice of color role is left to the developer; the above are
 
276
    guidelines intended to represent typical usage.</para>
 
277
  </sect3>
 
278
 
 
279
  <sect3>
 
280
    <title>Window Manager Colors</title>
 
281
 
 
282
    <para>As previously stated, the Window Manager set has its own roles,
 
283
    independent of those in other sets. These are (currently) only accessible
 
284
    via <guilabel>Common Colors</guilabel>, and are as follows:</para>
 
285
 
 
286
    <itemizedlist>
 
287
      <listitem><para>Active Titlebar &mdash;
 
288
        used to draw the title bar background, borders, and/or decorations for
 
289
        the active window (that is, the one with input focus). Not all window
 
290
        decorations will use this in the same way, and some may even use the
 
291
        Normal Background from the Window set to draw the title bar.
 
292
      </para></listitem>
 
293
      <listitem><para>Active Titlebar Text &mdash;
 
294
        used to draw the title bar text when Active Titlebar is used to draw
 
295
        the title bar background. May also be used for other foreground
 
296
        elements which use Active Titlebar as the background.
 
297
      </para></listitem>
 
298
    </itemizedlist>
 
299
 
 
300
    <para>The Inactive Titlebar [Text] roles are the same as the above, but for
 
301
    inactive windows, rather than active windows.</para>
 
302
  </sect3>
 
303
 
 
304
</sect2>
 
305
 
 
306
<sect2 id="color-effects">
 
307
  <title>Color State Effects</title>
 
308
 
 
309
  <para>Color state effects are applied to interface elements in the inactive
 
310
  (windows that do not have focus; only if <guilabel>Apply inactive window
 
311
  color effects</guilabel> is enabled) or disabled states. By changing the
 
312
  effects, the appearance of elements in these states can be changed. Usually,
 
313
  inactive elements will have reduced contrast (text fades slightly into the
 
314
  background) and may have slightly reduced intensity, while disabled elements
 
315
  will have strongly reduced contrast and are often notably darker or lighter.
 
316
  </para>
 
317
 
 
318
  <para>Three types of effect may be applied to each state (with the effects
 
319
  of the two states being independent). These are Intensity, Color and
 
320
  Contrast. The first two (Intensity, Color) control the overall color, while
 
321
  the last (Contrast) deals with the foreground colors relative to the
 
322
  background.</para>
 
323
 
 
324
  <sect3>
 
325
    <title>Intensity</title>
 
326
 
 
327
    <para>Intensity allows the overall color to be lightened or darkened.
 
328
    Setting the slider to the middle produces no change. The available effects
 
329
    are:</para>
 
330
 
 
331
    <itemizedlist>
 
332
      <listitem><para>Shade &mdash;
 
333
        makes everything lighter or darker in a controlled manner. Each
 
334
        &quot;tick&quot; on the slider increases or decreases the overall
 
335
        intensity (&ie; perceived brightness) by an absolute amount.
 
336
      </para></listitem>
 
337
      <listitem><para>Darken &mdash;
 
338
        changes the intensity to a percentage of the initial value. A slider
 
339
        setting halfway between middle and maximum results in a color half as
 
340
        intense as the original. The minimum gives a color twice as intense as
 
341
        the original.
 
342
      </para></listitem>
 
343
      <listitem><para>Lighten &mdash;
 
344
        conceptually the opposite of darken; lighten can be thought of as
 
345
        working with &quot;distance from white&quot;, where darken works with
 
346
        &quot;distance from black&quot;. The minimum is a color twice as
 
347
        &quot;far&quot; from white as the original, while halfway between
 
348
        middle and maximum gives an intensity halfway between the original
 
349
        color and white.
 
350
      </para></listitem>
 
351
    </itemizedlist>
 
352
  </sect3>
 
353
 
 
354
  <sect3>
 
355
    <title>Color</title>
 
356
 
 
357
    <para>Color also changes the overall color, but is not limited to
 
358
    intensity. The available effects are:</para>
 
359
 
 
360
    <itemizedlist>
 
361
      <listitem><para>Desaturate &mdash;
 
362
        changes the relative chroma. The middle setting produces no change;
 
363
        maximum gives a gray whose perceptual intensity equals that of the
 
364
        original color. Lower settings increase the chroma, giving a color that
 
365
        is less gray / more &quot;vibrant&quot; than the original.
 
366
      </para></listitem>
 
367
      <listitem><para>Fade &mdash;
 
368
        smoothly blends the original color into a reference color. The minimum
 
369
        setting on the slider produces no change; maximum gives the reference
 
370
        color.
 
371
      </para></listitem>
 
372
      <listitem><para>Tint &mdash;
 
373
        similar to Fade, except that the color (hue and chroma) changes more
 
374
        quickly while the intensity changes more slowly as the slider value is
 
375
        increased.
 
376
      </para></listitem>
 
377
    </itemizedlist>
 
378
  </sect3>
 
379
 
 
380
  <sect3>
 
381
    <title>Contrast</title>
 
382
 
 
383
    <para>The contrast effects are similar to the color effects, except they
 
384
    apply to the text, using the background color as the reference color, and
 
385
    desaturate is not available. Fade produces text that &quot;fades out&quot;
 
386
    more quickly, but keeps its color longer, while Tint produces text that
 
387
    changes color to match the background more quickly while keeping a greater
 
388
    intensity contrast for longer (where &quot;longer&quot; means higher
 
389
    settings on the slider). For Contrast effects, the minimum setting on the
 
390
    slider produces no change, while maximum causes the text to completely
 
391
    disappear into the background.</para>
 
392
  </sect3>
 
393
 
 
394
</sect2>
 
395
 
 
396
</sect1>
 
397
 
 
398
</article>
 
399
<!-- kate: indent-width 2; replace-tabs on; -->