[Mobile UI] Blue palette
Davide DB
dbdavide at gmail.com
Thu Jun 22 04:49:00 PDT 2017
On 21 June 2017 at 22:13, Dirk Hohndel <dirk at hohndel.org> wrote:
>
> Right now I use
>
> property color darkPrimaryColor: "#303F9f"
> property color darkPrimaryTextColor: "#ECECEC"
> property color primaryColor: "#3F51B5"
> property color primaryTextColor: "#ECECEC"
> property color lightPrimaryColor: "#C5CAE9"
> property color lightPrimaryTextColor: "#212121"
>
Hummm something strange is going on. Sorry I have to use a html email.
Looking at your values I see you use darkPrimaryTextColor and
primaryTextColor set at the same value #ECECEC which in Photoshop is:
[image: Inline images 1]
Now, I don't now how your reference these colors in QML so I don't know if
somehow QML tries to use automatically them based on property names. If
this is the case we have a color meant to be lighter that actually is pitch
black. Moreover if a developer see through the code a color referenced by
its property name would be misleaded.
Another strange thing I found respect to your definition above: I grabbed a
screenshot of the main UI and I used Photoshop color picker to list the
colors used. I cannot find the color codes defined above except for
darkPrimaryColor: "#303F9f" correctly found in the title bar. So far I
always matched color successfully between screenshots and Photoshop but
there could be some error.
BTW I get:
Whole dive item text: #4D4D4D
Trip bar background: #D0D4ED
Selected dive background while tapping: #D0D4ED
Selected dive background: #5965B2
Selected dive text: #CFD1E0
While these colors or other colors could perfectly ok (except for the
selected dive text) would be nice understand where they come from :-)
Regarding the original question on text colors.
My original palette was:
/* Palette generated by Material Palette -
materialpalette.com/indigo/deep-orange */
.dark-primary-color { background: #303F9F; }
.default-primary-color { background: #3F51B5; }
.light-primary-color { background: #C5CAE9; }
.text-primary-color { color: #FFFFFF; }
.accent-color { background: #FF5722; }
.primary-text-color { color: #212121; }
.secondary-text-color { color: #757575; }
.divider-color { border-color: #BDBDBD; }
[image: Inline images 2]
In our app we would have:
dive name in item list text (primary-text-color): #212121
dive data in item list text: (secondary-text-color) #757575
Trip bar background: (light-primary-color) #C5CAE9
Trip bar text: (primary-text-color): #212121
Selected dive background: (default-primary-color) ##3F51B5
Selected dive text: (text-primary-color) #FFFFFF
This is a fake app generated with the above scheme.
Two things:
- white text is not our enemy when used on proper dark background.
- secondary text is grey which gives more evidence to the title hence in my
scheme, dive data (date, depth...) in the item list are grey. Please just
try once :-)
[image: Inline images 3]
PS
Pink UI rocks!
--
Davide
https://vimeo.com/bocio/videos
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.subsurface-divelog.org/pipermail/subsurface/attachments/20170622/0668b800/attachment-0001.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: text-blue-palette.png
Type: image/png
Size: 5677 bytes
Desc: not available
URL: <http://lists.subsurface-divelog.org/pipermail/subsurface/attachments/20170622/0668b800/attachment-0003.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: blue-palette-preview.PNG
Type: image/png
Size: 20198 bytes
Desc: not available
URL: <http://lists.subsurface-divelog.org/pipermail/subsurface/attachments/20170622/0668b800/attachment-0004.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: palette.png
Type: image/png
Size: 3779537 bytes
Desc: not available
URL: <http://lists.subsurface-divelog.org/pipermail/subsurface/attachments/20170622/0668b800/attachment-0005.png>
More information about the subsurface
mailing list