Hi Karl,
In the dark theme the window titles are supposed to be "lit" when they have focus, and neutral ("unlit") when they don't. Like in the world of Tron. I would like to not lose that from CommunityTheme class>>#addDarkWindowColors:. Would you please "light it" but in a more refined and subdued way than before, instead of "darkening" the base color for unfocused?
Something like:
set: #focusedLabelColor for: #SystemWindow to: self dbText lighter; "<--- the 'base' color needs to be 'lit' here..."
Thanks, Chris
On Tue, Jul 23, 2019 at 5:53 PM Chris Muller asqueaker@gmail.com wrote:
Thanks Karl. Yeah, especially with modern monitors with higher conrast (OLED?) a full rgb 1.0 might stand out as "bright".
I used "save image as..." to make a second image with the same windows in exactly the same positions so I could flip back and forth between them.
What I noticed on my IPS display was a slight blue'ish tint to the text which caused some of the corners of letters to appear less crisp. Lowercase "u" seems particularly affected.
[image: subdued.png]
I hate to disagree on a point of taste, but it feels too colorful, too blue. This "base text" component of the theme is supposed to be a neutral "white". So I did also look at 0.768 x 0.768 x 0.768 but it still seemed a bit too gray'ish, even with my laptop brightness turned all the way up. I do think we need a bit more than that..
I don't want the full 1.0 to be distractingly bright, so if you're willing to meet somewhere in the middle (hopefully the mid 0.80's or so) I won't object.
[image: bright.png]
Thanks, Chris
On Sun, Jul 21, 2019 at 7:38 AM commits@source.squeak.org wrote:
A new version of System was added to project The Inbox: http://source.squeak.org/inbox/System-kfr.1072.mcz
==================== Summary ====================
Name: System-kfr.1072 Author: kfr Time: 21 July 2019, 2:25:06.897679 pm UUID: 184b8ba9-d093-584c-9409-ad52206e82b7 Ancestors: System-mt.1071
Use a subdued text color instead of plain white in community dark theme. Rename dbForeground to dbText
=============== Diff against System-mt.1071 ===============
Item was changed: ----- Method: CommunityTheme class>>addDarkButtons: (in category 'instance creation') ----- addDarkButtons: aUserInterfaceTheme "self createDark apply." aUserInterfaceTheme set: #borderColor for: #PluggableButtonMorph to: Color darkGray darker ; set: #color for: #PluggableButtonMorph to: Color gray darker ;
set: #textColor for: #PluggableButtonMorph to: self
dbText;
set: #textColor for: #PluggableButtonMorph to: Color
white;
set: #selectionModifier for: #PluggableButtonMorph to: [
[:c | self dbSelection twiceDarker] ];
set: #hoverModifier for: #PluggableButtonMorph to: [ [:c
| c adjustBrightness: -0.1] ];
set: #feedbackModifier for: #PluggableButtonMorph to: [
[:c | c adjustBrightness: -0.1] ].
set: #hoverModifier for: #PluggableButtonMorph to: [ [:c
| c adjustBrightness: 0.2] ];
set: #feedbackModifier for: #PluggableButtonMorph to: [
[:c | c adjustBrightness: 0.3] ]. "And the plus-version."
aUserInterfaceTheme set: #disabledTextColor for:
#PluggableButtonMorphPlus to: Color gray!
aUserInterfaceTheme set: #disabledTextColor for:
#PluggableButtonMorphPlus to: Color lightGray!
Item was changed: ----- Method: CommunityTheme class>>addDarkMenusAndDockingBars: (in category 'instance creation') ----- addDarkMenusAndDockingBars: aUserInterfaceTheme "self createDark apply." aUserInterfaceTheme set: #borderWidth for: #MenuMorph to: 0; set: #color for: #MenuMorph to: Color darkGray twiceDarker;
set: #titleTextColor for: #MenuMorph to: self dbText;
set: #titleTextColor for: #MenuMorph to: Color white; set: #lineColor for: #MenuMorph to: Color darkGray; set: #lineStyle for: #MenuMorph to: BorderStyle simple; set: #lineWidth for: #MenuMorph to: 1. aUserInterfaceTheme
set: #textColor for: #MenuItemMorph to: self dbText;
set: #textColor for: #MenuItemMorph to: self dbForeground; set: #selectionColor for: #MenuItemMorph to: self
dbSelection; set: #selectionTextColor for: #MenuItemMorph to: Color white ;
set: #disabledTextColor for: #MenuItemMorph to: self
dbText muchDarker.
set: #disabledTextColor for: #MenuItemMorph to: self
dbForeground muchDarker. "set: #subMenuMarker for: #MenuItemMorph to: nil." "Use hard-coded default. See MenuItemMorph." "The world main docking bar." aUserInterfaceTheme " set: #color for: #DockingBarMorph to: Color darkGray;" " set: #selectionColor for: #DockingBarItemMorph to: self darkContentSecondary;"
set: #logoColor for: #TheWorldMainDockingBar to: self
dbText;
set: #logoColor for: #TheWorldMainDockingBar to: Color
white; set: #selectionLogoColor for: #TheWorldMainDockingBar to: Color white!
Item was changed: ----- Method: CommunityTheme class>>addDarkScrollables: (in category 'instance creation') ----- addDarkScrollables: aUserInterfaceTheme "self createDark apply." "Scroll bars" aUserInterfaceTheme set: #thumbColor for: #ScrollBar to: self dbGray; set: #thumbBorderColor for: #ScrollBar to: self dbGray twiceDarker. "Scroll panes (includes generic stuff for list widgets, tree widgets, and text widgets." aUserInterfaceTheme set: #borderColor for: #ScrollPane to: (Color transparent) ; "So the search box isn't outlined." set: #color for: #ScrollPane to: self dbBackground. "List widgets" aUserInterfaceTheme
set: #textColor for: #PluggableListMorph to: self dbText;
set: #textColor for: #PluggableListMorph to: (Color gray:
0.9); set: #selectionColor for: #PluggableListMorph to: self dbSelection;
set: #selectionTextColor for: #PluggableListMorph to:
self dbText;
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.4); derive: #filterTextColor for: #PluggableListMorph from: #PluggableListMorph at: #textColor ; set: #preSelectionModifier for: #PluggableListMorph to: [ [:c | c twiceDarker ] ]; set: #hoverSelectionModifier for: #PluggableListMorph to: [ [:c | c twiceDarker alpha: 0.5 ] ]. "Tree widgets" aUserInterfaceTheme set: #highlightTextColor for: #SimpleHierarchicalListMorph to: self dbYellow lighter lighter; set: #lineColor for: #SimpleHierarchicalListMorph to: Color gray. "Text widgets" aUserInterfaceTheme
set: #textColor for: #PluggableTextMorph to: self dbText;
set: #textColor for: #PluggableTextMorph to: (Color gray:
0.9); set: #caretColor for: #PluggableTextMorph to: Color orange darker; set: #selectionColor for: #PluggableTextMorph to: (self dbSelection duller duller); 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; set: #frameAdornmentWidth for: #PluggableTextMorph to: 2. aUserInterfaceTheme
set: #balloonTextColor for: #PluggableTextMorphPlus to:
self dbText!
set: #balloonTextColor for: #PluggableTextMorphPlus to:
Color lightGray!
Item was changed: ----- Method: CommunityTheme class>>addDarkSyntaxHighlighting: (in category 'instance creation') ----- addDarkSyntaxHighlighting: aUserInterfaceTheme "self createDark apply." | normal bold italic underlined darkMap | normal := TextEmphasis normal. bold:=TextEmphasis bold. italic:=TextEmphasis italic. underlined := TextEmphasis underlined. darkMap := StrikeFont familyName: 'Darkmap DejaVu Sans' pointSize: 9. aUserInterfaceTheme set: #color for: #TextAction to: self dbBlue;
set: #default for: #SHTextStylerST80 to: {self dbText};
set: #default for: #SHTextStylerST80 to: {self
dbForeground}; set: #invalid for: #SHTextStylerST80 to: {self dbInvalid}; set: #excessCode for: #SHTextStylerST80 to: {self dbInvalid twiceDarker}; "Descriptive text for humans, italicized." set: #comment for: #SHTextStylerST80 to: {self dbComment. italic}; set: #unfinishedComment for: #SHTextStylerST80 to: {self dbComment darker. italic}; set: #'$' for: #SHTextStylerST80 to: {self dbConstant}; set: #character for: #SHTextStylerST80 to: {self dbConstant}; set: #integer for: #SHTextStylerST80 to: {self dbConstant}; set: #number for: #SHTextStylerST80 to: {self dbConstant};
set: #- for: #SHTextStylerST80 to: {self dbText. bold};
set: #= for: #SHTextStylerST80 to: {self dbText. bold};
set: #- for: #SHTextStylerST80 to: {self dbForeground.
bold};
set: #= for: #SHTextStylerST80 to: {self dbForeground.
bold}; set: #symbol for: #SHTextStylerST80 to: {self dbBedrock}; set: #stringSymbol for: #SHTextStylerST80 to: {self dbBedrock};
set: #literalArray for: #SHTextStylerST80 to: {self
dbText};
set: #literalArray for: #SHTextStylerST80 to: {self
dbForeground}; set: #string for: #SHTextStylerST80 to: {self dbConstant}; set: #unfinishedString for: #SHTextStylerST80 to: {self dbConstant darker}; set: #assignment for: #SHTextStylerST80 to: {nil. bold}; set: #ansiAssignment for: #SHTextStylerST80 to: {nil. bold}; set: #literal for: #SHTextStylerST80 to: {nil. bold}; set: #keyword for: #SHTextStylerST80 to: {self dbMessage};
set: #binary for: #SHTextStylerST80 to: {self dbText.
bold};
set: #binary for: #SHTextStylerST80 to: {self
dbForeground. bold}; set: #unary for: #SHTextStylerST80 to: {self dbMessage}; set: #incompleteKeyword for: #SHTextStylerST80 to: {self dbMessage darker. {underlined. bold}}; set: #incompleteBinary for: #SHTextStylerST80 to: {self dbMessage darker. underlined}; set: #incompleteUnary for: #SHTextStylerST80 to: {self dbMessage darker. underlined}; set: #undefinedKeyword for: #SHTextStylerST80 to: {self dbInvalid}; set: #undefinedBinary for: #SHTextStylerST80 to: {self dbInvalid}; set: #undefinedUnary for: #SHTextStylerST80 to: {self dbInvalid}; "Delineate the selector (good for new users), and make the method look like a mini-document with a title." set: #patternKeyword for: #SHTextStylerST80 to: {self dbMessage lighter. {bold. underlined}}; set: #patternBinary for: #SHTextStylerST80 to: {nil. bold}; set: #patternUnary for: #SHTextStylerST80 to: {self dbMessage lighter. {bold. underlined}}; set: #self for: #SHTextStylerST80 to: {self dbBedrock. bold}; set: #super for: #SHTextStylerST80 to: {self dbBedrock. bold}; set: #true for: #SHTextStylerST80 to: {self dbBedrock. bold}; set: #false for: #SHTextStylerST80 to: {self dbBedrock. bold}; set: #nil for: #SHTextStylerST80 to: {self dbBedrock. bold}; set: #thisContext for: #SHTextStylerST80 to: {self dbBedrock. bold};
set: #return for: #SHTextStylerST80 to: {self dbText.
bold};
set: #return for: #SHTextStylerST80 to: {self
dbForeground. bold}; set: #patternArg for: #SHTextStylerST80 to: {self dbSelection twiceLighter. TextEmphasis normal. "darkMap"}; set: #methodArg for: #SHTextStylerST80 to: {self dbSelection twiceLighter. TextEmphasis normal. "darkMap"}; set: #blockPatternArg for: #SHTextStylerST80 to: {self dbSelection twiceLighter}; set: #blockArg for: #SHTextStylerST80 to: {self dbSelection twiceLighter}; set: #argument for: #SHTextStylerST80 to: {self dbSelection twiceLighter}; set: #blockArgColon for: #SHTextStylerST80 to: {self dbBedrock}; set: #leftParenthesis for: #SHTextStylerST80 to: {self dbBedrock muchLighter}; set: #rightParenthesis for: #SHTextStylerST80 to: {self dbBedrock muchLighter}; set: #leftParenthesis1 for: #SHTextStylerST80 to: {self dbBedrock twiceLighter}; set: #rightParenthesis1 for: #SHTextStylerST80 to: {self dbBedrock twiceLighter}; set: #leftParenthesis2 for: #SHTextStylerST80 to: {self dbBedrock}; set: #rightParenthesis2 for: #SHTextStylerST80 to: {self dbBedrock}; set: #leftParenthesis3 for: #SHTextStylerST80 to: {self dbPurple muchLighter}; set: #rightParenthesis3 for: #SHTextStylerST80 to: {self dbPurple muchLighter}; set: #leftParenthesis4 for: #SHTextStylerST80 to: {self dbPurple muchLighter}; set: #rightParenthesis4 for: #SHTextStylerST80 to: {self dbPurple muchLighter}; set: #leftParenthesis5 for: #SHTextStylerST80 to: {self dbOrange muchLighter}; set: #rightParenthesis5 for: #SHTextStylerST80 to: {self dbOrange muchLighter}; set: #leftParenthesis6 for: #SHTextStylerST80 to: {self dbOrange muchLighter}; set: #rightParenthesis6 for: #SHTextStylerST80 to: {self dbOrange muchLighter}; set: #leftParenthesis7 for: #SHTextStylerST80 to: {Color yellow}; set: #rightParenthesis7 for: #SHTextStylerST80 to: {Color yellow}; set: #blockStart for: #SHTextStylerST80 to: {self dbBedrock muchLighter}; set: #blockEnd for: #SHTextStylerST80 to: {self dbBedrock muchLighter}; set: #blockStart1 for: #SHTextStylerST80 to: {self dbBedrock twiceLighter}; set: #blockEnd1 for: #SHTextStylerST80 to: {self dbBedrock twiceLighter}; set: #blockStart2 for: #SHTextStylerST80 to: {self dbBedrock}; set: #blockEnd2 for: #SHTextStylerST80 to: {self dbBedrock}; set: #blockStart3 for: #SHTextStylerST80 to: {self dbPurple muchLighter}; set: #blockEnd3 for: #SHTextStylerST80 to: {self dbPurple muchLighter}; set: #blockStart4 for: #SHTextStylerST80 to: {self dbPurple muchLighter}; set: #blockEnd4 for: #SHTextStylerST80 to: {self dbPurple muchLighter}; set: #blockStart5 for: #SHTextStylerST80 to: {self dbOrange muchLighter}; set: #blockEnd5 for: #SHTextStylerST80 to: {self dbOrange muchLighter}; set: #blockStart6 for: #SHTextStylerST80 to: {self dbOrange muchLighter}; set: #blockEnd6 for: #SHTextStylerST80 to: {self dbOrange muchLighter}; set: #blockStart7 for: #SHTextStylerST80 to: {Color yellow}; set: #blockEnd7 for: #SHTextStylerST80 to: {Color yellow};
set: #arrayStart for: #SHTextStylerST80 to: {self
dbBedrock}; set: #arrayEnd for: #SHTextStylerST80 to: {self dbBedrock};
set: #arrayStart1 for: #SHTextStylerST80 to: {self
dbText};
set: #arrayEnd1 for: #SHTextStylerST80 to: {self dbText};
set: #byteArrayStart for: #SHTextStylerST80 to: {self
dbText};
set: #byteArrayEnd for: #SHTextStylerST80 to: {self
dbText};
set: #byteArrayStart1 for: #SHTextStylerST80 to: {self
dbText};
set: #byteArrayEnd1 for: #SHTextStylerST80 to: {self
dbText};
set: #leftBrace for: #SHTextStylerST80 to: {self dbText};
set: #rightBrace for: #SHTextStylerST80 to: {self
dbText};
set: #cascadeSeparator for: #SHTextStylerST80 to: {self
dbText};
set: #statementSeparator for: #SHTextStylerST80 to: {self
dbText};
set: #externalCallType for: #SHTextStylerST80 to: {self
dbText};
set: #externalCallTypePointerIndicator for:
#SHTextStylerST80 to: {self dbText};
set: #primitiveOrExternalCallStart for: #SHTextStylerST80
to: {self dbText};
set: #primitiveOrExternalCallEnd for: #SHTextStylerST80
to: {self dbText};
set: #arrayStart1 for: #SHTextStylerST80 to: {self
dbForeground};
set: #arrayEnd1 for: #SHTextStylerST80 to: {self
dbForeground};
set: #byteArrayStart for: #SHTextStylerST80 to: {self
dbForeground};
set: #byteArrayEnd for: #SHTextStylerST80 to: {self
dbForeground};
set: #byteArrayStart1 for: #SHTextStylerST80 to: {self
dbForeground};
set: #byteArrayEnd1 for: #SHTextStylerST80 to: {self
dbForeground};
set: #leftBrace for: #SHTextStylerST80 to: {self
dbForeground};
set: #rightBrace for: #SHTextStylerST80 to: {self
dbForeground};
set: #cascadeSeparator for: #SHTextStylerST80 to: {self
dbForeground};
set: #statementSeparator for: #SHTextStylerST80 to: {self
dbForeground};
set: #externalCallType for: #SHTextStylerST80 to: {self
dbForeground};
set: #externalCallTypePointerIndicator for:
#SHTextStylerST80 to: {self dbForeground};
set: #primitiveOrExternalCallStart for: #SHTextStylerST80
to: {self dbForeground};
set: #primitiveOrExternalCallEnd for: #SHTextStylerST80
to: {self dbForeground}; set: #methodTempBar for: #SHTextStylerST80 to: {self dbBedrock}; set: #blockTempBar for: #SHTextStylerST80 to: {self dbBedrock}; set: #blockArgsBar for: #SHTextStylerST80 to: {self dbBedrock}; set: #primitive for: #SHTextStylerST80 to: {self dbGreen lighter. bold}; set: #pragmaKeyword for: #SHTextStylerST80 to: {self dbGreen. bold}; set: #pragmaUnary for: #SHTextStylerST80 to: {self dbGreen. bold}; set: #pragmaBinary for: #SHTextStylerST80 to: {self dbGreen. bold};
set: #externalFunctionCallingConvention for:
#SHTextStylerST80 to: {self dbGreen. bold}; set: #module for: #SHTextStylerST80 to: {self dbGreen. bold}; set: #blockTempVar for: #SHTextStylerST80 to: {self dbLocal. italic}; set: #blockPatternTempVar for: #SHTextStylerST80 to: {self dbLocal. italic}; set: #instVar for: #SHTextStylerST80 to: {self dbYellow. normal }; set: #workspaceVar for: #SHTextStylerST80 to: {self dbLocal. italic}; set: #undefinedIdentifier for: #SHTextStylerST80 to: {self dbInvalid}; set: #incompleteIdentifier for: #SHTextStylerST80 to: {self dbGray. underlined}; set: #tempVar for: #SHTextStylerST80 to: {self dbLocal. italic}; set: #patternTempVar for: #SHTextStylerST80 to: {self dbLocal. italic}; set: #poolConstant for: #SHTextStylerST80 to: {self dbConstant }; set: #classVar for: #SHTextStylerST80 to: {self dbReference}; set: #globalVar for: #SHTextStylerST80 to: {self dbClass. normal}. "And the text differ" aUserInterfaceTheme set: #insertTextAttributes for: #TextDiffBuilder to: { TextColor color: self dbRed }; set: #removeTextAttributes for: #TextDiffBuilder to: { TextEmphasis struckOut. TextColor color: self dbBlue }; set: #normalTextAttributes for: #TextDiffBuilder to: { TextEmphasis normal }.!
Item was changed: ----- Method: CommunityTheme class>>addDarkWindowColors: (in category 'instance creation') ----- addDarkWindowColors: aUserInterfaceTheme "self createDark apply." aUserInterfaceTheme set: #uniformWindowColor for: #Model to: Color darkGray;
set: #unfocusedWindowColorModifier for: #SystemWindow to:
[ [:color | color darker] ];
set: #unfocusedLabelColor for: #SystemWindow to: self
dbText darker;
set: #focusedLabelColor for: #SystemWindow to: self
dbText;
set: #unfocusedLabelColor for: #SystemWindow to: Color
veryLightGray;
set: #focusedLabelColor for: #SystemWindow to: Color
white;
set: #customWindowColor for: #Browser to: self dbBlue; set: #customWindowColor for: #ChangeList to: self dbBlue; set: #customWindowColor for: #ChangeSorter to: self
dbBlue; set: #customWindowColor for: #ChatNotes to: self dbPurple twiceDarker; set: #customWindowColor for: #ClassCommentVersionsBrowser to: self dbPurple twiceDarker; set: #customWindowColor for: #Debugger to: self dbRed; set: #customWindowColor for: #DualChangeSorter to: self dbOrange twiceDarker; set: #customWindowColor for: #FileContentsBrowser to: self dbGray; set: #customWindowColor for: #FileList to: self dbGray; set: #customWindowColor for: #Inspector to: self dbYellow duller; set: #customWindowColor for: #InstanceBrowser to: self dbYellow duller; set: #customWindowColor for: #Lexicon to: self dbGreen; set: #customWindowColor for: #MCTool to: self dbOrange twiceDarker; set: #customWindowColor for: #MessageNames to: self dbGreen; set: #customWindowColor for: #MessageSet to: self dbGreen; set: #customWindowColor for: #ObjectExplorer to: self dbYellow duller; set: #customWindowColor for: #PackagePaneBrowser to: self dbBlue; set: #customWindowColor for: #PluggableFileList to: self dbGray; set: #customWindowColor for: #PreferenceBrowser to: self dbBlue; set: #customWindowColor for: #ProcesBrowser to: self dbAqua; set: #customWindowColor for: #SMLoader to: self dbOrange twiceDarker; set: #customWindowColor for: #SMLoaderPlus to: self dbOrange twiceDarker; set: #customWindowColor for: #SMReleaseBrowser to: self dbOrange twiceDarker; set: #customWindowColor for: #ScriptingDomain to: self dbYellow duller; set: #customWindowColor for: #SelectorBrowser to: self dbBlue; set: #customWindowColor for: #StringHolder to: self dbGray; set: #customWindowColor for: #TestRunner to: self dbPink darker; set: #customWindowColor for: #TranscriptStream to: self dbGray; set: #customWindowColor for: #VersionsBrowser to: self dbPurple twiceDarker; set: #customWindowColor for: #Workspace to: self dbPink darker.!
Item was changed: ----- Method: CommunityTheme class>>dbBedrock (in category 'colors by purpose') ----- dbBedrock "Basic syntactical matter which users cannot change."
^ self dbText!
^ self dbForeground!
Item was added:
- ----- Method: CommunityTheme class>>dbText (in category 'colors by
purpose') -----
- dbText
"Not too bright."
^Color r: 0.764 g: 0.776 b: 0.768!