Pleco Solarized Color Scheme (Easier on the Eyes)

Changing color settings in Pleco:

  • I'll just keep using the defaults

    Votes: 0 0.0%
  • Solarized is a good idea, I'm gonna try it

    Votes: 7 100.0%
  • There are better options than either of the two (please share)

    Votes: 0 0.0%

  • Total voters
    7
#1
I've been using a custom color theme with Pleco and thought I'd share it. Whether it looks better or not is a matter of opinion of course (and the original colors are not bad at all), but it's easier on the eyes through the reduction of brightness-based contrast; in exchange, sufficient contrast is achieved with hues. I also wanted more color uniformity across the interface so that all the attention can be brought to the tone-colored characters, which now stand out as the most vibrant elements on the screen.

I know a picture is worth a thousand words, so here is what it looks like after the change, in standard and night modes respectively (click to enlarge):

Pleco Solarized Standard.png Pleco Solarized Night.png

Now, this color palette is known as Solarized, and the original author is Ethan Schoonover. Here, I'm just reapplying what was developed by him. Many more details, along with presets for other applications, are available at his website: http://ethanschoonover.com/solarized. Here's a quick summary of the colors:

Solarized Palette.png


And their hex values in the format accepted by Pleco are:
Code:
-- Fg --     -- Bg --
B01 #586e75  B03 #002b36 (Night)
B00 #657b83  B02 #073642
B0  #839496  B2  #eee8d5  (Std)
B1  #93a1a1  B3  #fdf6e3

-- Accents --
AB #268bd2  AY #b58900  AG #859900  AM #d33682
AV #6c71c4  AO #cb4b16  AC #2aa198  AR #dc322f
Here's how I use these colors with Pleco (substitute the values above):
Code:
        Std  Night
Bar Bg  B2   B02
Bar Fg  B01  B1
Fg      B00  B0
Hilite  B01  B1
Label   B1   B01
Bg      B3   B03
Tone5   B01  B1

Tone1  Tone2  Tone3  Tone4
AB/AV  AY/AO  AG/AC  AM/AR
Side note: Another advantage of this palette is that the color theme can be easily inverted by just changing Bn to B0n, and vice versa (inserting or removing the zero in the middle), while the accent colors need no adjustment at all as they were selected to look equally good on both light or dark background.

As for the tone colors, I've been using this mnemonic for years:
  1. High as the sky.
  2. Rising, which needs energy.
  3. Low like the grass.
  4. Falling, which might be dangerous.
It probably sounds stupid to you but for me, it worked. :)

I adopted the Solarized accent colors to the above story. As you can see there are two color choices for each tone. My preferred ones are listed as the first option, followed by an alternative. The tone colors can stay the same in both Standard and Night modes, which should reinforce memorization.

Alternative Tone 3: After some experimentation, I took to using the color #589d4c for the third tone, as the Solarized yellow (AY) and green (AG) accent colors seem somewhat close. That color, seen in the photo snapshots, is more distinct from the yellow than the Solarized green but at the cost of slightly reduced contrast, and is an average between AG and AC (cyan), which can be calculated using an online tool. This color is not a part of the Solarized palette.

All the color values and the information where to use them can also be downloaded as a text file attachment below. Enjoy!

Considerations:
  • Menu background is hard-coded as grey (in standard mode) or black (in night mode). Annoyance level: 3/10.
  • Selected item text color will always remain white. Annoyance level: 1/10.
  • Other interface elements such as the side bars have their own color scheme but it will generally always look well despite the lack of customization. Annoyance level: none.
 

Attachments

#2
Great idea! My rationale was to set the brightness-based contrast as high as possible (white on black, or green on black) which allows me to dim the screen down further, thereby saving battery life. The solarized color scheme has a very inviting, delicate look. I guess it boils down to battery life vs. looks. For me personally, battery life still wins.
 
#4
I meant low power consumption was most important to me, and with the screen dimmed down, high-contrast text is also easy on the eyes. Tastes differ, of course. Just wanted to give you some feedback.
 

mikelove

皇帝
Staff member
#5
@Captain Planet - neat. Was familiar with Solarized but hadn't seen it deployed in practice in a Pleco installation before (our new support for hex color input is already paying dividends) - actually I like it enough that I'm wondering whether we ought to add something based on Solarized as a theme option on Android (where UI colors aren't [yet] fully customizable).

Is there anything you'd change about our color themeing system? For example two color settings that are currently covered by the same option but that ought to be separately configurable?
 
Last edited:
#6
@Captain PlanetIs there anything you'd change about our color thumbing system? For example two color settings that are currently covered by the same option but that ought to be separately configurable?
There you go: :)

1-3. Allow changes to hard-coded menu colors: (1) menu background, (2) menu text, (3) bullet and separator color:
Pleco Hardcoded Menu Colors.jpg

4. Don't ask the user to (re-)type the redundant pound sign:
Pleco Hex Color Pound Sign.jpg

5. Improve the hex input method:
Pleco Hex Keyboard.jpg

Typing hex numbers on the stock keyboard is really inconvenient as one has to switch between letters and numbers constantly. The best way would be to have a numpad that also shows A-F. It appears someone has already implemented this, and it's MIT-licensed so it can be reused: https://github.com/lnafziger/Numberpad

A simpler and acceptable solution would be to just show the number row but I don't think that's possible without a third-party keyboard.

6. Allow changes to tint item text color:
Pleco Tint Item Text Color.jpg

7. Allow import/export of color scheme settings. This way, people who want to try Solarized wouldn't need to go through all the settings by hand but could just automatically install it. This would really encourage more color schemes to appear, as now one has to be really motivated to set it up. :)

One good way to implement it I can think of is to have all the colors encoded as a string, which can then be imported by pasting from clipboard. Export can be done by copying to clipboard or by sending an e-mail with the string, just like you already send the registration number.

Let's say the format is:
Code:
{T1}{T1N}{T2}{T2N}{T3}{T3N}{T4}{T4N}{T5}{T5N}{Bg}{BgN}{Fg}{FgN}{Hlt}{HltN}{Lbl}{LblN}{BarBg}{BarBgN}{BarFg}{BarFgN}
The hex sequence for Solarized would then be:
Code:
268bd2268bd2b58900b58900589d4c589d4cd33682d33682586e7593a1a1fdf6e3002b36657b83839496586e7593a1a193a1a1586e75eee8d5073642586e75839496
Convert it to Base 58 or 62 to make it shorter:
Base 58 said:
F0k4C96aPFplbdtuIkgW8sljAI8Utjk6MmuYe3DVI3hnq5oC05rbjvPiBveWftWhphOAcTtUfABO8dKp5Wf0bEnICk
Base 62 said:
2Sa3W8i46EE0puXZYAhESiO29cXB8ztcGgIjp14oTfIcUi2Cqbg9wBuBRYmayKyF5oGPU41g95XxqAHBTRtJedBHa
Here, implementation details may vary; for the proof-of-concept I'm just using this online tool:
http://convertxy.com/numberbases/

Let's say we go with Base 62. Prepend and append some magic string, and we're done:
Pleco Color Scheme said:
PlecoColorScheme2Sa3W8i46EE0puXZYAhESiO29cXB8ztcGgIjp14oTfIcUi2Cqbg9wBuBRYmayKyF5oGPU41g95XxqAHBTRtJedBHa+
Perhaps it's also a good idea to add a name:
Pleco Color Scheme said:
PlecoColorScheme:Solarized+2Sa3W8i46EE0puXZYAhESiO29cXB8ztcGgIjp14oTfIcUi2Cqbg9wBuBRYmayKyF5oGPU41g95XxqAHBTRtJedBHa+
Alternatively (perhaps better yet) standard and night modes could be separate themes.

This is just a quick example, I'm sure there is a better way to do it.

***

None of this is particularly pressing and I understand you have other priorities. Pleco is already great anyway but I'm just providing the feedback since you asked. :)
 

mikelove

皇帝
Staff member
#7
Thanks! 7) is actually already implemented for 3.2.5 - allows import/export of all of your settings, actually, but also includes an option to just export color settings, and the file is easily editable XML so you can export a bunch of settings, remove any that you don't want to make part of the profile, then import (and only overwrite) the remaining settings.
 
#8
Recently, I stumbled upon this thread and have tried to implement Ethan Schoonover's "Solarized" as described by @Captain Planet. However, I'm unable to match the exact same hues of some of the colours.

I actually love what I've ended up with, but I'm wondering why I can't match some of the hues and how much of a difference this makes. The hues I can't match are:

Background and content tones.

$base03: #002b36 goes to #002a36,
$base02: #073642 goes to #073542,
$base00: #657b83 goes to #657a83,

Accent tones.

$orange: #cb4b16 goes to #cb4a16,
$red: #dc322f goes to # dc312f,
$magenta: #d33682 goes to #d33681,
$blue: #268bd2 goes to #268ad2,
$cyan: #859900 goes to 29a197.

I'm running Pleco on an iPhone 7.

Is that the answer to my first question? That the iPhone 7's palette is just too granular to match these hues exactly and there is nothing I can do.

And if so, could anyone tell me how "off" are these colours, and how much of a difference it makes to Ethan Schoonover's Solarized. I know he put a lot of thought into it and chose the hues very carefully. It would be nice to implement his scheme exactly as he designed it.

Thanks.
 
#9
Hello Ink,

it looks like you almost got the intended color scheme. From what I can see, the configured color codes are off by a single step only. (Hex numbers are like decimal numbers, but instead of going from 0-9, they go from 0-9, continued by A=10, B=11, C=12, and so on, up to F. So FF is 255.) But did you try tapping on the upper left color indicator that shows the color codes? If you do that, you will get the following hidden dialog, and you can enter the colors very precisely:

plc color.png

(on iOS 12.1.1)


Hope this helps, cheers,

Shun
 
#10
Hello Shun,

Thanks for your reply. Actually I used the method that you recommended to enter the codes. I tapped on the coloured square in the top left hand corner and entered the hex code in the dialogue box. For many of the colours that was fine, but for a few the hex number changed after I pressed the ok button. I tried several times but always got the same result (which I detailed in my previous post). Do you have any idea why? I am running IOS 12.1 on an iPhone 7.

Thanks.
 
#11
Hi Ink,

you’re welcome! Did you try entering a hex code one higher or one lower? That may trick Pleco into using the right value. (perhaps due to a different internal representation of the hex codes)

Cheers,

Shun
 
#12
Hello Shun,

Brilliant. I tried what you suggested and it worked. A few of my mismatches are now just one or two off on the last digit - which I guess makes little difference to the colour - and some of my mismatches are now spot on. Perhaps if I tweak a bit more I can get them all nailed. Thanks ever so much for your time and advice.

Ink.
 
#13
Hi Ink,

great! Just remember that the color code consists of three separate values: Red, Green, and Blue. So you could also try tweaking the three two-character pairs separately.

No problem, best,

Shun
 
#14
Hello Shun,

Thanks again. I hadn't realised that the hex code was made up of three two-character pairs representing the mix of red, green and blue in a colour. That's useful to know. I'll have another crack at tweaking the colours in the morning.

Best wishes,
Ink.
 
Top