Change datepicker color on materialize CSS

I tried the solutions proposed in How to change default body color of materialize datetimepicker? but nothing of this works anymore, perhaps because of the update to 1.0.0 (that question is from 2018), maybe the class name is different now but I haven't found anything. This is my code snippet.

.picker__box{
    background-color: #CCC !important;
}

.picker__date-display, .picker__weekday-display{
    background-color: #CCC !important;
}

<!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      
    </head>



    <body>
        <div class="container">
            <div class="row">
                <h2>Generic form</h2>
            </div>

            <div class="row">
                <form action="" class="col s12">
                    <div class="card-panel">
                    <div class="row">
                        <div class="input-field col s6">
                            <input type="text" placeholder="Name" id="name">
                            <label for="name">Name</label>
                        </div>

                        <div class="input-field col s6">
                            <input type="text" name="last_name" id="last_name" placeholder="Last Name">
                            <label for="last_name">Last Name</label>
                        </div>
                    </div>

                    <div class="row">
                        <div class="input-field col s6">
                            <input type="email" name="Email" id="email" placeholder="Email" class="validate" required>
                            <label for="email">Email</label>
                        </div>
                    </div>

                    <div class="row">
                        <div class="input-field col s6">
                            <input type="text" class="datepicker" name="date" id="date">
                            <label for="date">Date</label>
                        </div>
                    </div>

                    <div class="right-align">
                        <button class="btn purple darken-3" type="submit">
                            <i class="material-icons left">send</i>
                            Submit
                        </button>
                    </div>
                </div>
                </form>
            </div>
        </div>
      <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

      <script>
        document.addEventListener('DOMContentLoaded', function () {
            M.AutoInit();
        });
      </script>
    </body>
  </html>

Solution

Building on the excellent and correct answer from @Jax-p, the reason why Sass may be more beneficial later down the line is because of the way Materialize is set up.

The theme has two main colours, and they are set in variables.scss on lines 37 & 41:

$primary-color: #3C3842 !default;
$secondary-color: #C59F6A !default;

Primary is the pink colour used for navbars, teal is the greeny colour used for buttons. You'll notice the teal colour cropping up in Materialize all the time - buttons, datepickers, inputs etc - this is because virtually every element takes it's colour from these two base colour variables. In this case, teal is the secondary colour. A little deeper into variables.scss we see the datepicker being set to the secondary (teal) colour:

$datepicker-date-bg: $secondary-color !default;

This is how the styles flow down to elements. So while you could overwrite the single datepicker instance using .datepicker-date-display, the teal colour will remain throughout the rest of the stylesheet, and this will ruin the consistency of the design.

If you decide you'd like the your theme colour to be silver, it will save you time to chnage one line off css in variables.scss, save, and then serve the resulting materialize.css sile as your default stylesheet:

$secondary-color: #CCC !default;

Just food for thought, and a +1 for Sass being awesome! :)