Merge branch 'ProtractorNinja-more-color-settings'

README.asciidoc

@@ -140,6 +140,7 @@ Contributors, sorted by the number of commits in descending order:
 * Claude
 * Lamar Pavel
 * Martin Tournoij
+* Austin Anderson
 * Artur Shaik
 * Antoni Boucher
 * ZDarian

doc/help/settings.asciidoc

@@ -187,13 +187,21 @@
 |<<colors-completion.item.selected.border.top,completion.item.selected.border.top>>|Top border color of the completion widget category headers.
 |<<colors-completion.item.selected.border.bottom,completion.item.selected.border.bottom>>|Bottom border color of the selected completion item.
 |<<colors-completion.match.fg,completion.match.fg>>|Foreground color of the matched text in the completion.
-|<<colors-statusbar.bg,statusbar.bg>>|Foreground color of the statusbar.
 |<<colors-statusbar.fg,statusbar.fg>>|Foreground color of the statusbar.
+|<<colors-statusbar.bg,statusbar.bg>>|Foreground color of the statusbar.
+|<<colors-statusbar.fg.error,statusbar.fg.error>>|Foreground color of the statusbar if there was an error.
 |<<colors-statusbar.bg.error,statusbar.bg.error>>|Background color of the statusbar if there was an error.
+|<<colors-statusbar.fg.warning,statusbar.fg.warning>>|Foreground color of the statusbar if there is a warning.
 |<<colors-statusbar.bg.warning,statusbar.bg.warning>>|Background color of the statusbar if there is a warning.
+|<<colors-statusbar.fg.prompt,statusbar.fg.prompt>>|Foreground color of the statusbar if there is a prompt.
 |<<colors-statusbar.bg.prompt,statusbar.bg.prompt>>|Background color of the statusbar if there is a prompt.
+|<<colors-statusbar.fg.insert,statusbar.fg.insert>>|Foreground color of the statusbar in insert mode.
 |<<colors-statusbar.bg.insert,statusbar.bg.insert>>|Background color of the statusbar in insert mode.
+|<<colors-statusbar.fg.command,statusbar.fg.command>>|Foreground color of the statusbar in command mode.
+|<<colors-statusbar.bg.command,statusbar.bg.command>>|Background color of the statusbar in command mode.
+|<<colors-statusbar.fg.caret,statusbar.fg.caret>>|Foreground color of the statusbar in caret mode.
 |<<colors-statusbar.bg.caret,statusbar.bg.caret>>|Background color of the statusbar in caret mode.
+|<<colors-statusbar.fg.caret-selection,statusbar.fg.caret-selection>>|Foreground color of the statusbar in caret mode with a selection
 |<<colors-statusbar.bg.caret-selection,statusbar.bg.caret-selection>>|Background color of the statusbar in caret mode with a selection
 |<<colors-statusbar.progress.bg,statusbar.progress.bg>>|Background color of the progress bar.
 |<<colors-statusbar.url.fg,statusbar.url.fg>>|Default foreground color of the URL in the statusbar.
@@ -202,10 +210,10 @@
 |<<colors-statusbar.url.fg.warn,statusbar.url.fg.warn>>|Foreground color of the URL in the statusbar when there's a warning.
 |<<colors-statusbar.url.fg.hover,statusbar.url.fg.hover>>|Foreground color of the URL in the statusbar for hovered links.
 |<<colors-tabs.fg.odd,tabs.fg.odd>>|Foreground color of unselected odd tabs.
-|<<colors-tabs.fg.even,tabs.fg.even>>|Foreground color of unselected even tabs.
-|<<colors-tabs.fg.selected,tabs.fg.selected>>|Foreground color of selected tabs.
 |<<colors-tabs.bg.odd,tabs.bg.odd>>|Background color of unselected odd tabs.
+|<<colors-tabs.fg.even,tabs.fg.even>>|Foreground color of unselected even tabs.
 |<<colors-tabs.bg.even,tabs.bg.even>>|Background color of unselected even tabs.
+|<<colors-tabs.fg.selected,tabs.fg.selected>>|Foreground color of selected tabs.
 |<<colors-tabs.bg.selected,tabs.bg.selected>>|Background color of selected tabs.
 |<<colors-tabs.bg.bar,tabs.bg.bar>>|Background color of the tab bar.
 |<<colors-tabs.indicator.start,tabs.indicator.start>>|Color gradient start for the tab indicator.
@@ -213,13 +221,16 @@
 |<<colors-tabs.indicator.error,tabs.indicator.error>>|Color for the tab indicator on errors..
 |<<colors-tabs.indicator.system,tabs.indicator.system>>|Color gradient interpolation system for the tab indicator.
 |<<colors-hints.fg,hints.fg>>|Font color for hints.
-|<<colors-hints.fg.match,hints.fg.match>>|Font color for the matched part of hints.
 |<<colors-hints.bg,hints.bg>>|Background color for hints.
-|<<colors-downloads.fg,downloads.fg>>|Foreground color for downloads.
+|<<colors-hints.fg.match,hints.fg.match>>|Font color for the matched part of hints.
 |<<colors-downloads.bg.bar,downloads.bg.bar>>|Background color for the download bar.
-|<<colors-downloads.bg.start,downloads.bg.start>>|Color gradient start for downloads.
+|<<colors-downloads.fg.start,downloads.fg.start>>|Color gradient start for download text.
-|<<colors-downloads.bg.stop,downloads.bg.stop>>|Color gradient end for downloads.
+|<<colors-downloads.bg.start,downloads.bg.start>>|Color gradient start for download backgrounds.
-|<<colors-downloads.bg.system,downloads.bg.system>>|Color gradient interpolation system for downloads.
+|<<colors-downloads.fg.stop,downloads.fg.stop>>|Color gradient end for download text.
+|<<colors-downloads.bg.stop,downloads.bg.stop>>|Color gradient stop for download backgrounds.
+|<<colors-downloads.fg.system,downloads.fg.system>>|Color gradient interpolation system for download text.
+|<<colors-downloads.bg.system,downloads.bg.system>>|Color gradient interpolation system for download backgrounds.
+|<<colors-downloads.fg.error,downloads.fg.error>>|Foreground color for downloads with errors.
 |<<colors-downloads.bg.error,downloads.bg.error>>|Background color for downloads with errors.
 |<<colors-webpage.bg,webpage.bg>>|Background color for webpages if unset (or empty to use the theme's color)
 |==============
@@ -1465,6 +1476,8 @@ A value can be in one of the following format:
  * `hsv(h, s, v)` / `hsva(h, s, v, a)` (values 0-255, hue 0-359)
  * A gradient as explained in http://qt-project.org/doc/qt-4.8/stylesheet-reference.html#list-of-property-types[the Qt documentation] under ``Gradient''.
 
+A *.system value determines the color system to use for color interpolation between similarly-named *.start and *.stop entries, regardless of how they are defined in the options. Valid values are 'rgb', 'hsv', and 'hsl'.
+
 The `hints.*` values are a special case as they're real CSS colors, not Qt-CSS colors. There, for a gradient, you need to use `-webkit-gradient`, see https://www.webkit.org/blog/175/introducing-css-gradients/[the WebKit documentation].
 
 [[colors-completion.fg]]
@@ -1539,17 +1552,23 @@ Foreground color of the matched text in the completion.
 
 Default: +pass:[#ff4444]+
 
+[[colors-statusbar.fg]]
+=== statusbar.fg
+Foreground color of the statusbar.
+
+Default: +pass:[white]+
+
 [[colors-statusbar.bg]]
 === statusbar.bg
 Foreground color of the statusbar.
 
 Default: +pass:[black]+
 
-[[colors-statusbar.fg]]
+[[colors-statusbar.fg.error]]
-=== statusbar.fg
+=== statusbar.fg.error
-Foreground color of the statusbar.
+Foreground color of the statusbar if there was an error.
 
-Default: +pass:[white]+
+Default: +pass:[${statusbar.fg}]+
 
 [[colors-statusbar.bg.error]]
 === statusbar.bg.error
@@ -1557,30 +1576,72 @@ Background color of the statusbar if there was an error.
 
 Default: +pass:[red]+
 
+[[colors-statusbar.fg.warning]]
+=== statusbar.fg.warning
+Foreground color of the statusbar if there is a warning.
+
+Default: +pass:[${statusbar.fg}]+
+
 [[colors-statusbar.bg.warning]]
 === statusbar.bg.warning
 Background color of the statusbar if there is a warning.
 
 Default: +pass:[darkorange]+
 
+[[colors-statusbar.fg.prompt]]
+=== statusbar.fg.prompt
+Foreground color of the statusbar if there is a prompt.
+
+Default: +pass:[${statusbar.fg}]+
+
 [[colors-statusbar.bg.prompt]]
 === statusbar.bg.prompt
 Background color of the statusbar if there is a prompt.
 
 Default: +pass:[darkblue]+
 
+[[colors-statusbar.fg.insert]]
+=== statusbar.fg.insert
+Foreground color of the statusbar in insert mode.
+
+Default: +pass:[${statusbar.fg}]+
+
 [[colors-statusbar.bg.insert]]
 === statusbar.bg.insert
 Background color of the statusbar in insert mode.
 
 Default: +pass:[darkgreen]+
 
+[[colors-statusbar.fg.command]]
+=== statusbar.fg.command
+Foreground color of the statusbar in command mode.
+
+Default: +pass:[${statusbar.fg}]+
+
+[[colors-statusbar.bg.command]]
+=== statusbar.bg.command
+Background color of the statusbar in command mode.
+
+Default: +pass:[${statusbar.bg}]+
+
+[[colors-statusbar.fg.caret]]
+=== statusbar.fg.caret
+Foreground color of the statusbar in caret mode.
+
+Default: +pass:[${statusbar.fg}]+
+
 [[colors-statusbar.bg.caret]]
 === statusbar.bg.caret
 Background color of the statusbar in caret mode.
 
 Default: +pass:[purple]+
 
+[[colors-statusbar.fg.caret-selection]]
+=== statusbar.fg.caret-selection
+Foreground color of the statusbar in caret mode with a selection
+
+Default: +pass:[${statusbar.fg}]+
+
 [[colors-statusbar.bg.caret-selection]]
 === statusbar.bg.caret-selection
 Background color of the statusbar in caret mode with a selection
@@ -1629,30 +1690,30 @@ Foreground color of unselected odd tabs.
 
 Default: +pass:[white]+
 
-[[colors-tabs.fg.even]]
-=== tabs.fg.even
-Foreground color of unselected even tabs.
-
-Default: +pass:[white]+
-
-[[colors-tabs.fg.selected]]
-=== tabs.fg.selected
-Foreground color of selected tabs.
-
-Default: +pass:[white]+
-
 [[colors-tabs.bg.odd]]
 === tabs.bg.odd
 Background color of unselected odd tabs.
 
 Default: +pass:[grey]+
 
+[[colors-tabs.fg.even]]
+=== tabs.fg.even
+Foreground color of unselected even tabs.
+
+Default: +pass:[white]+
+
 [[colors-tabs.bg.even]]
 === tabs.bg.even
 Background color of unselected even tabs.
 
 Default: +pass:[darkgrey]+
 
+[[colors-tabs.fg.selected]]
+=== tabs.fg.selected
+Foreground color of selected tabs.
+
+Default: +pass:[white]+
+
 [[colors-tabs.bg.selected]]
 === tabs.bg.selected
 Background color of selected tabs.
@@ -1701,23 +1762,17 @@ Font color for hints.
 
 Default: +pass:[black]+
 
-[[colors-hints.fg.match]]
-=== hints.fg.match
-Font color for the matched part of hints.
-
-Default: +pass:[green]+
-
 [[colors-hints.bg]]
 === hints.bg
 Background color for hints.
 
 Default: +pass:[-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF785), color-stop(100%,#FFC542))]+
 
-[[colors-downloads.fg]]
+[[colors-hints.fg.match]]
-=== downloads.fg
+=== hints.fg.match
-Foreground color for downloads.
+Font color for the matched part of hints.
 
-Default: +pass:[#ffffff]+
+Default: +pass:[green]+
 
 [[colors-downloads.bg.bar]]
 === downloads.bg.bar
@@ -1725,21 +1780,33 @@ Background color for the download bar.
 
 Default: +pass:[black]+
 
+[[colors-downloads.fg.start]]
+=== downloads.fg.start
+Color gradient start for download text.
+
+Default: +pass:[white]+
+
 [[colors-downloads.bg.start]]
 === downloads.bg.start
-Color gradient start for downloads.
+Color gradient start for download backgrounds.
 
 Default: +pass:[#0000aa]+
 
+[[colors-downloads.fg.stop]]
+=== downloads.fg.stop
+Color gradient end for download text.
+
+Default: +pass:[${downloads.fg.start}]+
+
 [[colors-downloads.bg.stop]]
 === downloads.bg.stop
-Color gradient end for downloads.
+Color gradient stop for download backgrounds.
 
 Default: +pass:[#00aa00]+
 
-[[colors-downloads.bg.system]]
+[[colors-downloads.fg.system]]
-=== downloads.bg.system
+=== downloads.fg.system
-Color gradient interpolation system for downloads.
+Color gradient interpolation system for download text.
 
 Valid values:
 
@@ -1749,6 +1816,24 @@ Valid values:
 
 Default: +pass:[rgb]+
 
+[[colors-downloads.bg.system]]
+=== downloads.bg.system
+Color gradient interpolation system for download backgrounds.
+
+Valid values:
+
+ * +rgb+: Interpolate in the RGB color system.
+ * +hsv+: Interpolate in the HSV color system.
+ * +hsl+: Interpolate in the HSL color system.
+
+Default: +pass:[rgb]+
+
+[[colors-downloads.fg.error]]
+=== downloads.fg.error
+Foreground color for downloads with errors.
+
+Default: +pass:[white]+
+
 [[colors-downloads.bg.error]]
 === downloads.bg.error
 Background color for downloads with errors.

qutebrowser/browser/downloads.py

@@ -355,12 +355,19 @@ class DownloadItem(QObject):
         if reply.error() != QNetworkReply.NoError:
             QTimer.singleShot(0, lambda: self.error.emit(reply.errorString()))
 
-    def bg_color(self):
+    def get_status_color(self, position):
-        """Background color to be shown."""
+        """Choose an appropriate color for presenting the download's status.
-        start = config.get('colors', 'downloads.bg.start')
+
-        stop = config.get('colors', 'downloads.bg.stop')
+        Args:
-        system = config.get('colors', 'downloads.bg.system')
+            position: The color type requested, can be 'fg' or 'bg'.
-        error = config.get('colors', 'downloads.bg.error')
+        """
+        # pylint: disable=bad-config-call
+        # WORKAROUND for https://bitbucket.org/logilab/astroid/issue/104/
+        assert position in ("fg", "bg")
+        start = config.get('colors', 'downloads.{}.start'.format(position))
+        stop = config.get('colors', 'downloads.{}.stop'.format(position))
+        system = config.get('colors', 'downloads.{}.system'.format(position))
+        error = config.get('colors', 'downloads.{}.error'.format(position))
         if self.error_msg is not None:
             assert not self.successful
             return error
@@ -1022,9 +1029,9 @@ class DownloadManager(QAbstractListModel):
         if role == Qt.DisplayRole:
             data = str(item)
         elif role == Qt.ForegroundRole:
-            data = config.get('colors', 'downloads.fg')
+            data = item.get_status_color('fg')
         elif role == Qt.BackgroundRole:
-            data = item.bg_color()
+            data = item.get_status_color('bg')
         elif role == ModelRole.item:
             data = item
         elif role == Qt.ToolTipRole:

qutebrowser/config/config.py

@@ -321,6 +321,7 @@ class ConfigManager(QObject):
         ('colors', 'tab.indicator.system'): 'tabs.indicator.system',
         ('tabs', 'auto-hide'): 'hide-auto',
         ('completion', 'history-length'): 'cmd-history-max-items',
+        ('colors', 'downloads.fg'): 'downloads.fg.start',
     }
     DELETED_OPTIONS = [
         ('colors', 'tab.separator'),

qutebrowser/config/configdata.py

@@ -103,6 +103,10 @@ SECTION_DESC = {
         " * A gradient as explained in http://qt-project.org/doc/qt-4.8/"
         "stylesheet-reference.html#list-of-property-types[the Qt "
         "documentation] under ``Gradient''.\n\n"
+        "A *.system value determines the color system to use for color "
+        "interpolation between similarly-named *.start and *.stop entries, "
+        "regardless of how they are defined in the options. "
+        "Valid values are 'rgb', 'hsv', and 'hsl'.\n\n"
         "The `hints.*` values are a special case as they're real CSS "
         "colors, not Qt-CSS colors. There, for a gradient, you need to use "
         "`-webkit-gradient`, see https://www.webkit.org/blog/175/introducing-"
@@ -818,34 +822,67 @@ def data(readonly=False):
              SettingValue(typ.QssColor(), '#ff4444'),
              "Foreground color of the matched text in the completion."),
 
+            ('statusbar.fg',
+             SettingValue(typ.QssColor(), 'white'),
+             "Foreground color of the statusbar."),
+
             ('statusbar.bg',
              SettingValue(typ.QssColor(), 'black'),
              "Foreground color of the statusbar."),
 
-            ('statusbar.fg',
+            ('statusbar.fg.error',
-             SettingValue(typ.QssColor(), 'white'),
+             SettingValue(typ.QssColor(), '${statusbar.fg}'),
-             "Foreground color of the statusbar."),
+             "Foreground color of the statusbar if there was an error."),
 
             ('statusbar.bg.error',
              SettingValue(typ.QssColor(), 'red'),
              "Background color of the statusbar if there was an error."),
 
+            ('statusbar.fg.warning',
+             SettingValue(typ.QssColor(), '${statusbar.fg}'),
+             "Foreground color of the statusbar if there is a warning."),
+
             ('statusbar.bg.warning',
              SettingValue(typ.QssColor(), 'darkorange'),
              "Background color of the statusbar if there is a warning."),
 
+            ('statusbar.fg.prompt',
+             SettingValue(typ.QssColor(), '${statusbar.fg}'),
+             "Foreground color of the statusbar if there is a prompt."),
+
             ('statusbar.bg.prompt',
              SettingValue(typ.QssColor(), 'darkblue'),
              "Background color of the statusbar if there is a prompt."),
 
+            ('statusbar.fg.insert',
+             SettingValue(typ.QssColor(), '${statusbar.fg}'),
+             "Foreground color of the statusbar in insert mode."),
+
             ('statusbar.bg.insert',
              SettingValue(typ.QssColor(), 'darkgreen'),
              "Background color of the statusbar in insert mode."),
 
+            ('statusbar.fg.command',
+             SettingValue(typ.QssColor(), '${statusbar.fg}'),
+             "Foreground color of the statusbar in command mode."),
+
+            ('statusbar.bg.command',
+             SettingValue(typ.QssColor(), '${statusbar.bg}'),
+             "Background color of the statusbar in command mode."),
+
+            ('statusbar.fg.caret',
+             SettingValue(typ.QssColor(), '${statusbar.fg}'),
+             "Foreground color of the statusbar in caret mode."),
+
             ('statusbar.bg.caret',
              SettingValue(typ.QssColor(), 'purple'),
              "Background color of the statusbar in caret mode."),
 
+            ('statusbar.fg.caret-selection',
+             SettingValue(typ.QssColor(), '${statusbar.fg}'),
+             "Foreground color of the statusbar in caret mode with a "
+             "selection"),
+
             ('statusbar.bg.caret-selection',
              SettingValue(typ.QssColor(), '#a12dff'),
              "Background color of the statusbar in caret mode with a "
@@ -882,22 +919,22 @@ def data(readonly=False):
              SettingValue(typ.QtColor(), 'white'),
              "Foreground color of unselected odd tabs."),
 
-            ('tabs.fg.even',
-             SettingValue(typ.QtColor(), 'white'),
-             "Foreground color of unselected even tabs."),
-
-            ('tabs.fg.selected',
-             SettingValue(typ.QtColor(), 'white'),
-             "Foreground color of selected tabs."),
-
             ('tabs.bg.odd',
              SettingValue(typ.QtColor(), 'grey'),
              "Background color of unselected odd tabs."),
 
+            ('tabs.fg.even',
+             SettingValue(typ.QtColor(), 'white'),
+             "Foreground color of unselected even tabs."),
+
             ('tabs.bg.even',
              SettingValue(typ.QtColor(), 'darkgrey'),
              "Background color of unselected even tabs."),
 
+            ('tabs.fg.selected',
+             SettingValue(typ.QtColor(), 'white'),
+             "Foreground color of selected tabs."),
+
             ('tabs.bg.selected',
              SettingValue(typ.QtColor(), 'black'),
              "Background color of selected tabs."),
@@ -926,10 +963,6 @@ def data(readonly=False):
              SettingValue(typ.CssColor(), 'black'),
              "Font color for hints."),
 
-            ('hints.fg.match',
-             SettingValue(typ.CssColor(), 'green'),
-             "Font color for the matched part of hints."),
-
             ('hints.bg',
              SettingValue(
                  typ.CssColor(), '-webkit-gradient(linear, left top, '
@@ -937,25 +970,41 @@ def data(readonly=False):
                  'color-stop(100%,#FFC542))'),
              "Background color for hints."),
 
-            ('downloads.fg',
+            ('hints.fg.match',
-             SettingValue(typ.QtColor(), '#ffffff'),
+             SettingValue(typ.CssColor(), 'green'),
-             "Foreground color for downloads."),
+             "Font color for the matched part of hints."),
 
             ('downloads.bg.bar',
              SettingValue(typ.QssColor(), 'black'),
              "Background color for the download bar."),
 
+            ('downloads.fg.start',
+             SettingValue(typ.QtColor(), 'white'),
+             "Color gradient start for download text."),
+
             ('downloads.bg.start',
              SettingValue(typ.QtColor(), '#0000aa'),
-             "Color gradient start for downloads."),
+             "Color gradient start for download backgrounds."),
+
+            ('downloads.fg.stop',
+             SettingValue(typ.QtColor(), '${downloads.fg.start}'),
+             "Color gradient end for download text."),
 
             ('downloads.bg.stop',
              SettingValue(typ.QtColor(), '#00aa00'),
-             "Color gradient end for downloads."),
+             "Color gradient stop for download backgrounds."),
+
+            ('downloads.fg.system',
+             SettingValue(typ.ColorSystem(), 'rgb'),
+             "Color gradient interpolation system for download text."),
 
             ('downloads.bg.system',
              SettingValue(typ.ColorSystem(), 'rgb'),
-             "Color gradient interpolation system for downloads."),
+             "Color gradient interpolation system for download backgrounds."),
+
+            ('downloads.fg.error',
+             SettingValue(typ.QtColor(), 'white'),
+             "Foreground color for downloads with errors."),
 
             ('downloads.bg.error',
              SettingValue(typ.QtColor(), 'red'),

qutebrowser/mainwindow/statusbar/bar.py

@@ -78,6 +78,11 @@ class StatusBar(QWidget):
                         For some reason we need to have this as class attribute
                         so pyqtProperty works correctly.
 
+        _command_active: If we're currently in command mode.
+
+                         For some reason we need to have this as class
+                         attribute so pyqtProperty works correctly.
+
         _caret_mode: The current caret mode (off/on/selection).
 
                      For some reason we need to have this as class attribute
@@ -97,41 +102,60 @@ class StatusBar(QWidget):
     _severity = None
     _prompt_active = False
     _insert_active = False
+    _command_active = False
     _caret_mode = CaretMode.off
 
     STYLESHEET = """
-        QWidget#StatusBar {
+
+        QWidget#StatusBar,
+        QWidget#StatusBar * {
+            {{ font['statusbar'] }}
             {{ color['statusbar.bg'] }}
+            {{ color['statusbar.fg'] }}
         }
 
-        QWidget#StatusBar[insert_active="true"] {
+        QWidget#StatusBar[caret_mode="on"],
-            {{ color['statusbar.bg.insert'] }}
+        QWidget#StatusBar[caret_mode="on"] * {
-        }
+            {{ color['statusbar.fg.caret'] }}
-
-        QWidget#StatusBar[caret_mode="on"] {
             {{ color['statusbar.bg.caret'] }}
         }
 
-        QWidget#StatusBar[caret_mode="selection"] {
+        QWidget#StatusBar[caret_mode="selection"],
+        QWidget#StatusBar[caret_mode="selection"] * {
+            {{ color['statusbar.fg.caret-selection'] }}
             {{ color['statusbar.bg.caret-selection'] }}
         }
 
-        QWidget#StatusBar[prompt_active="true"] {
+        QWidget#StatusBar[severity="error"],
-            {{ color['statusbar.bg.prompt'] }}
+        QWidget#StatusBar[severity="error"] * {
-        }
+            {{ color['statusbar.fg.error'] }}
-
-        QWidget#StatusBar[severity="error"] {
             {{ color['statusbar.bg.error'] }}
         }
 
-        QWidget#StatusBar[severity="warning"] {
+        QWidget#StatusBar[severity="warning"],
+        QWidget#StatusBar[severity="warning"] * {
+            {{ color['statusbar.fg.warning'] }}
             {{ color['statusbar.bg.warning'] }}
         }
 
-        QLabel, QLineEdit {
+        QWidget#StatusBar[prompt_active="true"],
-            {{ color['statusbar.fg'] }}
+        QWidget#StatusBar[prompt_active="true"] * {
-            {{ font['statusbar'] }}
+            {{ color['statusbar.fg.prompt'] }}
+            {{ color['statusbar.bg.prompt'] }}
         }
+
+        QWidget#StatusBar[insert_active="true"],
+        QWidget#StatusBar[insert_active="true"] * {
+            {{ color['statusbar.fg.insert'] }}
+            {{ color['statusbar.bg.insert'] }}
+        }
+
+        QWidget#StatusBar[command_active="true"],
+        QWidget#StatusBar[command_active="true"] * {
+            {{ color['statusbar.fg.command'] }}
+            {{ color['statusbar.bg.command'] }}
+        }
+
     """
 
     def __init__(self, win_id, parent=None):
@@ -263,6 +287,11 @@ class StatusBar(QWidget):
         self._prompt_active = val
         self.setStyleSheet(style.get_stylesheet(self.STYLESHEET))
 
+    @pyqtProperty(bool)
+    def command_active(self):
+        """Getter for self.command_active, so it can be used as Qt property."""
+        return self._command_active
+
     @pyqtProperty(bool)
     def insert_active(self):
         """Getter for self.insert_active, so it can be used as Qt property."""
@@ -274,7 +303,7 @@ class StatusBar(QWidget):
         return self._caret_mode.name
 
     def set_mode_active(self, mode, val):
-        """Setter for self.{insert,caret}_active.
+        """Setter for self.{insert,command,caret}_active.
 
         Re-set the stylesheet after setting the value, so everything gets
         updated by Qt properly.
@@ -282,6 +311,9 @@ class StatusBar(QWidget):
         if mode == usertypes.KeyMode.insert:
             log.statusbar.debug("Setting insert_active to {}".format(val))
             self._insert_active = val
+        if mode == usertypes.KeyMode.command:
+            log.statusbar.debug("Setting command_active to {}".format(val))
+            self._command_active = val
         elif mode == usertypes.KeyMode.caret:
             webview = objreg.get('tabbed-browser', scope='window',
                                  window=self._win_id).currentWidget()
@@ -473,7 +505,9 @@ class StatusBar(QWidget):
                                 window=self._win_id)
         if keyparsers[mode].passthrough:
             self._set_mode_text(mode.name)
-        if mode in (usertypes.KeyMode.insert, usertypes.KeyMode.caret):
+        if mode in (usertypes.KeyMode.insert,
+                    usertypes.KeyMode.command,
+                    usertypes.KeyMode.caret):
             self.set_mode_active(mode, True)
 
     @pyqtSlot(usertypes.KeyMode, usertypes.KeyMode)
@@ -486,7 +520,9 @@ class StatusBar(QWidget):
                 self._set_mode_text(new_mode.name)
             else:
                 self.txt.set_text(self.txt.Text.normal, '')
-        if old_mode in (usertypes.KeyMode.insert, usertypes.KeyMode.caret):
+        if old_mode in (usertypes.KeyMode.insert,
+                        usertypes.KeyMode.command,
+                        usertypes.KeyMode.caret):
             self.set_mode_active(old_mode, False)
 
     @config.change_filter('ui', 'message-timeout')