Comfort JS
import Comfort from "@natachah/vanilla-frontend/js/_comfort"Syntax
You can change the CSS custom properties of a website with the comfort component.
You can triggered changes by using some <button> tags or with some javascript methods. The changes are saved into a cookie.
An aria-pressed attribute will be automatically added to the <button> tag.
Themes
You can change the global theme via some <button> tag with the data-theme and value attributes.
Or you can use the javascript method setTheme(value).
In both case, it will add a data-theme attribute on the <html> tag of your website.
Lorem ipsum sit amet consectetur adipisicing elit. Quos consequatur omnis velit saepe suscipit? Ab ut assumenda nesciunt, veritatis beatae temporibus facilis quis earum vero officia explicabo veniam tempore voluptatibus?
<p class="demo-theme">Lorem ipsum sit amet consectetur adipisicing elit. Quos consequatur omnis velit saepe suscipit? Ab ut assumenda nesciunt, veritatis beatae temporibus facilis quis earum vero officia explicabo veniam tempore voluptatibus?</p>
<button data-theme value="light">Light theme</button>
<button data-theme value="dark">Dark theme</button>html[data-theme=light] .demo-theme {
color: black;
background: white
}
html[data-theme=dark] .demo-theme {
color: white;
background: black
}import Comfort from "@natachah/vanilla-frontend/js/_comfort"
const myComfort = new Comfort('my_custom_cookie_name')
myComfort.setTheme('myThemeName')Styles
You can change some styling properties with some <button> tag with the data-style="NameOfTheCSSProperty" and value attributes.
Or use the javascript method setStyle(NameOfTheCSSProperty,value).
Lorem ipsum sit amet consectetur adipisicing elit. Quos consequatur omnis velit saepe suscipit? Ab ut assumenda nesciunt, veritatis beatae temporibus facilis quis earum vero officia explicabo veniam tempore voluptatibus?
<p>Lorem ipsum sit amet consectetur adipisicing elit. Quos consequatur omnis velit saepe suscipit? Ab ut assumenda nesciunt, veritatis beatae temporibus facilis quis earum vero officia explicabo veniam tempore voluptatibus?</p>
<button data-style="--font-size" value="1rem">1 rem</button>
<button data-style="--font-size" value="1.5rem">1.5 rem</button>
<button data-style="--font-size" value="2rem">2 rem</button>body {
font-size: var(--font-size)
}import Comfort from "@natachah/vanilla-frontend/js/_comfort"
const myComfort = new Comfort('my_custom_cookie_name')
myComfort.setStyle('--font-size','3rem')You can also set a custom style by value with some <input> tag with the data-style-custom="NameOfTheCSSProperty" and value attributes.
<label for="demoCustomColor" style="color: var(--demo-label-color, black)">Change my label color !</label>
<input id="demoCustomColor" name="demo-change-color" data-style-custom="--demo-label-color" type="color">Javascript
To enable this component you need to import the javascript file and create a new Comfort object.
You can customize the name of the cookie when initiate the component.
Methods
| Method | Description |
|---|---|
| setTheme(value) | This method will set a global theme |
| setStyle(name,value) | This method will set a specific property |
| reset() | This method will reset all the value and delete the cookie |
WARNING
This component is an extension of the Cookie component, who come with it's own methods and events.