feat: colors page

[agazso]

Adds a simple page which checks the CSS colors periodically and prints them in a code block, so that it can be copied in the CSS file.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
diete-design	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 6, 2024 10:17am

[agazso]

Have you considered using MutationObserver?

Yes, but it looks to me that using that for computed styles can be quite complicated: https://stackoverflow.com/questions/20364687/mutationobserver-and-current-computed-css-styles

Should this page be linked from the menu?

I planned to link to here from the build page (#230) but we can add it to the menu as well. @david-gauquelin wdyt?

[agazso]

I think you may be right. Feel free to merge.

Just for the sake of how this could look like (thanks ChatGPT):

   onMount(() => {
        if (browser) {
            const observer = new MutationObserver((mutations) => {
                mutations.forEach((mutation) => {
                    if (mutation.type === 'attributes' && mutation.attributeName && mutation.target === document.documentElement) {
                        getColors()
                    }
                })
            })

            observer.observe(document.documentElement, {
                attributes: true,
                attributeFilter: [
                    'style'
                ]
            })

            // Initialize colors on mount
            getColors()

            onDestroy(() => {
                observer.disconnect()
            })
        }
    })

Based on this I managed to write the code with MutationObserver