Themes using Javascript

Aliveforms allows users to modify theme using JavaScript and customize elements of interface via themes. There are multiple ways to do that.

Using JavaScript API

In Aliveforms, $.SetStyle function can be used to update css properties.

Sample on screen -1 add following logic:

Screen Index -1

    $.SetStyle("stage-blur", "4px");
    $.SetStyle("primary-bg", "#fff");

Properties

$.SetStyle

Purpose Set CSS variable values

Arguments 2, both required string: variable string: value

Returns none

List of variables

body-background-color

body-background-image

body-background-repeat

body-background-size

body-background-style

body-color

border-active-color

border-color

border-radius

font-normal

font-title

option-active-bg

option-active-fg

option-bg

option-fg

primary-bg

primary-fg

secondary-bg

secondary-fg

stage-background

stage-blur

Hacking CSS

Using vanilla JavaScript, users can apply custom CSS

var styleSheets = document.styleSheets;

for (var i = 0; i < styleSheets.length; i++) {
  var sheet = styleSheets[i];
  var rules = sheet.cssRules || sheet.rules;

  for (var j = 0; j < rules.length; j++) {
    var rule = rules[j];

    if (rule.selectorText === '.form_wrapper') {
      rule.style.removeProperty('flex');
      rule.style.setProperty('min-height', '60vh');
      rule.style.setProperty('border', '2px solid white');

      break;
    }
  }
}

setTimeout(function() {
// JavaScript snippet to create an animated gradient background with vibrant colors
const body = document.body;

// Define the vibrant colors and animation duration
const vibrantColors = [
  '#FF007F', // Bright Pink
  '#00FF7F', // Spring Green
  '#7FFF00', // Chartreuse
  '#FF7F00', // Dark Orange
  '#00FFFE', // Cyan
  '#FF00FF', // Magenta
]; // You can add or remove vibrant colors as desired
const animationDuration = '10s';

// Generate the gradient CSS string
const gradient = `linear-gradient(45deg, ${vibrantColors.join(', ')})`;

// Apply the gradient and animation to the body element
body.style.margin = '0';
body.style.padding = '0';
body.style.height = '100vh';
body.style.background = gradient;
body.style.backgroundSize = '400% 400%';
body.style.animation = `gradientAnimation ${animationDuration} ease infinite`;

// Define the keyframes animation for the gradient
const styleSheet = document.styleSheets[0];
styleSheet.insertRule(`
  @keyframes gradientAnimation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
`, styleSheet.cssRules.length);

}, 500)

Using 3D Background with Vanta

Here is sample code that rendered 3D background using VantaJS.

Applied on Screen `-1`

Applied on Screen Index -1

$.ImportScript("https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js", function() {
  $.ImportScript("https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js", function() {
    VANTA.BIRDS({
      el: document.body,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      scale: 1.00,
      scaleMobile: 1.00,
      backgroundColor: 0xffffff,
      birdSize: 1.30
    })
  })  
})

Updating DOM on user input change

Here is sample code that updates image when input from user is changed.

Applied on screen `-1`

const img_prince = "https://aliveforms.com/gallery/aliveforms/prince65ca3aaf3e57e.webp";
const img_tekken = "https://aliveforms.com/gallery/aliveforms/jin65ca3aaf3e73f.webp";

const imgs = [
  img_tekken,
  img_prince,
];

const imgEl = document.createElement('img');

window.screen_0_input_change = function() {
  let current_input = inputs[0];
  if (current_input == 0) {
    imgEl.style.top = "";
    imgEl.style.bottom = 0;
  } else {
    imgEl.style.bottom = "";
    imgEl.style.top = "10%"; 
  }
  imgEl.src = imgs[inputs[0]]
}

imgEl.style.position = "absolute";
imgEl.style.left = 0;
imgEl.style.width = "70%"
imgEl.style.maxWidth = "200px";
imgEl.style.zIndex = -1;
imgEl.style.transition = "all 0.5s linear";

setTimeout(function() {
  (document.querySelector('.form_wrapper')).append(imgEl)
}, 1400)