[squeak-dev] Re: The Trunk: System-cmm.860.mcz

marcel.taeumel Marcel.Taeumel at hpi.de
Wed Aug 3 06:53:30 UTC 2016


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 at .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.


More information about the Squeak-dev mailing list