0

I have no practice as a bootstrap user. I have a table. when i set dark mode in browser then the color of text is wrong (black on black background). What am I doing wrong?

(fg-color is only bad in table when class="table" added)

<!doctype html>

<html lang="pl">
    <head>
        <meta charset="utf-8">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

        <link rel="stylesheet" type="text/css" href="/static/admin/css/base.css">
        <link rel="stylesheet" type="text/css" href="/static/admin/css/nav_sidebar.css">
        <link rel="stylesheet" type="text/css" href="/static/admin/css/dashboard.css">

        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">

        <link rel="stylesheet" type="text/css" href="/static/admin/css/responsive.css">
    </head>

    <body>

        <table class="table table-responsive table-bordered">
            <thead>
                <tr>
                    <th class="text-center" scope="col">Name</th>
                    <th class="text-center" scope="col">Price</th>
                    <th class="text-center" scope="col">Qnt</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>product 1</td>  
                    <td class="text-end">12,48</td>
                    <td class="float-right"><input class="form-control float-right" type="number" min="1" max="999"></td>
                </tr>
                <tr>
                    <td>product 2</td>  
                    <td class="text-end">12,48</td>
                    <td class="float-right"><input class="form-control float-right" type="number" min="1" max="999"></td>
                </tr>
                <tr>
                    <td>product 3</td>  
                    <td class="text-end">12,48</td>
                    <td class="float-right"><input class="form-control float-right" type="number" min="1" max="999"></td>
                </tr>
            </tbody>
        </table>

    </body>
</html>

I tried using a div container and some classes but it doesn't change anything.

Andrzej Szumowski
  • 5
  • 3
  • By setting dark mode in browser, do you mean setting it using a custom theme/CSS switcher component (which changes themes between light and dark mode) or the dark mode color scheme option provided by browser? – Darshil Jani Jan 10 '23 at 09:03
  • 2nd. Dark mode color scheme option provided by browser. should i have my css that will change foreground color depending on the mode selected? If yes, how to do it? The rest of the elements except the passive text in the table adjust the color correctly. – Andrzej Szumowski Jan 10 '23 at 23:49
  • Yes, you need to change the foreground color depending on the selected mode. Check my answer below for details on how to do it. Also, can you explain what do you mean by passive text in the table? – Darshil Jani Jan 11 '23 at 05:46
  • 1
    thank you. Your solution works. Passive text - standard text in

    text

    , outside of active elements such as: input, button etc.     – Andrzej Szumowski Jan 13 '23 at 01:05

1 Answers1

0

For styling depending on browser based color mode/theme, you can use the prefers-color-scheme media query as it is used to detect whether the user has requested a light or dark theme based on operating system setting or user agent (browser in this case) settings.

You can set the color for the table using this query:

@media (prefers-color-scheme: dark) {
  your-selector {
    color: white;
  }
}

Reference - MDN

Darshil Jani
  • 800
  • 2
  • 13