tailwind_theme_picker 0.1.0 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 3f988d8ac00034db672567acabb29136b5203b1d503f269deae475426aac938a
|
|
4
|
+
data.tar.gz: 7112fb09467c1cac3a1e9ce1babbfe7efe76d97efdfbc96bd21e7c9fd3ffa5d8
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 41651fcab3cd4bfe9c58f2a370273d6e1be0a4c75661fbde8859a7f0aaa1ad804aa4a6075d10f9ef9fca0e38985cf6fd4eb46ada074061c2a8d25cf3a7a0928f
|
|
7
|
+
data.tar.gz: 107a0dfb8ba05fcf4aa3a796f4bd5442a546452ab2471e4c0cb669addec92cd39f55da5b3e342dc351d2b181998833c9a1d5ea7535171dc53573801e3602511c
|
data/README.md
CHANGED
|
@@ -14,7 +14,7 @@ Drop-in theme + light/dark picker for Tailwind-based Rails apps.
|
|
|
14
14
|
|
|
15
15
|
```ruby
|
|
16
16
|
# Gemfile
|
|
17
|
-
gem "tailwind_theme_picker"
|
|
17
|
+
gem "tailwind_theme_picker"
|
|
18
18
|
```
|
|
19
19
|
|
|
20
20
|
```bash
|
|
@@ -38,12 +38,12 @@ end
|
|
|
38
38
|
### Wire up the layout
|
|
39
39
|
|
|
40
40
|
```slim
|
|
41
|
-
html lang="en" *
|
|
41
|
+
html lang="en" *tailwind_theme_picker_html_attrs
|
|
42
42
|
head
|
|
43
43
|
/ ...stylesheets, importmap...
|
|
44
|
-
=
|
|
44
|
+
= tailwind_theme_picker_fouc_script
|
|
45
45
|
body
|
|
46
|
-
=
|
|
46
|
+
= render_tailwind_theme_picker
|
|
47
47
|
= yield
|
|
48
48
|
```
|
|
49
49
|
|
|
@@ -69,8 +69,8 @@ If you previously had `app/javascript/controllers/theme_controller.js`, delete i
|
|
|
69
69
|
## How persistence works
|
|
70
70
|
|
|
71
71
|
1. Stimulus controller writes both cookies on every change.
|
|
72
|
-
2. On the next request, `
|
|
73
|
-
3. On the user's *first* visit (no cookies), `
|
|
72
|
+
2. On the next request, `tailwind_theme_picker_html_attrs` reads them and paints `<html>` server-side. No FOUC.
|
|
73
|
+
3. On the user's *first* visit (no cookies), `tailwind_theme_picker_fouc_script` emits ~250 bytes of inline JS that paints from localStorage or system preference. After that, cookies take over and the helper returns an empty string.
|
|
74
74
|
|
|
75
75
|
## Configuration reference
|
|
76
76
|
|
|
@@ -3,7 +3,7 @@ module TailwindThemePicker
|
|
|
3
3
|
module ViewHelper
|
|
4
4
|
|
|
5
5
|
# Emoji defaults so the gem has no icon-library dependency. Override by
|
|
6
|
-
# passing :icons to
|
|
6
|
+
# passing :icons to render_tailwind_theme_picker.
|
|
7
7
|
DEFAULT_ICONS = {
|
|
8
8
|
palette: "🎨",
|
|
9
9
|
times: "❌",
|
|
@@ -12,8 +12,8 @@ module TailwindThemePicker
|
|
|
12
12
|
}.freeze
|
|
13
13
|
|
|
14
14
|
# Returns HTML attributes for the <html> tag based on the request's cookies.
|
|
15
|
-
# Use like: html lang="en" *
|
|
16
|
-
def
|
|
15
|
+
# Use like: html lang="en" *tailwind_theme_picker_html_attrs
|
|
16
|
+
def tailwind_theme_picker_html_attrs
|
|
17
17
|
config = TailwindThemePicker.configuration
|
|
18
18
|
theme = cookies[config.theme_cookie].presence
|
|
19
19
|
theme = config.default unless config.themes.include?(theme)
|
|
@@ -25,7 +25,7 @@ module TailwindThemePicker
|
|
|
25
25
|
|
|
26
26
|
# Whether the current request already has theme cookies set. Useful for
|
|
27
27
|
# skipping the FOUC fallback script.
|
|
28
|
-
def
|
|
28
|
+
def tailwind_theme_picker_cookies_present?
|
|
29
29
|
config = TailwindThemePicker.configuration
|
|
30
30
|
cookies[config.theme_cookie].present? && cookies[config.mode_cookie].present?
|
|
31
31
|
end
|
|
@@ -33,8 +33,8 @@ module TailwindThemePicker
|
|
|
33
33
|
# Inline <script> that paints theme + mode classes from cookies/localStorage
|
|
34
34
|
# before the rest of the page renders. Only needed on the first visit (when
|
|
35
35
|
# the cookies aren't yet set server-side) — pass force: true to always emit.
|
|
36
|
-
def
|
|
37
|
-
return "".html_safe if !force &&
|
|
36
|
+
def tailwind_theme_picker_fouc_script(force: false)
|
|
37
|
+
return "".html_safe if !force && tailwind_theme_picker_cookies_present?
|
|
38
38
|
|
|
39
39
|
config = TailwindThemePicker.configuration
|
|
40
40
|
nonce = (respond_to?(:content_security_policy_nonce) ? content_security_policy_nonce : nil)
|
|
@@ -53,7 +53,7 @@ module TailwindThemePicker
|
|
|
53
53
|
content_tag(:script, js.html_safe, nonce: nonce)
|
|
54
54
|
end
|
|
55
55
|
|
|
56
|
-
def
|
|
56
|
+
def render_tailwind_theme_picker(themes: nil, default: nil, icons: {})
|
|
57
57
|
config = TailwindThemePicker.configuration
|
|
58
58
|
render(
|
|
59
59
|
partial: "tailwind_theme_picker/picker",
|
|
@@ -38,9 +38,9 @@ module TailwindThemePicker
|
|
|
38
38
|
say " 1. Add to your Tailwind input CSS (e.g. app/assets/tailwind/application.css):"
|
|
39
39
|
say " @import './tailwind_theme_picker/themes';", :cyan
|
|
40
40
|
say " 2. Wire up your layout <html> tag and body:"
|
|
41
|
-
say " html lang=\"en\" *
|
|
42
|
-
say " =
|
|
43
|
-
say " =
|
|
41
|
+
say " html lang=\"en\" *tailwind_theme_picker_html_attrs", :cyan
|
|
42
|
+
say " = tailwind_theme_picker_fouc_script # in <head>"
|
|
43
|
+
say " = render_tailwind_theme_picker # in <body>"
|
|
44
44
|
say ""
|
|
45
45
|
say "After upgrading the gem, re-run this generator to pick up any new themes."
|
|
46
46
|
end
|