MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Any way to access overall DOM?

    Scheduled Pinned Locked Moved Development
    4 Posts 3 Posters 145 Views 3 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M Offline
      Mystara
      last edited by

      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?

      S M 2 Replies Last reply Reply Quote 0
      • S Offline
        sdetweil @Mystara
        last edited by 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

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        S 1 Reply Last reply Reply Quote 0
        • S Offline
          sdetweil @sdetweil
          last edited by

          @Mystara maybe

          get computed style

          see

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

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • M Offline
            MMRIZE @Mystara
            last edited by MMRIZE

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

            1. 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
              }
            }
            
            1. 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,

            1. getComputedStyle is very expensive
            2. Rather, it would be better to propose a theme style guide as MagicMirror’s default coding rules.
            1 Reply Last reply Reply Quote 0
            • 1 / 1
            • First post
              Last post
            Enjoying MagicMirror? Please consider a donation!
            MagicMirror created by Michael Teeuw.
            Forum managed by Sam, technical setup by Karsten.
            This forum is using NodeBB as its core | Contributors
            Contact | Privacy Policy