lowlighter/matcha

Demo site: color scheme-based styles are not applied by default

Closed this issue · 3 comments

tetradice commented

When you view the matcha.css demo site in Google Chrome or Firefox on Windows, color scheme-based styles are not applied by default.

As a result, the screen looks bland, unlike the screen capture on GitHub.

image

If I press the button in the top right of the screen once, the color scheme-based styles are applied,

image

I don't know if this is intentional, but I thought it might be unintentional, so I reported it.

I apologize if this is an intentional specification.

Environment

OS: Windows 11
Browser: Google Chrome 125.0.6422.144 (x64) / FireFox 125.0.1 (x64)

*I have never changed the color scheme settings in my browser or OS settings. I have not specified either the light or dark theme.

andremantaswow commented

Same here, i noticed this locally while trying the styles. It basically means I can't see any inputs if they dont have placeholders

image

After clicking on the input:
image

Code

<!DOCTYPE html>
<html>

<head>
    <title>Data Fetcher</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css">
</head>

<body>
    <h1>Data Fetcher</h1>
    <form>
        <label for="token">Token:
            <input type="text" id="token" name="token" required>
        </label>

        <label for="name">Name:
            <input type="text" id="name" name="name" required>
        </label>
        <button type="submit">Fetch Data</button>
    </form>

    <div id="resultContainer">
    </div>
</body>

</html>

Edit: v1 works fine

cc @lowlighter

  • 👍1
hasinhayder commented

A quick solution is to add data-color-scheme="light" or data-color-scheme="dark" to the element, or the parent div

like <body data-color-scheme="light" or <div data-color-scheme="light"

matcha team should fix it

  • 👍1
lowlighter commented

Hi !
This should be fixed now, didn't catch it because it seemed to only affect light mode system users
Let me know if you still have issues ! Thanks for reporting this issue !

  • 👍1