Styles aren't working

[stephanieraymos]

Describe the bug
The only two values in .dp__theme_dark that are working are:

--dp-background-color and
--dp-text-color

In addition; none of the scss styles are working to edit any of the styles such as font size.

To Reproduce
Steps to reproduce the behavior:
I have this date picker

    <Datepicker
      v-model="date"
      inline
      auto-apply
      text-input
      inline-with-input
      :enable-time-picker="false"
      required
      class="dp__theme_dark"
    ></Datepicker>

This is inside of my vue template.
I am using <script setup>
I am importing the following:

import { ref } from 'vue';
import Datepicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';

I also have my date ref set and the values are submitting correctly.

I have brought in the styles from the guide and attempted to edit them. Here is my style section:

<style lang="scss">
@import '@vuepic/vue-datepicker/src/VueDatePicker/style/main.scss';

.dp__theme_dark {
   --dp-background-color: #212121;
   --dp-text-color: #fff;
  --dp-hover-color: #484848;
  --dp-hover-text-color: #fff;
  --dp-hover-icon-color: #959595;
  --dp-primary-color: red;
  --dp-primary-disabled-color: #61a8ea;
  --dp-primary-text-color: #fff;
  --dp-secondary-color: #a9a9a9;
  --dp-border-color: #2d2d2d;
  --dp-menu-border-color: #2d2d2d;
  --dp-border-color-hover: #aaaeb7;
  --dp-disabled-color: #737373;
  --dp-disabled-color-text: #d0d0d0;
  --dp-scroll-bar-background: #212121;
  --dp-scroll-bar-color: #484848;
  --dp-success-color: #00701a;
  --dp-success-color-disabled: #428f59;
  --dp-icon-color: #959595;
  --dp-danger-color: #e53935;
  --dp-marker-color: #e53935;
  --dp-tooltip-color: #3e3e3e;
}

// General
$dp__font_family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans",
  "Helvetica Neue", sans-serif !default; // Font size for the menu
$dp__border_radius: 4px !default; // Border radius everywhere
$dp__cell_border_radius: $dp__border_radius !default; // Specific border radius for the calendar cell

// Transitions
$dp__transition_length: 22px !default; // Passed to the translateX in animation
$dp__transition_duration: 0.1s !default; // Transition duration

// Sizing
$dp__button_height: 35px !default; // size for buttons in overlays
$dp__month_year_row_height: 35px !default; // height of the month-year select row
$dp__month_year_row_button_size: 25px !default; // Specific height for the next/previous buttons
$dp__button_icon_height: 20px !default; // icon sizing in buttons
$dp__cell_size: 35px !default; // width and height of calendar cell
$dp__cell_padding: 5px !default; // padding in the cell
$dp__common_padding: 10px !default;
$dp__input_padding: 6px 12px !default; // padding in the input
$dp__input_icon_padding: 35px !default; // Padding on the left side of the input if icon is present
$dp__menu_min_width: 260px !default; // Adjust the min width of the menu
$dp__action_buttons_padding: 2px 5px !default; // Adjust padding for the action buttons in action row
$dp__row_margin: 5px 0 !default; // Adjust the spacing between rows in the calendar
$dp__calendar_header_cell_padding: 0.5rem !default; // Adjust padding in calendar header cells
$dp__two_calendars_spacing: 10px !default; // Space between two calendars if using two calendars
$dp__overlay_col_padding: 3px !default; // Padding in the overlay column
$dp__time_inc_dec_button_size: 32px !default; // Sizing for arrow buttons in the time picker

// Font sizes
$dp__font_size: 1rem !default; // overall font-size
$dp__preview_font_size: 0.8rem !default; // font size of the date preview in the action row
$dp__time_font_size: 2rem !default; // font size in the time picker
</style>

dp-background-color and dp-text-color are the only 2 responding to changes.
If I make changes to any other variable, the changes are not reflected.

Expected behavior
I expect to be able to edit these values to style the date picker.

Desktop & mobile (please complete the following information):

• Browser: Chrome
• Library version: "@vuepic/vue-datepicker": "^3.3.1"

[Jasenkoo]

To be able to use colors from dp__theme_dark you need to pass :dark="true".

Also, there is no need to explicitly pass class, just define it in the global style or scoped where you use the component.

You can check this working example using some dummy colors

[stephanieraymos]

Hi, I just wanted to note that this isn't noted in the docs here
This did fix the dark mode styles, however the scss styles are still not working at all. Thanks for the help.

[Jasenkoo]

Hi, I just wanted to note that this isn't noted in the docs here

It is added as stated, "To change variables, simply override the classes with your custom values."

however the scss styles are still not working at all

You need to define overrides and then import scss file, for example:

$dp__font_size: 0.5rem;
$dp__preview_font_size: 0.5rem;
$dp__time_font_size: 1rem;

@import '@vuepic/vue-datepicker/src/VueDatePicker/style/main.scss';

[stephanieraymos]

Hi, I meant that the :dark is not specified as needed to make the css variables work. I saw the css page, that is how I found the styles to add, but it is not specified there on that page or anywhere in the docs that you need to add :dark in order for the styles to work. Just mentioning this so you can add that and save others in the future the trouble. And as for the scss, I have imported what you mentioned. Please see my original ticket as I put all my code which shows the import.

…

-Stephanie Raymos, Software Engineer - P I X A R ***@***.***

On Jul 11, 2022, at 12:20 PM, Jasenko ***@***.***> wrote:  Hi, I just wanted to note that this isn't noted in the docs here It is added as stated, "To change variables, simply override the classes with your custom values." however the scss styles are still not working at all You need to define overrides and then import scss file, for example: $dp__font_size: 0.5rem; $dp__preview_font_size: 0.5rem; $dp__time_font_size: 1rem; @import ***@***.***/vue-datepicker/src/VueDatePicker/style/main.scss'; — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.

[Jasenkoo]

Did you remove the .css import from the script import? On Tue, Jul 12, 2022 at 4:00 AM Stephanie Raymos ***@***.***> wrote:

…

Hi, I meant that the :dark is not specified as needed to make the css variables work. I saw the css page, that is how I found the styles to add, but it is not specified there on that page or anywhere in the docs that you need to add :dark in order for the styles to work. Just mentioning this so you can add that and save others in the future the trouble. And as for the scss, I have imported what you mentioned. Please see my original ticket as I put all my code which shows the import. -Stephanie Raymos, Software Engineer - P I X A R ***@***.*** > On Jul 11, 2022, at 12:20 PM, Jasenko ***@***.***> wrote: > >  > Hi, I just wanted to note that this isn't noted in the docs here > > It is added as stated, "To change variables, simply override the classes with your custom values." > > however the scss styles are still not working at all > > You need to define overrides and then import scss file, for example: > > $dp__font_size: 0.5rem; > $dp__preview_font_size: 0.5rem; > $dp__time_font_size: 1rem; > > @import ***@***.***/vue-datepicker/src/VueDatePicker/style/main.scss'; > — > Reply to this email directly, view it on GitHub, or unsubscribe. > You are receiving this because you authored the thread. — Reply to this email directly, view it on GitHub <#84 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFQZAIIXGDTOWLQKJOOYNKDVTTGTJANCNFSM53CDGCIQ> . You are receiving this because you modified the open/close state.Message ID: ***@***.***>

[claide]

How about if we have a system as color mode? How can we handle that one?

Something like below but system color is not working.

<VueDatePicker
   v-model="dateFilter"
   @update:model-value="onPeriodUpdated"
   range
   :enableTimePicker="false"
   placeholder="Select period"
   calendar-cell-class-name="rounded-full"
   :dark="colorMode.preference != 'light'"
>

[claide]

Sorry, I got it now using the colormode value not the preference :)