Skip to content

Commit 6dac74f

Browse files
ZmyslnyZmyslny
committed
chore: README updated
1 parent cd715e0 commit 6dac74f

File tree

1 file changed

+66
-18
lines changed

1 file changed

+66
-18
lines changed

‎README.md‎

Lines changed: 66 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,9 @@ Allows ✨:
1212
- process / modify the script in a dedicated PHP class.
1313

1414
Additionally - has build in **ready-to-use** scripts:
15-
- theme switching script (two states - light/dark)
16-
- _more coming later_
15+
- color scheme switching script (two states - light/dark)
16+
- color scheme switching script (three states - light/dark/system)
17+
- _more to come_
1718

1819
### Requirements
1920

@@ -82,13 +83,23 @@ This package makes it much more convenient by allowing you to keep inline script
8283
- **Better code organization** and maintainability
8384
- **IDE support** with syntax highlighting and error detection in dedicated JS files
8485

85-
# Explanation Through Example: Theme switch script
86+
# Explanation Through Example: Color scheme switch script
8687

8788
Modern websites often provide users with the ability to switch between light and dark themes. In such cases, you might want to remember the user's choice using `localStorage` and apply the selected theme on page load. To avoid **FOUC** (Flash of Unstyled Content), you can use _inline script_ to set the theme before the page fully loads.
8889

90+
The folowing example demonstrates by using **two-state** color scheme switch script (light/dark).
91+
92+
**Three-state** (light/dark/system) is also available. Just replace `2-states- | ..TwoStates` with `3-states- | ..ThreeStates` in the commands and code below.
93+
94+
> **Icons used** (from [HeroIcons](https://heroicons.com)):
95+
>
96+
> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" /></svg> **Sun** (Light mode)
97+
> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" /></svg> **Moon** (Dark mode)
98+
> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path fill-rule="evenodd" d="M2.25 5.25a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3V15a3 3 0 0 1-3 3h-3v.257c0 .597.237 1.17.659 1.591l.621.622a.75.75 0 0 1-.53 1.28h-9a.75.75 0 0 1-.53-1.28l.621-.622a2.25 2.25 0 0 0 .659-1.59V18h-3a3 3 0 0 1-3-3V5.25Zm1.5 0v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5Z" clip-rule="evenodd" /></svg> **Desktop** (System preference)
99+
89100
### Using prepared PHP classes
90101

91-
Add the following to your `AppServiceProvider`:
102+
**Step 1**: Add the following to your `AppServiceProvider`:
92103

93104
```php
94105
use Zmyslny\LaravelInlineScripts\Ready\ColorSchemeSwitchTwoStates\InitScript;
@@ -101,34 +112,50 @@ class AppServiceProvider extends ServiceProvider
101112
BladeInlineScripts::take(
102113
new InitScript(),
103114
new SwitchScript('d')
104-
)->registerAs('themeSwitchScripts');
115+
)->registerAs('colorSchemeScripts');
105116
}
106117
}
107118
```
108119

109-
and insert a newly created custom Blade directive in your template:
120+
**Step 2**: Insert a newly created custom Blade directive in your template:
110121

111122
```blade
112123
<html>
113124
<head>
114125
...
115-
@themeSwitchScripts
126+
@colorSchemeScripts
116127
</head>
117128
<body>
118129
...
119130
```
120131

121-
Now hit the `d` key to toggle between light and dark themes, and your choice will be remembered on subsequent visits.
132+
Now hit the `d` key to toggle between a light and dark color scheme, and your choice will be remembered on subsequent visits.
133+
134+
**Step 3 (optional)**: Add the view with color scheme icons to your website:
135+
136+
Get the available view files:
137+
```bash
138+
php artisan vendor:publish --tag=color-scheme-2-states-views
139+
```
140+
141+
Select the one that suits your frontend and insert it in your template:
142+
- Blade + TailwindCss + Hero icons: `../views/color-scheme-switch-two-states/hero-icons-tailwind.blade.php`
143+
- Livewire/Alpine + TailwindCss + Hero icons: `../views/color-scheme-switch-two-states/hero-icons-tailwind-alpine.blade.php`
144+
145+
> **Icons used** (from [HeroIcons](https://heroicons.com)):
146+
>
147+
> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" /></svg> **Sun** (Light mode)
148+
> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" /></svg> **Moon** (Dark mode)
122149
123150
### Using JS code directly
124151

125152
**Step 1**: Publish the built-in scripts:
126153

127154
```bash
128-
php artisan vendor:publish --tag=theme-switch-2-states-js
155+
php artisan vendor:publish --tag=color-scheme-2-states-js
129156
```
130157

131-
That will copy the scripts to `resources/js/theme-switch-two-states/[init-script.js, switch-script.js]`.
158+
That will copy the scripts to `resources/js/color-scheme-switch-two-states/[init-script.js, switch-script.js]`.
132159

133160
`init-script.js` - initializes the theme based on the user's previous choice stored in `localStorage`.
134161
`switch-script.js` - a function to toggle between light and dark themes by hitting a selected KEY and saves the choice in `localStorage`.
@@ -142,14 +169,14 @@ class AppServiceProvider extends ServiceProvider
142169
{
143170
BladeInlineScripts::takeFiles(
144171
[
145-
resource_path('js/theme-switch-two-states/init-script.js'),
172+
resource_path('js/color-scheme-switch-two-states/init-script.js'),
146173
['__DARK__' => 'dark'], // variables to replace in the script
147174
],
148175
[
149-
resource_path('js/theme-switch-two-states/switch-script.js'),
176+
resource_path('js/color-scheme-switch-two-states/switch-script.js'),
150177
['__DARK__' => 'dark', '__LIGHT__' => 'light', '__TOGGLE_KEY__' => 'd'], // variables to replace in the script
151178
]
152-
)->registerAs('themeSwitchScripts');
179+
)->registerAs('colorSchemeScripts');
153180
}
154181
}
155182
```
@@ -160,13 +187,29 @@ class AppServiceProvider extends ServiceProvider
160187
<html>
161188
<head>
162189
...
163-
@themeSwitchScripts
190+
@colorSchemeScripts
164191
</head>
165192
<body>
166193
...
167194
```
168195

169-
Now hit the `d` key to toggle between light and dark themes, and your choice will be remembered on subsequent visits.
196+
Now hit the `d` key to toggle between a light and dark color scheme, and your choice will be remembered on subsequent visits.
197+
198+
**Step 3 (optional)**: Add the view with color scheme icons to your website:
199+
200+
Get the available view files:
201+
```bash
202+
php artisan vendor:publish --tag=color-scheme-2-states-views
203+
```
204+
205+
Select the one that suits your frontend and insert it in your template:
206+
- Blade + TailwindCss + Hero icons: `../views/color-scheme-switch-two-states/hero-icons-tailwind.blade.php`
207+
- Livewire/Alpine + TailwindCss + Hero icons: `../views/color-scheme-switch-two-states/hero-icons-tailwind-alpine.blade.php`
208+
209+
> **Icons used** (from [HeroIcons](https://heroicons.com)):
210+
>
211+
> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" /></svg> **Sun** (Light mode)
212+
> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" /></svg> **Moon** (Dark mode)
170213
171214
## Advanced Usage: Custom Script Processing
172215

@@ -186,16 +229,21 @@ abstract class FromFile implements RenderableScript;
186229
abstract class FromFileWithPlaceholders implements ScriptWithPlaceholders;
187230
```
188231

189-
## Bonus - Unit tests for JS scripts
232+
## Bonuses
190233

234+
Unit tests for JS scripts
191235
```bash
192-
php artisan vendor:publish --tag=theme-switch-2-states-js-tests
236+
php artisan vendor:publish --tag=color-scheme-2-states-js-tests
237+
# or
238+
php artisan vendor:publish --tag=color-scheme-3-states-js-tests
193239
```
194240

195241
You can also publish JS code with test files at once:
196242

197243
```bash
198-
php artisan vendor:publish --tag=theme-switch-2-states-all
244+
php artisan vendor:publish --tag=color-scheme-2-states-all
245+
# or
246+
php artisan vendor:publish --tag=color-scheme-3-states-all
199247
```
200248

201249
## License

0 commit comments

Comments
 (0)