These changes are the bare minimum to make this theme have a readable contrast and expected behaviors w.r.t. selection vs. non-selection in a dark theme.
I would also prefer only for the reserved words -- self, super, thisContext, true, false and nil -- to be in bold font, the rest to be normal emphasis. I love the colors chosen for comments, classes and numerical constants, but syntax colors that provide more appropriate distinction between messages, inst-vars, variables, classes and constants is desirable.
So far, I refrained from doing so, until I see the reaction to these changes.. :) I think I was the only one for years who said he wanted a "dark" theme, so maybe no one will mind if I do a bit more here..? :)
On Tue, Aug 2, 2016 at 4:29 PM, commits@source.squeak.org wrote:
Chris Muller uploaded a new version of System to project The Trunk: http://source.squeak.org/trunk/System-cmm.860.mcz
==================== Summary ====================
Name: System-cmm.860 Author: cmm Time: 2 August 2016, 4:29:02.356681 pm UUID: 0980ea7f-76ef-4ff1-8e27-b8e0840f9a70 Ancestors: System-mt.859
Fixes to the Community Dark theme: Dark themes must opposite a light theme -- in a Dark theme, darkness is the standard color of a widgets standard state, with increased lightness being used to indicate selected / hovered / feedback states. - Move toward a universal "selection" color, #dbAqua. I would like to make this the color for text-selection too, but we would need to adjust the syntax colors for that, and this change is just intended to make Community Dark minimally usable, not my preference. - Buttons now indicate their "on" selection state with a little color. - The labels of background windows are now readable. - The color palette was much too bright. Darkened it.
=============== Diff against System-mt.859 ===============
Item was changed: ----- Method: CommunityTheme class>>addDarkButtons: (in category 'instance creation') ----- addDarkButtons: theme "self createDark apply." theme
set: #borderColor for: #PluggableButtonMorph to: Color gray ;
set: #color for: #PluggableButtonMorph to: Color darkGray ;
set: #borderColor for: #PluggableButtonMorph to: Color darkGray darker;
set: #color for: #PluggableButtonMorph to: Color gray; set: #textColor for: #PluggableButtonMorph to: Color white;
set: #selectionModifier for: #PluggableButtonMorph to: [ [:c | self dbAqua twiceDarker] ];
set: #hoverModifier for: #PluggableButtonMorph to: [ [:c | c adjustBrightness: 0.2] ];
set: #feedbackModifier for: #PluggableButtonMorph to: [ [:c | c adjustBrightness: 0.3] ].
set: #selectionModifier for: #PluggableButtonMorph to: [ [:c | c adjustBrightness: -0.2] ];
set: #hoverModifier for: #PluggableButtonMorph to: [ [:c | c adjustBrightness: -0.2] ];
set: #feedbackModifier for: #PluggableButtonMorph to: [ [:c | c adjustBrightness: -0.3] ]. "And the plus-version." theme set: #disabledTextColor for: #PluggableButtonMorphPlus to: Color gray.
!
Item was changed: ----- Method: CommunityTheme class>>addDarkMenusAndDockingBars: (in category 'instance creation') ----- addDarkMenusAndDockingBars: theme "self createDark apply." theme set: #borderWidth for: #MenuMorph to: 0; set: #color for: #MenuMorph to: Color darkGray; set: #titleTextColor for: #MenuMorph to: Color white; set: #lineColor for: #MenuMorph to: Color lightGray; set: #lineStyle for: #MenuMorph to: BorderStyle default; set: #lineWidth for: #MenuMorph to: 1.
theme set: #textColor for: #MenuItemMorph to: Color white;
set: #selectionColor for: #MenuItemMorph to: self dbAqua;
set: #selectionTextColor for: #MenuItemMorph to: Color white.
set: #selectionColor for: #MenuItemMorph to: Color white;
set: #selectionTextColor for: #MenuItemMorph to: Color black. "set: #subMenuMarker for: #MenuItemMorph to: nil." "Use hard-coded default. See MenuItemMorph." "The world main docking bar." theme
" set: #color for: #DockingBarMorph to: Color darkGray;" " set: #selectionColor for: #DockingBarItemMorph to: self darkContentSecondary;" set: #logoColor for: #TheWorldMainDockingBar to: Color white; set: #selectionLogoColor for: #TheWorldMainDockingBar to: Color black.!
Item was changed: ----- Method: CommunityTheme class>>addDarkScrollables: (in category 'instance creation') ----- addDarkScrollables: theme "self createDark apply."
"Scroll bars" theme set: #thumbColor for: #ScrollBar to: Color gray; set: #thumbBorderColor for: #ScrollBar to: Color darkGray. "Scroll panes (includes generic stuff for list widgets, tree widgets, and text widgets." theme set: #color for: #ScrollPane to: (Color gray: 0.1). "List widgets" theme set: #textColor for: #PluggableListMorph to: (Color gray: 0.9);
set: #selectionColor for: #PluggableListMorph to: self dbAqua;
set: #selectionColor for: #PluggableListMorph to: (Color r: 0.15 g: 0.4 b: 0.15 alpha: 1.0); set: #selectionTextColor for: #PluggableListMorph to: Color white;
derive: #multiSelectionColor for: #PluggableListMorph from: #PluggableListMorph at: #selectionColor do: [:c | c twiceDarker];
set: #filterColor for: #PluggableListMorph to: (self dbYellow alpha: 0.5);
set: #filterTextColor for: #PluggableListMorph to: Color white;
set: #preSelectionModifier for: #PluggableListMorph to: [ [:c | c twiceDarker ] ];
set: #hoverSelectionModifier for: #PluggableListMorph to: [ [:c | c twiceDarker alpha: 0.5 ] ].
set: #filterColor for: #PluggableListMorph to: self dbYellow;
set: #filterTextColor for: #PluggableListMorph to: Color black;
set: #preSelectionModifier for: #PluggableListMorph to: [ [:c | c lighter alpha: 0.5 ] ];
set: #hoverSelectionModifier for: #PluggableListMorph to: [ [:c | c lighter alpha: 0.5 ] ]. "Tree widgets" theme set: #highlightTextColor for: #SimpleHierarchicalListMorph to: self dbYellow lighter lighter; set: #lineColor for: #SimpleHierarchicalListMorph to: Color gray. "Text widgets" theme set: #textColor for: #PluggableTextMorph to: (Color gray: 0.9); set: #caretColor for: #PluggableTextMorph to: Color white; set: #selectionColor for: #PluggableTextMorph to: (Color r: 0.15 g: 0.4 b: 0.15 alpha: 1.0); set: #unfocusedSelectionModifier for: #PluggableTextMorph to: [ [:c | c duller] ]; set: #adornmentReadOnly for: #PluggableTextMorph to: self dbPurple; set: #adornmentRefuse for: #PluggableTextMorph to: self dbBlue; set: #adornmentConflict for: #PluggableTextMorph to: self dbRed; set: #adornmentDiff for: #PluggableTextMorph to: self dbGreen; set: #adornmentNormalEdit for: #PluggableTextMorph to: self dbOrange; set: #adornmentDiffEdit for: #PluggableTextMorph to: self dbYellow. theme set: #balloonTextColor for: #PluggableTextMorphPlus to: Color darkGray.!
Item was changed: ----- Method: CommunityTheme class>>addDarkWindowColors: (in category 'instance creation') ----- addDarkWindowColors: theme "self createDark apply." theme set: #uniformWindowColor for: #Model to: Color darkGray;
set: #unfocusedWindowColorModifier for: #SystemWindow to: [ [:color | color darker] ];
set: #unfocusedLabelColor for: #SystemWindow to: Color veryLightGray;
set: #unfocusedLabelColor for: #SystemWindow to: Color gray; set: #focusedLabelColor for: #SystemWindow to: Color white; set: #customWindowColor for: #Browser to: self dbGreen; set: #customWindowColor for: #ChangeList to: self dbBlue; set: #customWindowColor for: #ChangeSorter to: self dbBlue; set: #customWindowColor for: #ChatNotes to: self dbPurple; set: #customWindowColor for: #ClassCommentVersionsBrowser to: self dbPurple; set: #customWindowColor for: #Debugger to: self dbRed; set: #customWindowColor for: #DualChangeSorter to: self dbBlue; set: #customWindowColor for: #FileContentsBrowser to: self dbYellow; set: #customWindowColor for: #FileList to: self dbYellow; set: #customWindowColor for: #InstanceBrowser to: self dbBlue; set: #customWindowColor for: #Lexicon to: self dbBlue; set: #customWindowColor for: #MCTool to: self dbPurple; set: #customWindowColor for: #MessageNames to: self dbGreen; set: #customWindowColor for: #MessageSet to: self dbBlue; set: #customWindowColor for: #PackagePaneBrowser to: self dbGreen; set: #customWindowColor for: #PluggableFileList to: self dbYellow; set: #customWindowColor for: #PreferenceBrowser to: self dbBlue; set: #customWindowColor for: #SMLoader to: self dbOrange; set: #customWindowColor for: #SMLoaderPlus to: self dbOrange; set: #customWindowColor for: #SMReleaseBrowser to: self dbOrange; set: #customWindowColor for: #ScriptingDomain to: self dbYellow; set: #customWindowColor for: #SelectorBrowser to: self dbBlue; set: #customWindowColor for: #StringHolder to: self dbYellow; set: #customWindowColor for: #TestRunner to: self dbOrange; set: #customWindowColor for: #TranscriptStream to: self dbOrange; set: #customWindowColor for: #VersionsBrowser to: self dbPurple.!
Item was changed: ----- Method: CommunityTheme class>>dbAqua (in category 'colors by purpose') ----- dbAqua
^ Color r: 0.2 g: 0.4 b: 0.4!
^Color r: 0.542 g: 0.745 b: 0.717!
Item was changed: ----- Method: CommunityTheme class>>dbBlue (in category 'colors by purpose') ----- dbBlue
^Color r: 0.406 g: 0.535 b: 0.645!
^Color r: 0.506 g: 0.635 b: 0.745!
Item was changed: ----- Method: CommunityTheme class>>dbGreen (in category 'colors by purpose') ----- dbGreen
^(Color r: 0.33 g: 0.542 b: 0.287)!
^Color r: 0.71 g: 0.741 b: 0.408!
Item was changed: ----- Method: CommunityTheme class>>dbOrange (in category 'colors by purpose') ----- dbOrange
^Color r: 0.4 g: 0.2666 b: 0.172!
^Color r: 0.871 g: 0.577 b: 0.372!
Item was changed: ----- Method: CommunityTheme class>>dbRed (in category 'colors by purpose') ----- dbRed
^Color r: 0.6 g: 0.3 b: 0.3!
^Color r: 0.8 g: 0.4 b: 0.4!
Item was changed: ----- Method: CommunityTheme class>>dbYellow (in category 'colors by purpose') ----- dbYellow
^ (Color r: 0.554 g: 0.488 b: 0.134)!
^Color r: 0.941 g: 0.776 b: 0.455!
Chris Muller-3 wrote
These changes are the bare minimum to make this theme have a readable contrast and expected behaviors w.r.t. selection vs. non-selection in a dark theme.
I would also prefer only for the reserved words -- self, super, thisContext, true, false and nil -- to be in bold font, the rest to be normal emphasis. I love the colors chosen for comments, classes and numerical constants, but syntax colors that provide more appropriate distinction between messages, inst-vars, variables, classes and constants is desirable.
So far, I refrained from doing so, until I see the reaction to these changes.. :) I think I was the only one for years who said he wanted a "dark" theme, so maybe no one will mind if I do a bit more here..? :)
On Tue, Aug 2, 2016 at 4:29 PM, <
commits@.squeak
> wrote:
Chris Muller uploaded a new version of System to project The Trunk: http://source.squeak.org/trunk/System-cmm.860.mcz
==================== Summary ====================
Name: System-cmm.860 Author: cmm Time: 2 August 2016, 4:29:02.356681 pm UUID: 0980ea7f-76ef-4ff1-8e27-b8e0840f9a70 Ancestors: System-mt.859
Fixes to the Community Dark theme: Dark themes must opposite a light theme -- in a Dark theme, darkness is the standard color of a widgets standard state, with increased lightness being used to indicate selected / hovered / feedback states. - Move toward a universal "selection" color, #dbAqua. I would like to make this the color for text-selection too, but we would need to adjust the syntax colors for that, and this change is just intended to make Community Dark minimally usable, not my preference. - Buttons now indicate their "on" selection state with a little color. - The labels of background windows are now readable. - The color palette was much too bright. Darkened it.
=============== Diff against System-mt.859 ===============
Item was changed: ----- Method: CommunityTheme class>>addDarkButtons: (in category 'instance creation') ----- addDarkButtons: theme "self createDark apply." theme
set: #borderColor for: #PluggableButtonMorph to: Color
gray ;
set: #color for: #PluggableButtonMorph to: Color darkGray
;
set: #borderColor for: #PluggableButtonMorph to: Color
darkGray darker;
set: #color for: #PluggableButtonMorph to: Color gray; set: #textColor for: #PluggableButtonMorph to: Color
white;
set: #selectionModifier for: #PluggableButtonMorph to: [
[:c | self dbAqua twiceDarker] ];
set: #hoverModifier for: #PluggableButtonMorph to: [ [:c
| c adjustBrightness: 0.2] ];
set: #feedbackModifier for: #PluggableButtonMorph to: [
[:c | c adjustBrightness: 0.3] ].
set: #selectionModifier for: #PluggableButtonMorph to: [
[:c | c adjustBrightness: -0.2] ];
set: #hoverModifier for: #PluggableButtonMorph to: [ [:c
| c adjustBrightness: -0.2] ];
set: #feedbackModifier for: #PluggableButtonMorph to: [
[:c | c adjustBrightness: -0.3] ].
"And the plus-version." theme set: #disabledTextColor for: #PluggableButtonMorphPlus to:
Color gray. !
Item was changed: ----- Method: CommunityTheme class>>addDarkMenusAndDockingBars: (in category 'instance creation') ----- addDarkMenusAndDockingBars: theme "self createDark apply." theme set: #borderWidth for: #MenuMorph to: 0; set: #color for: #MenuMorph to: Color darkGray; set: #titleTextColor for: #MenuMorph to: Color white; set: #lineColor for: #MenuMorph to: Color lightGray; set: #lineStyle for: #MenuMorph to: BorderStyle default; set: #lineWidth for: #MenuMorph to: 1.
theme set: #textColor for: #MenuItemMorph to: Color white;
set: #selectionColor for: #MenuItemMorph to: self dbAqua;
set: #selectionTextColor for: #MenuItemMorph to: Color
white.
set: #selectionColor for: #MenuItemMorph to: Color white;
set: #selectionTextColor for: #MenuItemMorph to: Color
black. "set: #subMenuMarker for: #MenuItemMorph to: nil." "Use hard-coded default. See MenuItemMorph."
"The world main docking bar." theme
" set: #color for: #DockingBarMorph to: Color darkGray;" " set: #selectionColor for: #DockingBarItemMorph to: self darkContentSecondary;" set: #logoColor for: #TheWorldMainDockingBar to: Color white; set: #selectionLogoColor for: #TheWorldMainDockingBar to: Color black.!
Item was changed: ----- Method: CommunityTheme class>>addDarkScrollables: (in category 'instance creation') ----- addDarkScrollables: theme "self createDark apply."
"Scroll bars" theme set: #thumbColor for: #ScrollBar to: Color gray; set: #thumbBorderColor for: #ScrollBar to: Color
darkGray.
"Scroll panes (includes generic stuff for list widgets, tree
widgets, and text widgets." theme set: #color for: #ScrollPane to: (Color gray: 0.1).
"List widgets" theme set: #textColor for: #PluggableListMorph to: (Color gray:
0.9);
set: #selectionColor for: #PluggableListMorph to: self
dbAqua;
set: #selectionColor for: #PluggableListMorph to: (Color
r: 0.15 g: 0.4 b: 0.15 alpha: 1.0); set: #selectionTextColor for: #PluggableListMorph to: Color white;
derive: #multiSelectionColor for: #PluggableListMorph
from: #PluggableListMorph at: #selectionColor do: [:c | c twiceDarker];
set: #filterColor for: #PluggableListMorph to: (self
dbYellow alpha: 0.5);
set: #filterTextColor for: #PluggableListMorph to: Color
white;
set: #preSelectionModifier for: #PluggableListMorph to: [
[:c | c twiceDarker ] ];
set: #hoverSelectionModifier for: #PluggableListMorph to:
[ [:c | c twiceDarker alpha: 0.5 ] ].
set: #filterColor for: #PluggableListMorph to: self
dbYellow;
set: #filterTextColor for: #PluggableListMorph to: Color
black;
set: #preSelectionModifier for: #PluggableListMorph to: [
[:c | c lighter alpha: 0.5 ] ];
set: #hoverSelectionModifier for: #PluggableListMorph to:
[ [:c | c lighter alpha: 0.5 ] ].
"Tree widgets" theme set: #highlightTextColor for:
#SimpleHierarchicalListMorph to: self dbYellow lighter lighter; set: #lineColor for: #SimpleHierarchicalListMorph to: Color gray.
"Text widgets" theme set: #textColor for: #PluggableTextMorph to: (Color gray:
0.9); set: #caretColor for: #PluggableTextMorph to: Color white; set: #selectionColor for: #PluggableTextMorph to: (Color r: 0.15 g: 0.4 b: 0.15 alpha: 1.0); set: #unfocusedSelectionModifier for: #PluggableTextMorph to: [ [:c | c duller] ]; set: #adornmentReadOnly for: #PluggableTextMorph to: self dbPurple; set: #adornmentRefuse for: #PluggableTextMorph to: self dbBlue; set: #adornmentConflict for: #PluggableTextMorph to: self dbRed; set: #adornmentDiff for: #PluggableTextMorph to: self dbGreen; set: #adornmentNormalEdit for: #PluggableTextMorph to: self dbOrange; set: #adornmentDiffEdit for: #PluggableTextMorph to: self dbYellow. theme set: #balloonTextColor for: #PluggableTextMorphPlus to: Color darkGray.!
Item was changed: ----- Method: CommunityTheme class>>addDarkWindowColors: (in category 'instance creation') ----- addDarkWindowColors: theme "self createDark apply." theme set: #uniformWindowColor for: #Model to: Color darkGray;
set: #unfocusedWindowColorModifier for: #SystemWindow to:
[ [:color | color darker] ];
set: #unfocusedLabelColor for: #SystemWindow to: Color
veryLightGray;
set: #unfocusedLabelColor for: #SystemWindow to: Color
gray; set: #focusedLabelColor for: #SystemWindow to: Color white;
set: #customWindowColor for: #Browser to: self dbGreen; set: #customWindowColor for: #ChangeList to: self dbBlue; set: #customWindowColor for: #ChangeSorter to: self
dbBlue; set: #customWindowColor for: #ChatNotes to: self dbPurple; set: #customWindowColor for: #ClassCommentVersionsBrowser to: self dbPurple; set: #customWindowColor for: #Debugger to: self dbRed; set: #customWindowColor for: #DualChangeSorter to: self dbBlue; set: #customWindowColor for: #FileContentsBrowser to: self dbYellow; set: #customWindowColor for: #FileList to: self dbYellow; set: #customWindowColor for: #InstanceBrowser to: self dbBlue; set: #customWindowColor for: #Lexicon to: self dbBlue; set: #customWindowColor for: #MCTool to: self dbPurple; set: #customWindowColor for: #MessageNames to: self dbGreen; set: #customWindowColor for: #MessageSet to: self dbBlue; set: #customWindowColor for: #PackagePaneBrowser to: self dbGreen; set: #customWindowColor for: #PluggableFileList to: self dbYellow; set: #customWindowColor for: #PreferenceBrowser to: self dbBlue; set: #customWindowColor for: #SMLoader to: self dbOrange; set: #customWindowColor for: #SMLoaderPlus to: self dbOrange; set: #customWindowColor for: #SMReleaseBrowser to: self dbOrange; set: #customWindowColor for: #ScriptingDomain to: self dbYellow; set: #customWindowColor for: #SelectorBrowser to: self dbBlue; set: #customWindowColor for: #StringHolder to: self dbYellow; set: #customWindowColor for: #TestRunner to: self dbOrange; set: #customWindowColor for: #TranscriptStream to: self dbOrange; set: #customWindowColor for: #VersionsBrowser to: self dbPurple.!
Item was changed: ----- Method: CommunityTheme class>>dbAqua (in category 'colors by purpose') ----- dbAqua
^ Color r: 0.2 g: 0.4 b: 0.4!
^Color r: 0.542 g: 0.745 b: 0.717!
Item was changed: ----- Method: CommunityTheme class>>dbBlue (in category 'colors by purpose') ----- dbBlue
^Color r: 0.406 g: 0.535 b: 0.645!
^Color r: 0.506 g: 0.635 b: 0.745!
Item was changed: ----- Method: CommunityTheme class>>dbGreen (in category 'colors by purpose') ----- dbGreen
^(Color r: 0.33 g: 0.542 b: 0.287)!
^Color r: 0.71 g: 0.741 b: 0.408!
Item was changed: ----- Method: CommunityTheme class>>dbOrange (in category 'colors by purpose') ----- dbOrange
^Color r: 0.4 g: 0.2666 b: 0.172!
^Color r: 0.871 g: 0.577 b: 0.372!
Item was changed: ----- Method: CommunityTheme class>>dbRed (in category 'colors by purpose') ----- dbRed
^Color r: 0.6 g: 0.3 b: 0.3!
^Color r: 0.8 g: 0.4 b: 0.4!
Item was changed: ----- Method: CommunityTheme class>>dbYellow (in category 'colors by purpose') ----- dbYellow
^ (Color r: 0.554 g: 0.488 b: 0.134)!
^Color r: 0.941 g: 0.776 b: 0.455!
Hi Chris,
please no "bold" in any source code keywords. :-)
Here is some feedback for these changes: - menu selection is barely visible, especially with the gray around it -- maybe change also #selectionTextColor to be not white? - text selection is too prominent and could be a little bit duller - add theme set: #borderColor for: #ScrollPane to: (Color gray: 0.075) to have a matching border color in scroll panes outside system windows such as the browser's class search
Best, Marcel
-- View this message in context: http://forum.world.st/The-Trunk-System-cmm-860-mcz-tp4909214p4909245.html Sent from the Squeak - Dev mailing list archive at Nabble.com.
On 03.08.2016, at 08:53, marcel.taeumel Marcel.Taeumel@hpi.de wrote:
please no "bold" in any source code keywords. :-)
+1
squeak-dev@lists.squeakfoundation.org