Clipboard content's does not work well with dark theme

[thomassross]

Black on black is very difficult to read.

[bayleedev]

]: how disappointing

I'm curious about the best way to approach this. Right now the plugins have 100% control of that part of zazu, including the background color. We could pass in a "dark" or "light" flag maybe.

[cecoates]

It has a really neat built-in way of dealing with colors when you copy a hex color code to the clipboard. Can that be adapted? I wasn't knowledgeable enough to adapt it, but it's in:

.zazu/plugins/tinytacoteam/zazu-clipboard/src/lib/present.js

and the color formula thing is:

.zazu/plugins/tinytacoteam/zazu-clipboard/node_modules/color/index.js

I did fool around like a monkey at a typewriter trying to haphazardly figure out how it worked, but I'm not that technical.

[bayleedev]

@cecoates what would the behavior be? We'd need some way of detecting the parent background color, right? Basically zazu would need to pass that in somehow.

I see two options:

1. Apply the style's css inside of the iframe, and the plugin can overwrite the styles if they want, similar to how the color does it.

2. Detect the exact color of the iframe background, we'd have to traverse up the dom tree until we find the correct element, then pass that in to the plugin somehow via classes or something.

[cecoates]

I may have kind sorta broken the plugin on my install, and I can't update it without crashing it again. :-)

So I can't take a video of exactly what it was doing before I broke it, but this:

const ago = require('s-ago')
const Color = require('color')
const { htmlEncode } = require('js-htmlencode')

module.exports = (allClips) => {
return allClips.map((clip) => {
if (clip.type === 'text') {
const isHexColor = clip.raw.match(/^#([0-9a-f]{3}){1,2}$/i)
const response = {
title: clip.raw,
value: clip._id,
preview: <pre class='text'>${htmlEncode(clip.raw)}</pre> <div class='meta'>${ago(new Date(clip.createdAt))}<br />${clip.raw.length} characters</div>
}
if (isHexColor) {
const color = new Color(clip.raw)
const colorType = color.dark() ? 'dark' : 'light'
response.preview = <pre class='text color ${colorType}' style='background-color: ${clip.raw};'>${clip.raw}</pre> <div class='meta ${colorType}'> ${ago(new Date(clip.createdAt))}<br />${clip.raw.length} characters </div>
}
return response
} else if(clip.type === 'image') {
return {
title: clip.title,
value: clip._id,
preview: <img src='${clip.raw}' /> <div class='meta'>${ago(new Date(clip.createdAt))}</div>,
}
}
})
}

Seemed to detect if the clipboard contents was a hex color code. If it was, it used the formula in index.js:

dark: function () {
	// YIQ equation from http://24ways.org/2010/calculating-color-contrast
	var rgb = this.values.rgb;
	var yiq = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
	return yiq < 128;
},

light: function () {
	return !this.dark();
},

To automatically adjust the background and font colors. Like if I copied yellow, it would make the background yellow, but the text black. Really cool!

[cecoates]

Got it! It only works if the color code uses capital letters.

http://cld.wthms.co/CNZ1

And here's the log:

zazu.log (copy).2017-01-09.txt

[bayleedev]

@cecoates isn't the issue not with showing colors, but showing normal text?

I'm probably confused about the issue.

[cecoates]

@blainesch I was curious if the same thing that makes the background color and text color change when it's a hex color code could also be applied to text in general when you use the dark theme.

Although now that I write that out, your suggestions make much more sense. Sorry!