diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md index c6000c11e..64815af9a 100644 --- a/docs/getting-started/installation.md +++ b/docs/getting-started/installation.md @@ -4,7 +4,25 @@ You can use Shoelace via CDN or by installing it locally. ## CDN Installation (Recommended) -The easiest way to install Shoelace is with the CDN. Just add the following tags to your page. +The easiest way to install Shoelace is with the CDN. Just add the following tags to your page to get all components and the default light theme. + +```html + + +``` + +### Dark Theme + +If you prefer to use the dark theme instead, this will load all components and the dark theme. Note the `sl-theme-dark` class on the `` element. + +```html + + +``` + +### Light & Dark Theme + +If you want to load the light or dark theme based on the user's `prefers-color-scheme` setting, use this. The `media` attributes ensure that only the user's preferred theme stylesheet loads and the `onload` attribute sets the appropriate [theme class](/getting-started/themes) on the `` element. ```html @@ -14,32 +32,6 @@ The easiest way to install Shoelace is with the CDN. Just add the following tags ``` -The `media` attributes ensure that only the user's preferred theme stylesheet loads, and the `onload` attribute sets the appropriate [theme class](/getting-started/themes/) on the `` element. - -### Forcing Light or Dark Themes - -To force Shoelace to use the light theme, load the light stylesheet only. Since light theme is the default, you don't need to take any further steps. - -```html - - -``` - -To force the dark theme, set the `sl-theme-dark` class on the `` element and load the dark stylesheet. - -```html - - - - - - - - - - -``` - Now you can [start using Shoelace!](/getting-started/usage) ## Local Installation diff --git a/docs/getting-started/overview.md b/docs/getting-started/overview.md index e5ccf95d4..3de995cd6 100644 --- a/docs/getting-started/overview.md +++ b/docs/getting-started/overview.md @@ -93,9 +93,7 @@ If you need to support IE11 or pre-Chromium Edge, this library isn't for you. Al Shoelace is designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska). It's available under the terms of the MIT license. -Designing, developing, and supporting this library requires a lot of time, effort, and skill. I'd like to keep it open source so everyone can use it, but that doesn't provide me with any income. - -**Therefore, if you're using my software to make a profit,** I respectfully ask that you help [fund its development](https://github.com/sponsors/claviska) by becoming a sponsor. There are multiple tiers to choose from with benefits at every level, including prioritized support, bug fixes, feature requests, and advertising. +Designing, developing, and supporting this library requires a lot of time, effort, and skill. If you're using this software to make a profit, I respectfully ask that you help [fund its development](https://github.com/sponsors/claviska) by becoming a sponsor. 👇 Your support is very much appreciated! 👇