[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