qalendar: color-scheme: light not working

Hey all. Thanks a lot for engaging, and even coming up with great workarounds.

I think I finally, after my third round of coming back to this problem, found a solution which won’t make me have to rebuild the whole dark mode feature. For anyone wanting to try the fix out, you can download npm i qalendar@3.5.1-beta.0. I just solved it, but won’t have time to test it properly before I go on vacation for a couple of weeks. This means a beta release will have to do for now.

Once you’ve downloaded this version, add an "is-light-mode" class to any wrapping element, and now it should work. Not the optimal API, I admit, but will also have to do for now in order to avoid breaking changes.

An example of the implementation can be found here: https://github.com/tomosterlund/qalendar-light-mode-test/blob/main/src/views/Home.vue

Until the issue itself gets resolved, I’ve tried to manually “hack” some of the CSS and the way I did was really amateurish but for everyone else that can’t wait/want to try out this:

• I just went element by element in dev tools in browser to inspect the CSS styling of the elements and their attributes;
• I just override some of the CSS properties in order to make it look as close as possible to the white theme;
• although it does require quite a few bit of overriding, it still seems to look rather okay:

Here is the full CSS list that I use in my component (style scoped) to override the values:

.calendar-root-wrapper .calendar-root {
  background: #fff;
  color: #fff;
  border-color: transparent;
}
.calendar-header__period-name {
  color: #000;
}
.calendar-header__mode-picker {
  color: #fff !important;
  background-color: #fff !important;
  text-emphasis-color: #000 !important;
  border: 1px solid #000 !important;
}
.calendar-header__mode-value {
  color: #000 !important;
  background-color: #fff !important;
}
.calendar-header__mode-options {
  color: #fff !important;
  background-color: #fff !important;
}
.calendar-header__mode-option.is-month-mode {
  color: #000 !important;
  background-color: #fff !important;
}
.calendar-header__mode-option.is-week-mode {
  color: #000 !important;
  background-color: #fff !important;
}
.calendar-header__mode-option.is-day-mode {
  color: #000 !important;
  background-color: #fff !important;
}
.calendar-header__chevron-arrows {
  color: #000 !important;
}
.calendar-header {
  background: #fff;
  color: #fff;
}
.week-timeline__day-name {
  color: #000 !important;
}
.week-timeline__date {
  color: #000 !important;
}
.day-timeline__hour {
  color: #000 !important;
}
.date-picker__value-display {
  color: #000 !important;
  background-color: #fff !important;
  text-emphasis-color: #000 !important;
  border: 1px solid #000 !important;
}
.date-picker__value-display-text {
  color: #000 !important;
  border-color: #000 !important;
}
.date-picker__week-picker {
  background-color: #fff !important;
}
.date-picker__week-picker-navigation {
  color: #000 !important;
}
.date-pickerr__day-names.week {
  color: #000 !important;
}
.date-picker__day-names.week {
  color: #000 !important;
}
.date-picker__week-picker.is-in-qalendar {
  color: #000 !important;
}
.calendar-month__day-name {
  color: #000 !important;
}
.calendar-month__day-date {
  color: #000 !important;
}
.calendar-month__weekday-more {
  color: #000 !important;
}
.calendar-month__event-time {
  color: #000 !important;
}
.calendar-month__event-title {
  color: #000 !important;
}

Here is a snapshot with how it looks like:

I know it’s not a proper solution! Just laying out in case someone else really wants to just see it white, otherwise I would suggest to just wait on the fix.

Heya 😃 We are using qalendar@3.5.1-beta.0 with enforced light mode and it works like a charm 😃

@georgeVasiliu Thanks man!

@georgeVasiliu

No, you’re right. Adding a class and a config option is counterintuitive, and not what I meant either 😃 I meant adding a class, as an internal means of making this rule possible

.is-dark & {
    @content;
  }