Dynamic Font Colors

MMRIZE

@ijoshea
It seems weird to import JS in css.

sdetweil

@MMRIZE AND it doesn’t work…

sdetweil

@ijoshea I added the scripts to MMM-ImagesPhotos (getScripts response)
and they are loaded… BUT the document on(‘load’) from the script above doesn’t fire…
I don’t know if that is because in my version of MMM-ImagesPhotos I set an onload for each image loaded so that I can adjust the size to keep the aspect ratio from the image
(css cover and contain both adjust the aspect ratio)

MMRIZE

@ijoshea
I had the same needs on building modules. (btw, GooglePhotos and CX3 were built by me :D )

Sometimes I suggested other module’s background for the readability. Sometimes, I made an auto-calculated contrast color(e.g. CX3)

My final conclusion is… waiting for new CSS feature contrast-color(). It will be introduced later this year in the most modern browsers.
https://drafts.csswg.org/css-color-5/#contrast-color

MMRIZE

@ijoshea
Anyway, It looks so interesting, So I tried something. I simply did monkey patching to get dominant color from MMM-GooglePhotos’s image on load.

You can do your job with this code without modifying the source codes itselfs.

/* config/config.js */
{
	module: "MMM-ModuleMonkeyPatch",
	config: {
		patches: [
			{
				module: "MMM-GooglePhotos",
				method: "ready",
				patch: async function (original, [ url, target ]) {
					const ret = original(url, target)
					let color = null
					const process = async () => {
						const { resolve, promise } = Promise.withResolvers()
						const img = new Image()
						img.crossOrigin = 'Anonymous'
						img.src = 'https://corsproxy.io/?' + url
						img.onload = () => {
							const colorThief = new ColorThief()
							const color = colorThief.getColor(img)
							resolve(color)
						}
						return promise
					}
					if (typeof ColorThief === 'undefined') {
						const loadScript = async (src) => {
							const { resolve, promise } = Promise.withResolvers()
							const script = document.createElement('script')
							script.src = src
							document.head.appendChild(script)
							script.onload = () => resolve()
							return promise
						}
						await loadScript('https://cdn.jsdelivr.net/npm/colorthief@2/dist/color-thief.min.js')
						color = await process()

					} else {
						color = await process()
					}

					console.log(color) // It will show [R, G, B] array
					// doYourJob(color)

					return ret
				},
			},
		],
	},
},

ijoshea

@MMRIZE @sdetweil thanks for the help. I havent had a chance to play around with it on my set up but looks to be going in the right direction!