Rviz2 Dark Mode Theme - QT5CT Custom Stylesheet

README.md

Customize Rviz2 with QT5CT and a Dark Mode Theme

This guide details the process of using QT5CT (Qt5 Configuration Tool) to apply a custom dark mode theme to Rviz2. This approach enhances the visual experience specifically tailored for Autoware users but is generally applicable for anyone looking to customize Rviz2.

Prerequisites

• Ubuntu 22.04 LTS.
• ROS2 Humble
• Autoware

Step 1: Install QT5CT

QT5CT enables the customization of Qt applications through stylesheets. Install it via the terminal:

sudo apt install qt5ct

Step 2: Create a Custom Stylesheet

1. Navigate to or create the QT5CT configuration directory:

   mkdir -p ~/.config/qt5ct/qss && cd $_

2. Create a custom.qss file for your stylesheet:

   touch custom.qss

3. Edit custom.qss with your preferred text editor and paste your dark mode QSS content. For instance, using Nano:

   nano custom.qss

Step 3: Configure QT5CT with the Custom Stylesheet

1. Launch QT5CT (qt5ct from the terminal or find it in the applications menu).

2. In the the Appearance tab, select the Breeze style, and darker custom color scheme.

3. In the QT5CT interface, go to the Style Sheets tab. 3.1 select your custom.qss and activate it.

3.2. Apply the changes and exit QT5CT.

Step 4: Integrate with ROS Launch File

Instead of globally setting the QT_QPA_PLATFORMTHEME environment variable, you can specify it directly in your ROS launch file in src/launcher/autoware_launch/launch/autoware.launch.xml to affect only Rviz2. This is especially useful for ROS-based projects like Autoware. Add the following snippet to your ROS launch file:

<group>
  <node 
  pkg="rviz2" 
  exec="rviz2" 
  name="rviz2" 
  output="screen" 
  args="-d $(var rviz_config) -s $(find-pkg-share autoware_launch)/rviz/image/autoware.png" 
  if="$(var rviz)" 
  respawn="$(var rviz_respawn)"
  >
    <env name="QT_QPA_PLATFORMTHEME" value="qt5ct"/>
  </node>
</group>

This ensures that Rviz2 will use QT5CT for theming when launched through this file.

Step 5: Launch Rviz2

With the stylesheet configured and the launch file updated, start autoware as you would normally. Rviz2 should now reflect the new dark mode theme.

Conclusion

By following these steps, you've successfully applied a custom dark mode theme to Rviz2 using QT5CT, enhancing your visual experience within the Autoware environment. This method provides a flexible way to customize Rviz2's appearance without affecting the global system settings.

rviz2-dark-theme.qss

/*  ------------------------------------------------------------------------  */
/* QtMaterial - https://github.com/UN-GCPDS/qt-material
/* By Yeison Cardona - GCPDS
/*  ------------------------------------------------------------------------  */

* {
  color: #ffffff;

  font-family: Roboto, sans-serif;

  font-size: 13px;

  line-height: 13px;

  selection-background-color: #84c2e6;
  selection-color: #0f1417;
}

*:focus {
  outline: none;
}

/*  ------------------------------------------------------------------------  */
/*  Custom colors  */

.danger {
  color: #dc3545;
  background-color: transparent;
}

.warning {
  color: #ffc107;
  background-color: transparent;
}

.success {
  color: #84c2e6;
  background-color: transparent;
}

.danger:disabled {
  color: rgba(220, 53, 69, 0.4);
  border-color: rgba(220, 53, 69, 0.4);
}

.warning:disabled {
  color: rgba(255, 193, 7, 0.4);
  border-color: rgba(255, 193, 7, 0.4);
}

.success:disabled {
  color: rgba(132,194,230, 0.4);
  border-color: rgba(132,194,230, 0.4);
}

.danger:flat:disabled {
  background-color: rgba(220, 53, 69, 0.1);
}

.warning:flat:disabled {
  background-color: rgba(255, 193, 7, 0.1);
}

.success:flat:disabled {
  background-color: rgba(132,194,230, 0.1);
}

/*  ------------------------------------------------------------------------  */
/*  Basic widgets  */

QWidget {
  background-color: #0f1417;
}

QGroupBox,
QFrame {
  background-color: #0f1417;
  /* border: 2px solid #0f1417; */
  border-radius: 4px;
}

QGroupBox.fill_background,
QFrame.fill_background {
  background-color: #0f1417;
  /* border: 2px solid #232629; */
  border-radius: 4px;
}

QSplitter {
  background-color: transparent;
  border: none;
}

QStatusBar {
  color: #ffffff;
  background-color: #0f1417;
  border-radius: 0px;
}

QScrollArea,
QStackedWidget,
QWidget > QToolBox,
QToolBox > QWidget,
QTabWidget > QWidget {
  border: none;
}

QTabWidget::pane {
  border: none;
}

/*  ------------------------------------------------------------------------  */
/*  Inputs  */

QDateEdit,
QDateTimeEdit,
QSpinBox,
QDoubleSpinBox,
QTextEdit,
QLineEdit {
  color: #84c2e6;
  background-color: #0f1417;
  border: 2px solid rgba(255, 255, 255, 0.0);
  border-radius: 8px;
  height: 32px;
}

QDateEdit,
QDateTimeEdit,
QSpinBox,
QDoubleSpinBox,
QTreeView,
QListView,
QLineEdit,
QComboBox {
  color: #ffffff;
  padding-left: 16px;
  border-radius: 0px;
  border-radius: 0px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  height: 32px;
  background-color: #0f1417;
}

QPlainTextEdit {
  border-radius: 4px;
  padding: 8px 16px;
  background-color: #0f1417;
  border: 2px solid #0f1417;
}

QTextEdit {
  padding: 8px 16px;
  border-radius: 4px;
  background-color: #0f1417;
}

QDateEdit:disabled,
QDateTimeEdit:disabled,
QSpinBox:disabled,
QDoubleSpinBox:disabled,
QTextEdit:disabled,
QLineEdit:disabled {
  color: rgba(255, 255, 255, 0.2);
  background-color: rgba(35, 38, 41, 0.3);
  border: 2px solid #232629;
  border-width: 0 0 2px 0;
  padding: 0px 16px;
  border-radius: 0px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  height: 32px;
}

/*  ------------------------------------------------------------------------  */
/*  QComboBox  */

QDateEdit,
QComboBox {
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.0);
  border-radius: 0px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  height: 32px;
  background-color: #0f1417;
  /* border: 2px solid rgba(255, 255, 255, 0.2); */
  border-width: 0 0 2px 0;
}

QDateEdit:disabled,
QComboBox:disabled {
  color: rgba(255, 255, 255, 0.2);
  background-color: rgba(35, 38, 41, 0.3);
  border-bottom: 2px solid #232629;
}

QDateEdit::drop-down,
QComboBox::drop-down {
  border: none;
  color: #84c2e6;
  width: 20px;
}

QDateEdit::down-arrow,
QComboBox::down-arrow {
  image: url(./autoware-rviz-icons/active/downarrow.svg);
  margin-right: 12px;
}

QDateEdit::down-arrow:focus,
QComboBox::down-arrow:focus {
  image: url(./autoware-rviz-icons/primary/downarrow.svg);
  margin-right: 12px;
}

QDateEdit::down-arrow:disabled,
QComboBox::down-arrow:disabled {
  image: url(./autoware-rviz-icons/disabled/downarrow.svg);
  margin-right: 12px;
}

QDateEdit QAbstractItemView,
QComboBox QAbstractItemView {
  background-color: #0f1417;
  border: 2px solid #232629;
  border-radius: 8px;
}

QDateEdit[frame="false"],
QComboBox[frame="false"] {
  color: #ffffff;
  background-color: transparent;
  border: 1px solid transparent;
}

QDateEdit[frame="false"]:disabled,
QComboBox[frame="false"]:disabled {
  color: rgba(255, 255, 255, 0.2);
}

/*  ------------------------------------------------------------------------  */
/*  Spin buttons  */

QDateTimeEdit::up-button,
QDoubleSpinBox::up-button,
QSpinBox::up-button {
  subcontrol-origin: border;
  subcontrol-position: top right;
  width: 20px;
  image: url(./autoware-rviz-icons/active/uparrow.svg);
  border-width: 0px;
  margin-right: 5px;
}

QDateTimeEdit::up-button:disabled,
QDoubleSpinBox::up-button:disabled,
QSpinBox::up-button:disabled {
  image: url(./autoware-rviz-icons/disabled/uparrow.svg);
}

QDateTimeEdit::down-button,
QDoubleSpinBox::down-button,
QSpinBox::down-button {
  subcontrol-origin: border;
  subcontrol-position: bottom right;
  width: 20px;
  image: url(./autoware-rviz-icons/active/downarrow.svg);
  border-width: 0px;
  border-top-width: 0;
  margin-right: 5px;
}

QDateTimeEdit::down-button:disabled,
QDoubleSpinBox::down-button:disabled,
QSpinBox::down-button:disabled {
  image: url(./autoware-rviz-icons/disabled/downarrow.svg);
}

/*  ------------------------------------------------------------------------  */
/*  QPushButton  */

QPushButton {
  text-transform: capitalize;
  margin: 0px;
  padding: 4px 16px;
  height: 24px;
  font-weight: bold;
  color: #003546;
  border: 2px solid rgba(255, 255, 255, 0.0);
  border-radius: 18px;
  background-color: #8BD0F0;
}

QPushButton:checked,
QPushButton:pressed {
  color: #003546;
  background-color: #84c2e6;
}

QPushButton:hover {
  background-color: #84c2e6;
  color: #003546;
  border: 2px solid rgba(255, 255, 255, 0.0);
}

QPushButton:flat {
  margin: 0px;
  color: #84c2e6;
  border: none;
  background-color: transparent;
}

QPushButton:flat:hover {
  background-color: #84c2e6;
}

QPushButton:flat:pressed,
QPushButton:flat:checked {
  background-color: rgba(132,194,230, 0.1);
}

QPushButton:disabled {
  color: #6e7276;
  background-color: #292d30;
  border: 2px solid rgba(255, 255, 255, 0.0);
}

QPushButton:flat:disabled {
  color: #6e7276;
  background-color: #292d30;
  border: none;
}


QPushButton:checked:disabled {
  color: #6e7276;
  background-color: #0f1417;
  border: 2px solid rgba(255, 255, 255, 0.0);
}

QToolButton:focus,
QPushButton:focus {
  background-color: #84c2e6;
}

QPushButton:checked:focus,
QPushButton:pressed:focus {
  background-color: rgba(132,194,230, 0.8);
}

QPushButton:flat:focus {
  border: none;
  background-color: #84c2e6;
}

/*  ------------------------------------------------------------------------  */
/*  QTabBar  */

QTabBar {
  text-transform: capitalize;
  font-weight: bold;
}

QTabBar::tab {
  color: #ffffff;
  border: 0px;
}

QTabBar::tab:bottom,
QTabBar::tab:top {
  padding: 0 16px;
  height: 28px;
}

QTabBar::tab:left,
QTabBar::tab:right {
  padding: 16px 0;
  width: 28px;
}

QTabBar::tab:top:selected,
QTabBar::tab:top:hover {
  color: #84c2e6;
  border-bottom: 2px solid rgba(255, 255, 255, 0.0);
}

QTabBar::tab:bottom:selected,
QTabBar::tab:bottom:hover {
  color: #84c2e6;
  border-top: 2px solid rgba(255, 255, 255, 0.0);
}

QTabBar::tab:right:selected,
QTabBar::tab:right:hover {
  color: #84c2e6;
  border-left: 2px solid rgba(255, 255, 255, 0.0);
}

QTabBar::tab:left:selected,
QTabBar::tab:left:hover {
  color: #84c2e6;
  border-right: 2px solid rgba(255, 255, 255, 0.0);
}

QTabBar QToolButton:hover,
QTabBar QToolButton {
  border: 0px;
  background-color: #232629;
  background: #232629;
}

QTabBar QToolButton::up-arrow {
  image: url(./autoware-rviz-icons/primary/uparrow2.svg);
  width: 28px;
}

QTabBar QToolButton::down-arrow {
  image: url(./autoware-rviz-icons/primary/downarrow2.svg);
  width: 28px;
}

QTabBar QToolButton::right-arrow {
  image: url(./autoware-rviz-icons/disabled/rightarrow2.svg);
  height: 28px;
}

QTabBar QToolButton::left-arrow {
  image: url(./autoware-rviz-icons/disabled/leftarrow2.svg);
  height: 28px;
}

QTabBar::close-button {
  image: url(./autoware-rviz-icons/primary/tab_close.svg);
}

QTabBar::close-button:hover {
  image: url(./autoware-rviz-icons/primary/tab_close.svg);
}

/*  ------------------------------------------------------------------------  */
/*  QGroupBox  */

QGroupBox {
  padding: 16px;
  padding-top: 36px;
  /* line-height: ; */
  text-transform: capitalize;
  /* font-size: ; */
}

QGroupBox::title {
  color: #DFE3E7;
  subcontrol-origin: margin;
  subcontrol-position: top left;
  padding: 16px;
  background-color: transparent;
  height: 36px;
}

/*  ------------------------------------------------------------------------  */
/*  QRadioButton and QCheckBox labels  */

QRadioButton,
QCheckBox {
  color: #84c2e6;
  line-height: 12px;
  height: 24px;
  background-color: transparent;
  spacing: 5px;
}

QRadioButton:disabled,
QCheckBox:disabled {
  color: #8BD0F0;
}

/*  ------------------------------------------------------------------------  */
/*  General Indicators  */

QGroupBox::indicator {
  width: 24px;
  height: 24px;
  border-radius: 3px;
}

QMenu::indicator,
QListView::indicator,
QTableWidget::indicator,
QRadioButton::indicator,
QCheckBox::indicator {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

/*  ------------------------------------------------------------------------  */
/*  QListView Indicator  */

QListView::indicator:checked,
QListView::indicator:checked:selected,
QListView::indicator:checked:focus {
  image: url(./autoware-rviz-icons/primary/checklist.svg);
}

QListView::indicator:checked:selected:active {
  image: url(./autoware-rviz-icons/primary/checklist_invert.svg);
}

QListView::indicator:checked:disabled {
  image: url(./autoware-rviz-icons/disabled/checklist.svg);
}

QListView::indicator:indeterminate,
QListView::indicator:indeterminate:selected,
QListView::indicator:indeterminate:focus {
  image: url(./autoware-rviz-icons/primary/checklist_indeterminate.svg);
}

QListView::indicator:indeterminate:selected:active {
  image: url(./autoware-rviz-icons/primary/checklist_indeterminate_invert.svg);
}

QListView::indicator:indeterminate:disabled {
  image: url(./autoware-rviz-icons/disabled/checklist_indeterminate.svg);
}

/*  ------------------------------------------------------------------------  */
/*  QTableView Indicator  */

QTableView::indicator:enabled:checked,
QTableView::indicator:enabled:checked:selected,
QTableView::indicator:enabled:checked:focus {
  image: url(./autoware-rviz-icons/primary/checkbox_checked.svg);
}

QTableView::indicator:checked:selected:active {
  image: url(./autoware-rviz-icons/primary/checkbox_checked_invert.svg);
}

QTableView::indicator:disabled:checked,
QTableView::indicator:disabled:checked:selected,
QTableView::indicator:disabled:checked:focus {
  image: url(./autoware-rviz-icons/disabled/checkbox_checked.svg);
}

QTableView::indicator:enabled:unchecked,
QTableView::indicator:enabled:unchecked:selected,
QTableView::indicator:enabled:unchecked:focus {
  image: url(./autoware-rviz-icons/primary/checkbox_unchecked.svg);
}

QTableView::indicator:unchecked:selected:active {
  image: url(./autoware-rviz-icons/primary/checkbox_unchecked_invert.svg);
}

QTableView::indicator:disabled:unchecked,
QTableView::indicator:disabled:unchecked:selected,
QTableView::indicator:disabled:unchecked:focus {
  image: url(./autoware-rviz-icons/disabled/checkbox_unchecked.svg);
}

QTableView::indicator:enabled:indeterminate,
QTableView::indicator:enabled:indeterminate:selected,
QTableView::indicator:enabled:indeterminate:focus {
  image: url(./autoware-rviz-icons/primary/checkbox_indeterminate.svg);
}

QTableView::indicator:indeterminate:selected:active {
  image: url(./autoware-rviz-icons/primary/checkbox_indeterminate_invert.svg);
}

QTableView::indicator:disabled:indeterminate,
QTableView::indicator:disabled:indeterminate:selected,
QTableView::indicator:disabled:indeterminate:focus {
  image: url(./autoware-rviz-icons/disabled/checkbox_indeterminate.svg);
}

/*  ------------------------------------------------------------------------  */
/*  QCheckBox and QGroupBox Indicator  */

QCheckBox::indicator:checked,
QGroupBox::indicator:checked {
  image: url(./autoware-rviz-icons/primary/checkbox_checked.svg);
}

QCheckBox::indicator:unchecked,
QGroupBox::indicator:unchecked {
  image: url(./autoware-rviz-icons/primary/checkbox_unchecked.svg);
}

QCheckBox::indicator:indeterminate,
QGroupBox::indicator:indeterminate {
  image: url(./autoware-rviz-icons/primary/checkbox_indeterminate.svg);
}

QCheckBox::indicator:checked:disabled,
QGroupBox::indicator:checked:disabled {
  image: url(./autoware-rviz-icons/disabled/checkbox_checked.svg);
}

QCheckBox::indicator:unchecked:disabled,
QGroupBox::indicator:unchecked:disabled {
  image: url(./autoware-rviz-icons/disabled/checkbox_unchecked.svg);
}

QCheckBox::indicator:indeterminate:disabled,
QGroupBox::indicator:indeterminate:disabled {
  image: url(./autoware-rviz-icons/disabled/checkbox_indeterminate.svg);
}

/*  ------------------------------------------------------------------------  */
/*  QRadioButton Indicator  */

QRadioButton::indicator:checked {
  image: url(./autoware-rviz-icons/primary/radiobutton_checked.svg);
}

QRadioButton::indicator:unchecked {
  image: url(./autoware-rviz-icons/primary/radiobutton_unchecked.svg);
}

QRadioButton::indicator:checked:disabled {
  image: url(./autoware-rviz-icons/disabled/radiobutton_checked.svg);
}

QRadioButton::indicator:unchecked:disabled {
  image: url(./autoware-rviz-icons/disabled/radiobutton_unchecked.svg);
}

/*  ------------------------------------------------------------------------  */
/*  QDockWidget  */

QDockWidget {
  color: #ffffff;
  text-transform: capitalize;
  border: 2px solid #232629;
  titlebar-close-icon: url(./autoware-rviz-icons/primary/close.svg);
  titlebar-normal-icon: url(./autoware-rviz-icons/primary/float.svg);
  border-radius: 4px;
}

QDockWidget::title {
  text-align: left;
  padding-left: 36px;
  padding: 3px;
  margin-top: 4px;
}

/*  ------------------------------------------------------------------------  */
/*  QComboBox indicator  */

QComboBox::indicator:checked {
  image: url(./autoware-rviz-icons/primary/checklist.svg);
}

QComboBox::indicator:checked:selected {
  image: url(./autoware-rviz-icons/primary/checklist_invert.svg);
}

/*  ------------------------------------------------------------------------  */
/*  Menu Items  */

QComboBox::item,
QCalendarWidget QMenu::item,
QMenu::item {
  height: 28px;

  border: 8px solid transparent;
  color: #ffffff;
}

QCalendarWidget QMenu::item,
QMenu::item {
  padding: 0px 24px 0px 8px; /* pyside6 or pyqt6 */
}

QComboBox::item:selected,
QCalendarWidget QMenu::item:selected,
QMenu::item:selected {
  color: #000000;
  background-color: #84c2e6;
  border-radius: 0px;
}

QComboBox::item:disabled,
QCalendarWidget QMenu::item:disabled,
QMenu::item:disabled {
  color: rgba(255, 255, 255, 0.3);
}

/*  ------------------------------------------------------------------------  */
/*  QMenu  */

QCalendarWidget QMenu,
QMenu {
  background-color: #0f1417;
  border: 2px solid #0f1417;
  border-radius: 4px;
}

QMenu::separator {
  height: 4px;
  background-color: #84c2e6;
  /* margin-left: 2px; */
  /* margin-right: 2px; */
}

QMenu::right-arrow {
  image: url(./autoware-rviz-icons/primary/rightarrow.svg);
  width: 16px;
  height: 16px;
}

QMenu::right-arrow:selected {
  image: url(./autoware-rviz-icons/disabled/rightarrow.svg);
}

QMenu::indicator:non-exclusive:unchecked {
  image: url(./autoware-rviz-icons/primary/checkbox_unchecked.svg);
}

QMenu::indicator:non-exclusive:unchecked:selected {
  image: url(./autoware-rviz-icons/primary/checkbox_unchecked_invert.svg);
}

QMenu::indicator:non-exclusive:checked {
  image: url(./autoware-rviz-icons/primary/checkbox_checked.svg);
}

QMenu::indicator:non-exclusive:checked:selected {
  image: url(./autoware-rviz-icons/primary/checkbox_checked_invert.svg);
}

QMenu::indicator:exclusive:unchecked {
  image: url(./autoware-rviz-icons/primary/radiobutton_unchecked.svg);
}

QMenu::indicator:exclusive:unchecked:selected {
  image: url(./autoware-rviz-icons/primary/radiobutton_unchecked_invert.svg);
}

QMenu::indicator:exclusive:checked {
  image: url(./autoware-rviz-icons/primary/radiobutton_checked.svg);
}

QMenu::indicator:exclusive:checked:selected {
  image: url(./autoware-rviz-icons/primary/radiobutton_checked_invert.svg);
}

/*  ------------------------------------------------------------------------  */
/*  QMenuBar  */

QMenuBar {
  background-color: #0f1417;
  color: #ffffff;
  border-bottom: 2px solid rgba(255, 255, 255, 0.0);
}

QMenuBar::item {
  height: 32px;
  padding: 8px;
  background-color: transparent;
  color: #ffffff;
}

QMenuBar::item:selected,
QMenuBar::item:pressed {
  color: #ffffff;
  background-color: #84c2e6;
}

/*  ------------------------------------------------------------------------  */
/*  QToolBox  */

QToolBox::tab {
  background-color: #0f1417;
  color: #ffffff;
  text-transform: capitalize;
  border-radius: 4px;
  padding-left: 15px;
}

QToolBox::tab:selected,
QToolBox::tab:hover {
  background-color: #84c2e6;
}

/*  ------------------------------------------------------------------------  */
/*  QProgressBar  */

QProgressBar {
  border-radius: 0;
  background-color: #0f1417;
  text-align: center;
  color: transparent;
}

QProgressBar::chunk {
  background-color: #84c2e6;
}

/*  ------------------------------------------------------------------------  */
/*  QScrollBar  */

QScrollBar:horizontal {
  border: 0;
  background: #0f1417;
  height: 8px;
}

QScrollBar:vertical {
  border: 0;
  background: #0f1417;
  width: 10px;
  /* Margin around the scrollbar */
  /* margin: 22px 0 22px 0;  */
}

QScrollBar::handle {
  background: #84c2e6;
}

QScrollBar::handle:horizontal {
  min-width: 24px;
  background: #84c2e6;
}

QScrollBar::handle:vertical {
  min-height: 24px;
  background: #84c2e6;
}

QScrollBar::handle:vertical:hover,
QScrollBar::handle:horizontal:hover {
  background-color: #84c2e6;
}

QScrollBar::add-line:vertical,
QScrollBar::sub-line:vertical,
QScrollBar::add-line:horizontal,
QScrollBar::sub-line:horizontal {
  border: 0;
  background: transparent;
  width: 0px;
  height: 0px;
}

QScrollBar::sub-page:horizontal,
QScrollBar::add-page:horizontal,
QScrollBar::sub-page:vertical,
QScrollBar::add-page:vertical,
QScrolLBar:vertical {
  background: transparent;
}

/*  ------------------------------------------------------------------------  */
/*  QScrollBar-Big  */

QScrollBar.big:horizontal {
  border: 0;
  background: #232629;
  height: 36px;
}

QScrollBar.big:vertical {
  border: 0;
  background: #232629;
  width: 36px;
}

QScrollBar.big::handle,
QScrollBar.big::handle:vertical:hover,
QScrollBar.big::handle:horizontal:hover {
  background: #84c2e6;
}

QScrollBar.big::handle:horizontal {
  min-width: 24px;
}

QScrollBar.big::handle:vertical {
  min-height: 24px;
}

QScrollBar.big::add-line:vertical,
QScrollBar.big::sub-line:vertical,
QScrollBar.big::add-line:horizontal,
QScrollBar.big::sub-line:horizontal {
  border: 0;
  background: transparent;
  width: 0px;
  height: 0px;
}

/*  ------------------------------------------------------------------------  */
/*  QSlider  */
QSlider {
  min-height: 20px;
  min-width: 20px;
}

QSlider:horizontal {
  min-height: 30px;
  min-width: 30px;
}

QSlider:vertical {
  /* max-height: 0px;
  max-width: 0px; */
}

QSlider::groove:horizontal {

    border: 1px solid #262626;
    height: 4px;
    background: #0f1417;
    margin: 0;
}

QSlider::groove:vertical {
  width: 4px;
  background: #0f1417;
  margin: 12px 0;
}

QSlider::handle:horizontal {
  /* image: url(./autoware-rviz-icons/primary/slider.svg); */
  width: 22px;
  height: 18px;
  margin: -9px -9px;
}


QSlider::handle:vertical {
  /* image: url(./autoware-rviz-icons/primary/slider.svg); */
  background: #84c2e6;
  width: 9px;
  height: 9px;
  min-height: 0px;
  margin: -9px -18px;
}

QSlider::add-page {
  background: #5e5e5e;
}

QSlider::sub-page {
  background: #84c2e6;
}

/*  ------------------------------------------------------------------------  */
/*  QLabel  */

QLabel {
  border: none;
  background: transparent;
  color: #ffffff;
}

QLabel:disabled {
  color: rgba(255, 255, 255, 0.2);
}

/*  ------------------------------------------------------------------------  */
/*  VLines and HLinex  */

QFrame[frameShape="4"] {
  border-width: 1px 0 0 0;
  background: none;
}

QFrame[frameShape="5"] {
  border-width: 0 1px 0 0;
  background: none;
}

QFrame[frameShape="4"],
QFrame[frameShape="5"] {
  border-color: #0f1417;
}

/*  ------------------------------------------------------------------------  */
/*  QToolBar  */

QToolBar {
  background: #0f1417;
  border: 0px solid;
}

QToolBar:horizontal {
  /* border-bottom: 1px solid rgba(132, 194, 230, 0.7); */
  border-top: 1px solid rgba(132, 194, 230, 0.7);
}

QToolBar:vertical {
  border-right: 1px solid rgba(132, 194, 230, 0.7);
  border-left: 1px solid rgba(132, 194, 230, 0.7);
}

QToolBar::handle:horizontal {
  image: url(./autoware-rviz-icons/primary/toolbar-handle-horizontal.svg);
}

QToolBar::handle:vertical {
  image: url(./autoware-rviz-icons/primary/toolbar-handle-vertical.svg);
}

QToolBar::separator:horizontal {
  border-top: 1px solid rgba(132, 194, 230, 0.7);
  border-bottom: 1px solid rgba(132, 194, 230, 0.7);
  width: 1px;
}

QToolBar::separator:vertical {
  border-top: 1px solid rgba(132, 194, 230, 0.7);
  border-bottom: 1px solid rgba(132, 194, 230, 0.7);
  height: 1px;
}

/*  ------------------------------------------------------------------------  */
/*  QToolButton  */

QToolButton {
  background: #0f1417;
  border: 0px;
  height: 36px;
  margin: 2px;
  padding: 2px;
  border-radius: 12px;
}

QToolButton:hover {
  background: #525252;
  }

QToolButton:pressed {
  background: #525252;
}

QToolButton:checked {
  background: #525252;
  border-left: 3px solid rgba(132, 194, 230, 0.7);
  border-bottom: 3px solid rgba(132, 194, 230, 0.7);
}

/*  ------------------------------------------------------------------------  */
/*  General viewers  */

QTableView {
  background-color: #0f1417;
  border: 1px solid #232629;
  border-radius: 4px;
}

QTreeView,
QListView {
  margin: 0px;
  border: 0px;
}

QTableView::item,
QTreeView::item,
QListView::item {
  padding: 2px;
  min-height: 12px;
  color: #ffffff;
  selection-color: #84c2e6;
  border-color: transparent; /* Fix #34 */
}

/*  ------------------------------------------------------------------------  */
/*  Items Selection */

QTableView::item:selected,
QTreeView::item:selected,
QListView::item:selected {
  background-color: rgba(132,194,230, 0.1);
  selection-background-color: #84c2e6;
  color: #ffffff;
  selection-color: #84c2e6;
}

QTableView::item:selected:focus,
QTreeView::item:selected:focus,
QListView::item:selected:focus {
  color: #ffffff;
  selection-color: #84c2e6;
}

/* hover */
QTableView::item:hover,
QTreeView::item:hover,
QListView::item:hover {
  color: #ffffff;
  selection-color: #84c2e6;
}

QTableView::item:disabled {
  color: rgba(255, 255, 255, 0.3);
  selection-color: #84c2e6;
  background-color: #0f1417;
  selection-background-color: #84c2e6;
}

/*  ------------------------------------------------------------------------  */
/*  QTreeView  */

QTreeView::branch {
  background-color: transparent;
}

QTreeView::branch:closed:has-children:has-siblings,
QTreeView::branch:closed:has-children:!has-siblings {
  image: url(./autoware-rviz-icons/primary/branch-closed.svg);
}

QTreeView::branch:open:has-children:!has-siblings,
QTreeView::branch:open:has-children:has-siblings {
  image: url(./autoware-rviz-icons/primary/branch-open.svg);
}

/*
QTreeView::branch:has-siblings:!adjoins-item {
  border-image: url(./autoware-rviz-icons/disabled/vline.svg);
}

QTreeView::branch:has-siblings:adjoins-item {
  border-image: url(./autoware-rviz-icons/disabled/branch-more.svg);
}

QTreeView::branch:!has-children:!has-siblings:adjoins-item,
QTreeView::branch:has-children:!has-siblings:adjoins-item {
  border-image: url(./autoware-rviz-icons/disabled/branch-end.svg);
} */

QTreeView QHeaderView::section {
  border: none;
}

/*  ------------------------------------------------------------------------  */
/*  Custom buttons  */

QPushButton.danger {
  border-color: #dc3545;
  color: #dc3545;
}

QPushButton.danger:checked,
QPushButton.danger:pressed {
  color: #31363b;
  background-color: #dc3545;
}

QPushButton.warning {
  border-color: #ffc107;
  color: #ffc107;
}

QPushButton.warning:checked,
QPushButton.warning:pressed {
  color: #31363b;
  background-color: #ffc107;
}

QPushButton.success {
  border-color: #84c2e6;
  color: #84c2e6;
}

QPushButton.success:checked,
QPushButton.success:pressed {
  color: #ffffff;
  background-color: #84c2e6;
}

QPushButton.danger:flat:hover {
  background-color: rgba(220, 53, 69, 0.2);
}

QPushButton.danger:flat:pressed,
QPushButton.danger:flat:checked {
  background-color: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

QPushButton.warning:flat:hover {
  background-color: rgba(255, 193, 7, 0.2);
}

QPushButton.warning:flat:pressed,
QPushButton.warning:flat:checked {
  background-color: rgba(255, 193, 7, 0.1);
  color: #ffc107;
}

QPushButton.success:flat:hover {
  background-color: #84c2e6;
}

QPushButton.success:flat:pressed,
QPushButton.success:flat:checked {
  background-color: rgba(132,194,230, 0.1);
  color: #84c2e6;
}

/*  ------------------------------------------------------------------------  */
/*  QTableView  */

QTableCornerButton::section {
  background-color: #0f1417;
  border-radius: 0px;
  border-right: 1px solid;
  border-bottom: 1px solid;
  border-color: #31363b;
}

QHeaderView {
  border: none;
}

QHeaderView::section {
  color: rgba(255, 255, 255, 0.7);
  text-transform: capitalize;
  background-color: #0f1417;
  padding: 0 24px;
  height: 36px;
  border-radius: 0px;
  border-right: 1px solid;
  border-bottom: 1px solid;
  border-color: #31363b;
}

QHeaderView::section:vertical {
}

QHeaderView::section:horizontal {
}

/*  ------------------------------------------------------------------------  */
/*  QLCDNumber  */

QLCDNumber {
  color: #84c2e6;
  background-color: rgba(132,194,230, 0.1);
  border: 1px solid rgba(132,194,230, 0.3);
  border-radius: 4px;
}

/*  ------------------------------------------------------------------------  */
/*  QCalendarWidget  */

QCalendarWidget {
  min-height: 300px;
}

#qt_calendar_prevmonth {
  qproperty-icon: url(./autoware-rviz-icons/primary/leftarrow.svg);
}

#qt_calendar_nextmonth {
  qproperty-icon: url(./autoware-rviz-icons/primary/rightarrow.svg);
}

/*  ------------------------------------------------------------------------  */
/*  Inline QLineEdit  */

QTreeView QLineEdit,
QTableView QLineEdit,
QListView QLineEdit {
  color: #ffffff;
  background-color: #0f1417;
  /* border: 1px solid unset; */
  border-radius: unset;
  padding: unset;
  padding-left: unset;
  height: unset;
  border-width: unset;
  border-top-left-radius: unset;
  border-top-right-radius: unset;
}

/*  ------------------------------------------------------------------------  */
/*  QToolTip  */

QToolTip {
  padding: 4px;
  border: 1px solid #31363b;
  border-radius: 4px;
  color: #ffffff;
  background-color: #0f1417;
}

/*  ------------------------------------------------------------------------  */
/*  QDialog  */

/* linux */
QDialog QToolButton,
QDialog QToolButton:hover,
QDialog QToolButton:pressed,
QDialog QToolButton:checked {
  border: 0px;
  height: unset;
  margin: unset;
  padding: unset;
  border-right: unset;
  border-left: unset;
  background-color: #84c2e6;
  color: #ffffff;
  border-radius: 8px;
}

QDialog QToolButton:disabled {
  background-color: #0f1417;
  color: #ffffff;
}

/*  ------------------------------------------------------------------------  */
/*  Grips  */

QMainWindow::separator:vertical,
QSplitter::handle:horizontal {
  image: url(./autoware-rviz-icons/primary/splitter-horizontal.svg);
}

QMainWindow::separator:vertical {
 width: 4px;
}

QMainWindow::separator:horizontal,
QSplitter::handle:vertical {
  image: url(./autoware-rviz-icons/primary/splitter-vertical.svg);
}

QSizeGrip {
  image: url(./autoware-rviz-icons/primary/sizegrip.svg);
  background-color: transparent;
}

QMenuBar QToolButton:hover,
QMenuBar QToolButton:pressed,
QMenuBar QToolButton {
  border-width: 0;
  /* border-left: 10px; */
  border-image: url(./autoware-rviz-icons/primary/rightarrow2.svg);
  background-color: transparent;
}

/*  ------------------------------------------------------------------------  */
/*  Focus  */

QDateTimeEdit:focus,
QSpinBox:focus,
QDoubleSpinBox:focus,
QLineEdit:focus,
QComboBox:focus {
  color: #84c2e6;
  border: 2px solid rgba(255, 255, 255, 0.0);
  border-width: 0 0 2px 0;
}

QDateTimeEdit::up-button:focus,
QDoubleSpinBox::up-button:focus,
QSpinBox::up-button:focus {
  image: url(./autoware-rviz-icons/primary/uparrow.svg);
}

QDateTimeEdit::down-button:focus,
QDoubleSpinBox::down-button:focus,
QSpinBox::down-button:focus {
  image: url(./autoware-rviz-icons/primary/downarrow.svg);
}