Skip to content

Commit 5f0509c

Browse files
simeydotmesimeydotme
committed
change the way darkmode works
i realised that setting the darkmode with automatic @media would cause a lot of backwards incompatibility. So I have made darkmode an explicit option with the default value of false. It can be opt'd in with 'force' or 'auto' to either always be dark, or use the system preference respectively.
1 parent bb05a28 commit 5f0509c

File tree

11 files changed

+559
-368
lines changed

11 files changed

+559
-368
lines changed

‎dist/range-slider-pips.js‎

Lines changed: 188 additions & 165 deletions
Large diffs are not rendered by default.

‎dist/range-slider-pips.mjs‎

Lines changed: 188 additions & 165 deletions
Large diffs are not rendered by default.

‎dist/svelte/components/RangeSlider.svelte‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ export let id = void 0;
5050
let classes = "";
5151
export { classes as class };
5252
export let style = void 0;
53+
export let darkmode = false;
5354
export let springValues = { stiffness: 0.15, damping: 0.4 };
5455
export let spring = true;
5556
const dispatch = createEventDispatcher();
@@ -505,6 +506,8 @@ function ariaLabelFormatter(value2, index) {
505506
bind:this={slider}
506507
role="none"
507508
class="rangeSlider {classes}"
509+
class:rsDark={darkmode === 'force'}
510+
class:rsAutoDark={darkmode === 'auto'}
508511
class:rsRange={hasRange}
509512
class:rsDrag={hasRange && draggy}
510513
class:rsMin={hasRange && range === 'min'}
@@ -644,16 +647,14 @@ function ariaLabelFormatter(value2, index) {
644647
--slider-accent: #4a40d4;
645648
--slider-accent-100: #838de7;
646649
--slider-base: #99a2a2;
647-
--slider-base-100: #aebecf;
648-
--slider-base-200: #b9c2c2;
650+
--slider-base-100: #b9c2c2;
649651
--slider-bg: #d7dada;
650652
--slider-fg: #3f3e4f;
651653
652654
--slider-dark-accent: #6070fc;
653655
--slider-dark-accent-100: #7a7fab;
654656
--slider-dark-base: #82809f;
655-
--slider-dark-base-100: #595970;
656-
--slider-dark-base-200: #454454;
657+
--slider-dark-base-100: #595868;
657658
--slider-dark-bg: #3f3e4f;
658659
--slider-dark-fg: #d7dada;
659660
@@ -664,31 +665,29 @@ function ariaLabelFormatter(value2, index) {
664665
--handle-border: var(--range-handle-border, var(--handle));
665666
--range-inactive: var(--range-range-inactive, var(--handle-inactive));
666667
--range: var(--range-range, var(--handle-focus));
667-
--range-limit: var(--range-range-limit, var(--slider-base-200));
668+
--range-limit: var(--range-range-limit, var(--slider-base-100));
668669
--range-hover: var(--range-range-hover, var(--handle-border));
669670
--range-press: var(--range-range-press, var(--handle-border));
670671
--float-inactive: var(--range-float-inactive, var(--handle-inactive));
671672
--float: var(--range-float, var(--handle-focus));
672673
--float-text: var(--range-float-text, white);
673674
}
674675
675-
:global(.rangeSlider.dark) {
676+
:global(.rangeSlider.rsDark) {
676677
--slider-accent: var(--slider-dark-accent);
677678
--slider-accent-100: var(--slider-dark-accent-100);
678679
--slider-base: var(--slider-dark-base);
679680
--slider-base-100: var(--slider-dark-base-100);
680-
--slider-base-200: var(--slider-dark-base-200);
681681
--slider-bg: var(--slider-dark-bg);
682682
--slider-fg: var(--slider-dark-fg);
683683
}
684684
685685
@media (prefers-color-scheme: dark) {
686-
:global(.rangeSlider) {
686+
:global(.rangeSlider.rsAutoDark) {
687687
--slider-accent: var(--slider-dark-accent);
688688
--slider-accent-100: var(--slider-dark-accent-100);
689689
--slider-base: var(--slider-dark-base);
690690
--slider-base-100: var(--slider-dark-base-100);
691-
--slider-base-200: var(--slider-dark-base-200);
692691
--slider-bg: var(--slider-dark-bg);
693692
--slider-fg: var(--slider-dark-fg);
694693
}

‎dist/svelte/components/RangeSlider.svelte.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ declare const __propDef: {
3737
id?: string | undefined;
3838
class?: string | undefined;
3939
style?: string | undefined;
40+
darkmode?: false | "auto" | "force" | undefined;
4041
springValues?: SpringOpts | undefined;
4142
spring?: boolean | undefined;
4243
};

‎docs/upgrade.md‎

Lines changed: 35 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -486,12 +486,36 @@ The CSS variables remain unchanged as they were already prefixed with `--` and a
486486
## Dark Mode and Color System [1047235e](https://github.com/simeydotme/svelte-range-slider-pips/commit/1047235e64e210a395c0c3b4c75144cdfba4ae62) [change]
487487

488488
In v4, the color system has been completely revamped to support dark mode and provide a more flexible theming system.
489+
But overall the colours should remain almost identical to `v3`.
489490

490491
### Dark Mode Support
491492

492493
The slider now supports dark mode in two ways:
493494
1. Using the `.dark` class on the slider element
494-
2. Automatically via the `prefers-color-scheme: dark` media query
495+
2. Using the `darkmode` prop
496+
497+
#### How to Enable Dark Mode
498+
499+
- **Default (Light mode):**
500+
```svelte
501+
<RangeSlider darkmode={false} />
502+
```
503+
The slider always uses the light color scheme, regardless of system settings.
504+
This is the same as v3.
505+
506+
- **Automatic (Match system):**
507+
```svelte
508+
<RangeSlider darkmode="auto" />
509+
```
510+
The slider will use dark colors if the user's system prefers dark mode, and light colors otherwise.
511+
This is the best option if your website has a dark mode toggle.
512+
513+
- **Force Dark Mode:**
514+
```svelte
515+
<RangeSlider darkmode="force" />
516+
```
517+
The slider always uses the dark color scheme, regardless of system settings.
518+
This is the best option if your website is just dark.
495519

496520
### New Color System
497521

@@ -502,8 +526,7 @@ The component now uses a comprehensive set of CSS variables for theming:
502526
--slider-accent: #4a40d4;
503527
--slider-accent-100: #838de7;
504528
--slider-base: #99a2a2;
505-
--slider-base-100: #aebecf;
506-
--slider-base-200: #b9c2c2;
529+
--slider-base-100: #b9c2c2;
507530
--slider-bg: #d7dada;
508531
--slider-fg: #3f3e4f;
509532
```
@@ -513,8 +536,7 @@ The component now uses a comprehensive set of CSS variables for theming:
513536
--slider-dark-accent: #6070fc;
514537
--slider-dark-accent-100: #7a7fab;
515538
--slider-dark-base: #82809f;
516-
--slider-dark-base-100: #595970;
517-
--slider-dark-base-200: #454454;
539+
--slider-dark-base-100: #595868;
518540
--slider-dark-bg: #3f3e4f;
519541
--slider-dark-fg: #d7dada;
520542
```
@@ -532,36 +554,30 @@ The new system makes it easier to customize the slider's appearance:
532554
- All previous CSS variable names remain valid
533555

534556
3. **Style Prop Support**:
535-
- New `style` prop for directly passing CSS variables
557+
- New `style` prop allows you to directly pass CSS declarations / variables
536558
- Works alongside the existing `class` prop
537559
- Perfect for dynamic theme changes
538560

539-
### Example Usage
561+
#### Example Usage
540562

541563
```svelte
542-
<!-- Automatic dark mode -->
543-
<!-- Will automatically switch based on system preferences -->
544-
<RangeSlider />
545-
546-
<!-- Forcing dark mode with the '.dark' css class -->
547-
<RangeSlider class="dark" />
548-
549564
<!-- Custom theme colors can be supplied as a css string -->
550565
<RangeSlider
566+
darkmode="force"
551567
style="
552568
--slider-accent: #0ea5e9;
553-
--slider-bg: #e2e8f0;
569+
--slider-bg: #222;
554570
"
555571
/>
556572

557573
<!-- Custom theme colors using Tailwind classes -->
558574
<RangeSlider
575+
darkmode="auto"
559576
class="
560577
[--slider-accent:var(--color-sky-500)]
561578
[--slider-accent-100:var(--color-sky-300)]
562579
[--slider-base:var(--color-slate-500)]
563580
[--slider-base-100:var(--color-slate-300)]
564-
[--slider-base-200:var(--color-slate-300)]
565581
[--slider-bg:var(--color-slate-200)]
566582
"
567583
/>
@@ -570,7 +586,9 @@ The new system makes it easier to customize the slider's appearance:
570586
### Important Notes
571587

572588
- Legacy fallback colors have been removed as all modern browsers support CSS variables
573-
- The component will automatically adapt to system dark mode preferences
589+
- The component is light-mode by default
590+
- Dark mode can be enabled by setting `darkmode="force"`
591+
- The component will follow the system color scheme if `darkmode="auto"` is set.
574592
- Custom themes can be applied by overriding the base theme variables
575593
- All existing CSS variable overrides remain supported for backward compatibility
576594
- The new system provides better color consistency and easier theme management

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "svelte-range-slider-pips",
3-
"version": "4.0.0-beta.3",
3+
"version": "4.0.0-beta.4",
44
"description": "Multi-Thumb, Accessible, Beautiful Range Slider with Pips",
55
"repository": {
66
"type": "git",

‎src/lib/components/RangeSlider.svelte‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@
6565
let classes = '';
6666
export { classes as class };
6767
export let style: string | undefined = undefined;
68+
export let darkmode: false | 'auto' | 'force' = false;
6869
export let springValues: SpringOpts = { stiffness: 0.15, damping: 0.4 };
6970
export let spring = true;
7071
@@ -761,6 +762,8 @@
761762
bind:this={slider}
762763
role="none"
763764
class="rangeSlider {classes}"
765+
class:rsDark={darkmode === 'force'}
766+
class:rsAutoDark={darkmode === 'auto'}
764767
class:rsRange={hasRange}
765768
class:rsDrag={hasRange && draggy}
766769
class:rsMin={hasRange && range === 'min'}
@@ -900,16 +903,14 @@
900903
--slider-accent: #4a40d4;
901904
--slider-accent-100: #838de7;
902905
--slider-base: #99a2a2;
903-
--slider-base-100: #aebecf;
904-
--slider-base-200: #b9c2c2;
906+
--slider-base-100: #b9c2c2;
905907
--slider-bg: #d7dada;
906908
--slider-fg: #3f3e4f;
907909
908910
--slider-dark-accent: #6070fc;
909911
--slider-dark-accent-100: #7a7fab;
910912
--slider-dark-base: #82809f;
911-
--slider-dark-base-100: #595970;
912-
--slider-dark-base-200: #454454;
913+
--slider-dark-base-100: #595868;
913914
--slider-dark-bg: #3f3e4f;
914915
--slider-dark-fg: #d7dada;
915916
@@ -920,31 +921,29 @@
920921
--handle-border: var(--range-handle-border, var(--handle));
921922
--range-inactive: var(--range-range-inactive, var(--handle-inactive));
922923
--range: var(--range-range, var(--handle-focus));
923-
--range-limit: var(--range-range-limit, var(--slider-base-200));
924+
--range-limit: var(--range-range-limit, var(--slider-base-100));
924925
--range-hover: var(--range-range-hover, var(--handle-border));
925926
--range-press: var(--range-range-press, var(--handle-border));
926927
--float-inactive: var(--range-float-inactive, var(--handle-inactive));
927928
--float: var(--range-float, var(--handle-focus));
928929
--float-text: var(--range-float-text, white);
929930
}
930931
931-
:global(.rangeSlider.dark) {
932+
:global(.rangeSlider.rsDark) {
932933
--slider-accent: var(--slider-dark-accent);
933934
--slider-accent-100: var(--slider-dark-accent-100);
934935
--slider-base: var(--slider-dark-base);
935936
--slider-base-100: var(--slider-dark-base-100);
936-
--slider-base-200: var(--slider-dark-base-200);
937937
--slider-bg: var(--slider-dark-bg);
938938
--slider-fg: var(--slider-dark-fg);
939939
}
940940
941941
@media (prefers-color-scheme: dark) {
942-
:global(.rangeSlider) {
942+
:global(.rangeSlider.rsAutoDark) {
943943
--slider-accent: var(--slider-dark-accent);
944944
--slider-accent-100: var(--slider-dark-accent-100);
945945
--slider-base: var(--slider-dark-base);
946946
--slider-base-100: var(--slider-dark-base-100);
947-
--slider-base-200: var(--slider-dark-base-200);
948947
--slider-bg: var(--slider-dark-bg);
949948
--slider-fg: var(--slider-dark-fg);
950949
}

‎src/routes/test/nav/test-nav.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,16 @@
133133
}
134134
]
135135
},
136+
{
137+
"name": "styles",
138+
"path": "",
139+
"children": [
140+
{
141+
"name": "darkmode",
142+
"path": "/test/range-slider/styles/darkmode"
143+
}
144+
]
145+
},
136146
{
137147
"name": "values",
138148
"path": "",

‎src/routes/test/range-slider/styles/darkmode/+page.svelte‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script lang="ts">
2+
import RangeSlider from '$lib/components/RangeSlider.svelte';
3+
</script>
4+
5+
<h2>RangeSlider Darkmode Test Page</h2>
6+
7+
<section>
8+
<h3>Darkmode: false (default)</h3>
9+
<RangeSlider id="slider-light" darkmode={false} pips all="label" />
10+
</section>
11+
12+
<section>
13+
<h3>Darkmode: auto (system)</h3>
14+
<RangeSlider id="slider-auto" darkmode="auto" pips all="label" />
15+
</section>
16+
17+
<section>
18+
<h3>Darkmode: force</h3>
19+
<RangeSlider id="slider-dark" darkmode="force" pips all="label" />
20+
</section>

0 commit comments

Comments
 (0)