Page MenuHomePhabricator

Optimize dark theme colors and contrast
Closed, ResolvedPublic

Description

The current contrast of the dark theme is too low. It is exhausting for the eyes in relatively bright rooms to work with MITK. Inactive elements are nearly invisible in such conditions.

Event Timeline

kislinsk triaged this task as High priority.Mar 2 2018, 3:28 PM
kislinsk created this task.
kislinsk removed a project: IGT.
kislinsk added a comment.EditedMar 2 2018, 3:31 PM

This are the luminance values [0..255] (HSL) for the MITK dark theme and the Visual Studio dark theme:

MITKVisual Studio
Background50 (19.6%)47 (18.4%)
Text178 (70%)241 (95%)
Inactive elements29 (11.4%)79 (31%)
Icons178 (70%)199 (78%)
kislinsk added a comment.EditedMar 2 2018, 3:42 PM

While Visual Studio has a text-to-background contrast of 76.6%, MITK has a text-background contrast of just 50.4%.

Inactive-to-background is 8.2% compared to 12.6%, while inactive elements are darker than the background in MITK but brighter in Visual Studio.

The dark theme is hard to modify as it has hundreds of pseudo color overrides, which very often are not necessary at all. In total, the dark theme is 31 KB in size. I may come up with something more lean...

These are the Qt widgets used by MITK, determined by egrep -ohr --include=\*.{cpp,h,ui} "Q[A-Z][A-Za-z]+" . | sort | uniq. Non-widget classes were removed manually from the list:

  • QAbstractButton
  • QAbstractItemView
  • QAbstractScrollArea
  • QAbstractSpinBox
  • QButton
  • QButtonGroup
  • QCheckBox
  • QColorDialog
  • QComboBox
  • QComboBoxItem
  • QCommandLinkButton
  • QDialog
  • QDialogButtonBox
  • QDockWidget
  • QDoubleSpinBox
  • QErrorMessage
  • QFileDialog
  • QFrame
  • QGraphicsDropShadowEffect
  • QGraphicsEffect
  • QGraphicsView
  • QGroupBox
  • QHeaderView
  • QHelpContentWidget
  • QHelpIndexWidget
  • QHelpSearchQueryWidget
  • QHelpSearchResultWidget
  • QLabel
  • QLCDNumber
  • QLine
  • QLineEdit
  • QListBox
  • QListView
  • QListWidget
  • QMainWindow
  • QMenu
  • QMenuBar
  • QMessageBox
  • QPlainTextEdit
  • QProgressBar
  • QProgressDialog
  • QPushButton
  • QRadioButton
  • QRubberBand
  • QScrollArea
  • QScrollBar
  • QSlider
  • QSpinBox
  • QSplashScreen
  • QSplitter
  • QSplitterHandle
  • QStackedWidget
  • QStatusBar
  • QTabBar
  • QTableView
  • QTableWidget
  • QTabWidget
  • QTextBrowser
  • QTextEdit
  • QToolBar
  • QToolBox
  • QToolButton
  • QToolTip
  • QTreeView
  • QTreeWidget
  • QWebEngineView
  • QWidget

There are also a few QStyleOptions used by MITK:

  • QStyleOptionButton
  • QStyleOptionComboBox
  • QStyleOptionMenuItem
  • QStyleOptionViewItem

CTK widgets used by MITK (not guaranteed to be complete):

  • ctkCollapsibleGroupBox
  • ctkColorPickerButton
  • ctkDICOMQueryRetrieveWidget
  • ctkDICOMTableManager
  • ctkDirectoryButton
  • ctkDoubleRangeSlider
  • ctkDoubleSlider
  • ctkDoubleSpinBox
  • ctkExpandButton
  • ctkPathListButtonsWidget
  • ctkPathListWidget
  • ctkRangeSlider
  • ctkRangeWidget
  • ctkSearchBox
  • ctkSliderWidget
This comment was removed by kislinsk.

This will definitely be included in the upcoming release and minor styling issues will be fixed during the alpha phase. As there is more than simple styling, I will merge now and create subtasks for the remaining issues.

kislinsk closed this task as Resolved.Mar 30 2018, 4:17 AM