Theme Generator
General Options
{inputText name="themeName" label="Theme Name" placeholder="My Theme"/} {inputSelect name="themeType" label="Theme Type" options="disabled:Select Option,!1:Dark Theme,2:Light Theme,3:Dark with light content,4:Light with dark parts"/} {inputSelect name="units" label="Units" options="!px:px,em:em,rem:rem"/}Color Options
Colors
{inputColor name="mainColor" label="Theme Color" placeholder="#XXXXXX" value="#465bb0"/} {inputColor name="secondaryColor" label="Secondary Theme Color" placeholder="#XXXXXX" value="#40A16F"/} {inputColor name="black1" label="Black" placeholder="#XXXXXX" value="#1D1D2A"/} {inputColor name="black2" label="Black Content" placeholder="#XXXXXX" value="#2E2E43"/} {inputColor name="white1" label="White" placeholder="#XXXXXX" value="#e7e5da"/} {inputColor name="white2" label="White Darker" placeholder="#XXXXXX" value="#ccccc1"/}
Measurements
Measures
{inputText name="borderWidth" label="Border Width" value="2"/} {inputText name="border1" label="Border Radius Small" value="4"/} {inputText name="border2" label="Border Radius Big" value="8"/} {inputText name="transition" label="Transition time in seconds" value="0.2"/} {inputText name="font" label="Font List" value="Ubuntu, Roboto, Oxygen, -apple-system, BlinkMacSystemFont, Segoe UI, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif"/}
Shadow Options
Shadows
Hover over the colors in the top left to test the shadows
{inputSwitch name="useShadow" label="Enable Shadows" onchange="document.querySelector('.shadow-options').open = this.checked" checked/}