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! |
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, <[hidden email]> 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 |
On 03.08.2016, at 08:53, marcel.taeumel <[hidden email]> wrote: > > please no "bold" in any source code keywords. :-) +1 |
Free forum by Nabble | Edit this page |