Cdn is provided by raw.githack.com
Theme On Scroll
Give your application a unique scrolling effect with Theme On Scroll. get read of the old block website layout
How it works
Downloade and include this plugin in your app
Or downloade package vai npm
npm i -d simplify/tos
Theme Template code snippet
data-theme="primary secondary info danger warning dark light"
<div class="s-bg-container s-bg-secondary s-primary-text">
<div class="s-theme-el" data-theme="def #D8F3F6 #05191C #EF6333">
<h1> 2nd element</h1>
</div>
<div class="s-theme-el" data-theme="#D8F3F6 #EF6333 #596B6C #D94D24">
<h1>3 element</h1>
</div>
<div class="s-theme-el" data-theme="#500D4F #494849 #7699A2 #D94D24">
<h1> 4rd element</h1>
</div>
<div class="s-theme-el" data-theme="#F2775C #6C5C59 #596B6C #D94D24">
<h1> 5th element</h1>
</div>
</div>
Note=> when using the data-theme model
the theme colors must be in following order.
primary secondary info danger warning dark light
If you wish not to change a variable use def to replace the variable. The def attribute set the variable to it current default color.
data-theme="def secondary info def warning dark light"
<div class="s-bg-container">
<div class="s-theme-el" data-bg="green" data-color="white">
<h1>3 element</h1>
</div>
<div class="s-theme-el" data-bg="teal" data-color="black">
<h1> 4rd element</h1>
</div>
<div class="s-theme-el" data-bg="yellow" data-color="purple">
<h1> 5th element</h1>
</div>
<div class="s-theme-el" data-bg="blue" data-color="white">
<h1> 6nd element</h1>
</div>
</div>
With this setup you can change background and text color only without changing any variable value
/*----
-- edit theme and css variables here
*/
//===========================================================================================
/* transition time ===*/ changeDefault('--transTime', 2+'s'); /*=== */
/* only one color==*/ changeDefault('--primary', 'teal'); /*=== */
/* multiple color==*/ let custumthem=['red', 'orange', 'yellow', 'green']; /*=== */
/* ===*/ /*=== */
/* ===*/ /*=== */
//=============================================================================
/*===============================do not change============= ======*/
if (custumthem !== '' || custumthem !== undefined || custumthem !== null) {
changrTheme();
}
function changrTheme() {
let defaultThem = ['--primary', '--secondary', '--info', '--danger', '--warning', '--dark', '--light']
for (let i = 0; i < custumthem.length; i++) {
for (let j = i; j <= i; j++) {
if (custumthem[i] === 'def') {
j++;
} else {
//get css root variable
window.getComputedStyle(document.documentElement)
.getPropertyValue(defaultThem[j])
//set css variable to given color
document.documentElement.style.setProperty(defaultThem[j], custumthem[i])
}
}
}
}
function changeDefault(elem, payload) {
window.getComputedStyle(document.documentElement).getPropertyValue(elem);
document.documentElement.style.setProperty(elem, payload)
let tru = window.getComputedStyle(document.documentElement).getPropertyValue(elem);
}