[Bug]: Datepicker does not use SCSS variables

[MacGyer]

Before submitting...

• [X] I have searched for duplicate or closed issues.
• [X] I have read the CONTRIBUTING document and my issue is following the guidelines.
• [X] I have read the template completely before filling it in.

Context

The datepicker component does not use the SCSS variables defined for it.

Current Behavior

$datepicker-date-bg (and others) are defined in variables.scss, but are never used in the SCSS for the datepicker component.

Example:

.datepicker-date-display {
  flex: 1 auto;
  background-color: $secondary-color;
  color: #fff;
  padding: 20px 22px;
  font-weight: 500;
}

This uses `$secondary-color` instead of `$datepicker-date-bg`.

### Expected behavior

Use the variables designated for datepicker.

Please check the time picker too.

### Possible Solutions or Causes

_No response_

### Steps to reproduce

_No response_

### Your Environment

* Version used: 1.1.0
* Browser Name and version: current Firefox
* Operating System and version (desktop or mobile): Windows 10 Desktop

[gselderslaghs]

I'm sorry for replying this late on the mentioned issue. This was addressed by release v2.1.0 PR #481 Managing Datepicker (and other Materialize components) color schemes can be achieved by using the theming function, please refer to the docs Changing Theme Setting

Currently its possible to switch between light or dark theme

/* Light theme */
document.documentElement.setAttribute('theme', 'light');
localStorage.setItem('theme', 'light');

/* Dark theme */
document.documentElement.setAttribute('theme', 'dark');
localStorage.setItem('theme', 'dark');

Thematic color schemes can be extended to your needs by defining custom Material M3 variables. I hope this addresses your issue.