Any way to access overall DOM?

Mystara

Hi,

I’m writing a module that changes the background colour dynamically. As a consequence of this, I’d like the text to be as readable as possible.

The difficulty is that although I’ve found a way to dynamically determine the optimal text colour for the current background colour, I have no way to push other modules to use it. Ideally I’d like to modify the --color-text variable dynamically. But I can’t see any way to do this.

Am I overlooking a simple answer?

sdetweil

@Mystara the dom is document in js

i don’t think the variables are exposed in the dom, they are used to calculate on load as i understand it.

you can see the text rep of the dom in the developers window elements tab

sdetweil

@Mystara maybe

get computed style

see

https://stackoverflow.com/questions/41725725/access-css-variable-from-javascript

MMRIZE

@Mystara
Not tested, only with my brain, so just idea.

Get all the DOMs which has textContent.

const els = document.querySelectorAll('*')
for (let i = 0; i < els.length; i++) {
  const el = els[i]
  const children = el.childNodes
  let hasText = false
  for (let j = children.length; j--) {
    if (children[j].nodeType === 3 && children[j].nodeValue.trim().length) {
      hasText = true
      break
    }
  }
  if (hasText) {
    //This element has text content
  }
}

If it and its ancestors don’t have a background, apply your solution.

// assume that already know target element
let withoutBackground = true
let node = targetElement
while (node.parentElement) { // until document
  const styles = window.getComputedStyle(node)
  if (styles.backgroundColor === 'transparent' || ... ) { // Maybe backgroundImage should be checked too.
    // node has no background, so check the parent
    node = node.parentElement
  } else {
    withoutBackground = false
    break
  }
}
if (withoutBackground)  {
  // the target element has no its own background. So you can apply your solution.
}

To improve : a caching strategy for a once checked node to skip would be better.)

However, I’m not too fond of this approach,

getComputedStyle is very expensive
Rather, it would be better to propose a theme style guide as MagicMirror’s default coding rules.