RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 02:57:36 +00:00
Code Issues Activity Actions

Base+LibGUI+LibGfx: Improve disabled text readability

Browse source 
Currently, disabled text colors are hardcoded. They look good in Default
and light themes, but no so good in dark ones. This PR adds new
variables for all themes to correctly display disabled text.
This commit is contained in:
Jaime Valenzuela Durán 2022-03-05 01:28:03 +01:00 • committed by Andreas Kling
parent 26d29e9220
commit 7c32400431
22 changed files with 44 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Base/res/themes/Basalt.ini
View file

@ -34,6 +34,8 @@ Button=#1f1f1f
ButtonText=white
Base=#1f1f1f
BaseText=white
DisabledTextFront=#4f4f4f
DisabledTextBack=#000000
ThreedHighlight=#2f2f2f
ThreedShadow1=#171717
ThreedShadow2=#0f0f0f

2
Base/res/themes/Coffee.ini
View file

@ -30,6 +30,8 @@ Button=#e6e6e6
ButtonText=black
Base=white
BaseText=black
DisabledTextFront=#808080
DisabledTextBack=white
ThreedHighlight=white
ThreedShadow1=#9397a5
ThreedShadow2=#5d6069

2
Base/res/themes/Cupertino.ini
View file

@ -31,6 +31,8 @@ Button=#212121
ButtonText=#fcfcfc
Base=#292929
BaseText=#fcfcfc
DisabledTextFront=#606060
DisabledTextBack=#000000
ThreedHighlight=#363636
ThreedShadow1=#363636
ThreedShadow2=#363636

2
Base/res/themes/Dark.ini
View file

@ -26,6 +26,8 @@ Button=#555555
ButtonText=white
Base=#424242
BaseText=white
DisabledTextFront=#a0a0a0
DisabledTextBack=#14141a
ThreedHighlight=#6f6f6f
ThreedShadow1=#3d3e40
ThreedShadow2=#2e2f30

2
Base/res/themes/Default.ini
View file

@ -34,6 +34,8 @@ Button=#d4d0c8
ButtonText=black
Base=white
BaseText=black
DisabledTextFront=#808080
DisabledTextBack=white
ThreedHighlight=white
ThreedShadow1=#808080
ThreedShadow2=#404040

2
Base/res/themes/Desert.ini
View file

@ -34,6 +34,8 @@ Button=#d5ccbb
ButtonText=black
Base=white
BaseText=black
DisabledTextFront=#808080
DisabledTextBack=#e1e8e0
ThreedHighlight=#eae6dd
ThreedShadow1=#a28d68
ThreedShadow2=#000000

2
Base/res/themes/Faux Pas.ini
View file

@ -26,6 +26,8 @@ Button=#a0a0a0
ButtonText=black
Base=#a0a0a0
BaseText=black
DisabledTextFront=#707070
DisabledTextBack=white
ThreedHighlight=white
ThreedShadow1=#282828
ThreedShadow2=#282828

2
Base/res/themes/Gruvbox Dark.ini
View file

@ -26,6 +26,8 @@ Button=#32302f
ButtonText=#ebdbb2
Base=#3c3836
BaseText=#ebdbb2
DisabledTextFront=#665c54
DisabledTextBack=#1d2021
ThreedHighlight=#504945
ThreedShadow1=#282828
ThreedShadow2=#1d2021

2
Base/res/themes/Light.ini
View file

@ -34,6 +34,8 @@ Button=#e3e3e3
ButtonText=#4b4b4b
Base=white
BaseText=#4b4b4b
DisabledTextFront=#ababab
DisabledTextBack=white
ThreedHighlight=#e3e3e3
ThreedShadow1=#ababab
ThreedShadow2=#6b6b6b

2
Base/res/themes/Nord.ini
View file

@ -26,6 +26,8 @@ Button=#434c5e
ButtonText=white
Base=#4c566a
BaseText=white
DisabledTextFront=#95adc5
DisabledTextBack=#2e3440
ThreedHighlight=#4c566a
ThreedShadow1=#3b4252
ThreedShadow2=#2e3440

2
Base/res/themes/Olive.ini
View file

@ -36,6 +36,8 @@ Button=#c1cbb5ff
MenuSelectionText=#000000ff
SelectionText=#ffffffff
BaseText=#000000ff
DisabledTextFront=#747d74ff
DisabledTextBack=#e3ffb9ff
SyntaxPreprocessorStatement=#00a0a0ff
Accent=#619910ff
Base=#ffffffff

2
Base/res/themes/Plum.ini
View file

@ -34,6 +34,8 @@ Button=#a89890
ButtonText=black
Base=#d8d0c8
BaseText=black
DisabledTextFront=#808080
DisabledTextBack=#d8d0c8
ThreedHighlight=#d8d0c8
ThreedShadow1=#786058
ThreedShadow2=#201a18

2
Base/res/themes/Pumpkin.ini
View file

@ -36,6 +36,8 @@ Button=#c7c2b0ff
MenuSelectionText=#f3f3f3ff
SelectionText=#ffffffff
BaseText=#000000ff
DisabledTextFront=#808080
DisabledTextBack=#e4d6beff
SyntaxPreprocessorStatement=#00a0a0ff
Accent=#6f517bff
Base=#ffffffff

2
Base/res/themes/Redmond 2000.ini
View file

@ -30,6 +30,8 @@ Button=#d4d0c8
ButtonText=black
Base=white
BaseText=black
DisabledTextFront=#808080
DisabledTextBack=white
ThreedHighlight=white
ThreedShadow1=#808080
ThreedShadow2=#404040

2
Base/res/themes/Redmond.ini
View file

@ -30,6 +30,8 @@ Button=#bfb8bf
ButtonText=black
Base=white
BaseText=black
DisabledTextFront=#7f787f
DisabledTextBack=#fff8ff
ThreedHighlight=#fff8ff
ThreedShadow1=#7f787f
ThreedShadow2=#000000

2
Base/res/themes/Scarlett.ini
View file

@ -39,6 +39,8 @@ BaseText=#000000ff
SyntaxPreprocessorStatement=#00a0a0ff
Accent=#970e0eff
Base=#ffffffff
DisabledTextFront=#808080ff
DisabledTextBack=#ffe1e1ff
InactiveWindowTitle=#d5c7c7ff
HighlightWindowTitle=#ffffffff
MovingWindowTitleShadow=#601e07ff

2
Base/res/themes/Silver.ini
View file

@ -42,6 +42,8 @@ BaseText=#000000ff
SyntaxPreprocessorStatement=#008080ff
Accent=#63639cff
Base=#f3f3f3ff
DisabledTextFront=#808080ff
DisabledTextBack=white
InactiveWindowTitle=#696969ff
HighlightWindowTitle=#000000ff
MovingWindowTitleShadow=#000000ff

2
Base/res/themes/Sunshine.ini
View file

@ -30,6 +30,8 @@ Button=#aeb2c3
ButtonText=black
Base=white
BaseText=black
DisabledTextFront=#9397a5
DisabledTextBack=white
ThreedHighlight=white
ThreedShadow1=#9397a5
ThreedShadow2=#5d6069

4
Userland/Libraries/LibGUI/AbstractButton.cpp
View file

@ -226,8 +226,8 @@ void AbstractButton::paint_text(Painter& painter, const Gfx::IntRect& rect, cons
auto clipped_rect = rect.intersected(this->rect());
if (!is_enabled()) {
painter.draw_text(clipped_rect.translated(1, 1), text(), font, text_alignment, Color::White, Gfx::TextElision::Right, text_wrapping);
painter.draw_text(clipped_rect, text(), font, text_alignment, Color::from_rgb(0x808080), Gfx::TextElision::Right, text_wrapping);
painter.draw_text(clipped_rect.translated(1, 1), text(), font, text_alignment, palette().disabled_text_back(), Gfx::TextElision::Right, text_wrapping);
painter.draw_text(clipped_rect, text(), font, text_alignment, palette().disabled_text_front(), Gfx::TextElision::Right, text_wrapping);
return;
}

4
Userland/Libraries/LibGUI/Label.cpp
View file

@ -104,8 +104,8 @@ void Label::paint_event(PaintEvent& event)
if (is_enabled()) {
painter.draw_text(text_rect, text(), text_alignment(), palette().color(foreground_role()), Gfx::TextElision::Right, text_wrapping());
} else {
painter.draw_text(text_rect.translated(1, 1), text(), font(), text_alignment(), Color::White, Gfx::TextElision::Right, text_wrapping());
painter.draw_text(text_rect, text(), font(), text_alignment(), Color::from_rgb(0x808080), Gfx::TextElision::Right, text_wrapping());
painter.draw_text(text_rect.translated(1, 1), text(), font(), text_alignment(), palette().disabled_text_back(), Gfx::TextElision::Right, text_wrapping());
painter.draw_text(text_rect, text(), font(), text_alignment(), palette().disabled_text_front(), Gfx::TextElision::Right, text_wrapping());
}
}

2
Userland/Libraries/LibGfx/Palette.h
View file

@ -99,6 +99,8 @@ public:
Color menu_selection_text() const { return color(ColorRole::MenuSelectionText); }
Color base() const { return color(ColorRole::Base); }
Color base_text() const { return color(ColorRole::BaseText); }
Color disabled_text_front() const { return color(ColorRole::DisabledTextFront); }
Color disabled_text_back() const { return color(ColorRole::DisabledTextBack); }
Color button() const { return color(ColorRole::Button); }
Color button_text() const { return color(ColorRole::ButtonText); }
Color threed_highlight() const { return color(ColorRole::ThreedHighlight); }

2
Userland/Libraries/LibGfx/SystemTheme.h
View file

@ -30,6 +30,8 @@ namespace Gfx {
C(BaseText) \
C(Button) \
C(ButtonText) \
C(DisabledTextFront) \
C(DisabledTextBack) \
C(DesktopBackground) \
C(FocusOutline) \
C(Gutter) \