fix: enforced light mode (#210)

* fix: enable forcing light mode

* docs: add info about enforced light mode

development/QalendarView.vue

@@ -7,7 +7,7 @@
 
     <DevHeader v-if="layout === 'header'" />
 
-    <main>
+    <main class="is-light-mode">
       <Qalendar
         :key="config.locale + config.week.nDays"
         :selected-date="new Date()"

development/cypress/CypressSmoke.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <div class="wrapper">
+    <div class="wrapper is-light-mode">
       <Qalendar
         :config="config"
       />

docs/guide.md

@@ -89,6 +89,12 @@ Dark mode is enabled in one out of two ways:
 1. User system preferences
 2. Set programmatically, by adding the inline style `style="color-scheme: dark"` to a parent element.
 
+::: tip
+If you need to enforce light mode, even when a user's system settings are set to dark mode, you can
+add the class `is-light-mode` to any element wrapping the calendar. An example of this can be found here:
+https://github.com/tomosterlund/qalendar-light-mode-test/blob/main/src/views/Home.vue
+:::
+
 ## Basic configuration
 
 Qalendar takes a `config` prop, which contains all the most crucial options for configuring its

package.json

@@ -1,7 +1,7 @@
 {
   "name": "qalendar",
   "description": "Event calendar and date picker for Vue 3",
-  "version": "3.5.0",
+  "version": "3.5.1-beta.0",
   "homepage": "https://tomosterlund.github.io/qalendar/",
   "repository": {
     "type": "git",

src/styles/_mixins.scss

@@ -14,7 +14,10 @@
 
 @mixin dark-mode {
   @media (prefers-color-scheme: dark) {
-    @content;
+
+    &:not(.is-light-mode &) {
+      @content;
+    }
   }
 
   [style*="color-scheme: dark"] & {