Add Contrast setting to Theme Settings panel

- `theme-contrast` key (default `auto`) wired through `tabler-theme.ts` and the offcanvas script

.changeset/theme-settings-contrast.md

@@ -0,0 +1,5 @@
+---
+"@tabler/preview": minor
+---
+
+Added a Contrast setting (`auto`/`normal`/`high`) to the Theme Settings panel.

core/js/tabler-theme.ts

@@ -6,6 +6,7 @@
 interface ThemeConfig {
   'theme': string
   'theme-base': string
+  'theme-contrast': string
   'theme-font': string
   'theme-primary': string
   'theme-radius': string
@@ -14,6 +15,8 @@ interface ThemeConfig {
 const themeConfig: ThemeConfig = {
   'theme': 'light',
   'theme-base': 'gray',
+  // 'auto' = no attribute: the css then follows `prefers-contrast: more`
+  'theme-contrast': 'auto',
   'theme-font': 'sans-serif',
   'theme-primary': 'blue',
   'theme-radius': '1',

shared/components/demo/ThemeSettings.astro

@@ -7,6 +7,7 @@ import { site } from '@shared/lib/site'
 const defaults = {
   'theme': 'light',
   'theme-base': 'gray',
+  'theme-contrast': 'auto',
   'theme-font': 'sans-serif',
   'theme-primary': 'blue',
   'theme-radius': '1',
@@ -41,6 +42,21 @@ const defaults = {
           }
         </fieldset>
 
+        <fieldset class="border-0 p-0 mb-4">
+          <legend class="form-label float-none mb-0" style="font-size: inherit;">Contrast</legend>
+          <FormHint as="p">Increase contrast for better readability. Auto follows your system setting.</FormHint>
+          {
+            ['auto', 'normal', 'high'].map((contrast) => (
+              <label class="form-check">
+                <div class="form-selectgroup-item">
+                  <input type="radio" name="theme-contrast" value={contrast} class="form-check-input" checked={contrast === defaults['theme-contrast']} />
+                  <div class="form-check-label">{contrast.charAt(0).toUpperCase() + contrast.slice(1)}</div>
+                </div>
+              </label>
+            ))
+          }
+        </fieldset>
+
         <fieldset class="border-0 p-0 mb-4">
           <legend class="form-label float-none mb-0" style="font-size: inherit;">Color scheme</legend>
           <FormHint as="p">The perfect color mode for your app.</FormHint>

shared/layouts/BaseLayout.astro

@@ -145,6 +145,7 @@ const libJsFiles = (head: boolean) => pageLibEntries.filter(([, lib]) => Boolean
         var themeConfig = {
           'theme': 'light',
           'theme-base': 'gray',
+          'theme-contrast': 'auto',
           'theme-font': 'sans-serif',
           'theme-primary': 'blue',
           'theme-radius': '1',