First, add your CSS theme color code before you link the CSS-Framework. Secondly add "addthemecolor('yourcolorthemename');" in your js code.
CSS:
[yourcolorthemename] {
--Background: #181818;
--Primary: 187, 134, 252;
--Secondary: 3, 218, 198;
--OnBackground: 255, 255, 255;
--OnPrimary: 0, 0, 0;
--OnSecondary: 0, 0, 0;
--Popup: #FFFFFF;
--PopupLabel: 0, 0, 0;
--sliderthumbcolor: var(--Primary);
--hover: brightness(80%);
background-color: var(--Background);
color: rgba(var(--OnBackground),var(--High-emphasis));
}
JS:
addthemecolor('yourcolorthemename');
<select class="pointer" style="width: 100%;" onchange="themecolor(this.value)">
<option value="light" selected>light theme</option>
<option value="dark">dark theme</option>
<option value="blue">blue theme</option>
<option value="skin">skin theme</option>
<option value="greyish">greyish theme</option>
</select>
HTML:
<div class="custom-select" id="YourElementID">
<input type="hidden" onchange=">YourFunction(this.value)"/>
<select>
<option value="0">Select color:</option>
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Cyan</option>
<option value="4">Orange</option>
</select>
</div>
JS:
loadSelect("YourElementID",3); -> load option
<button onclick="flatswitch()">normal/flat Mode Switch</button>
<nav class="nav">
<a href="#" class="nav-item nav-item-active">Active</a>
<a href="#" class="nav-item">Inactive</a>
<a href="#" class="nav-item">Inactive</a>
<a href="#" class="nav-item nav-item-disabled">Disabled</a>
</nav>
<label class="container-checkbox" for="checkboxid">Checkbox:
<input type="checkbox" id="checkboxid" checked>
<span class="checkmark" style="margin-left: 0.6em;"></span>
</label>
<input list="datalistetest" id="inputid" name="inputname" style="width: 100%;" placeholder="Input Datalist.." disabled/>
<datalist id="datalistetest">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="search" name="nameinput" id="inputid" style="width: 100%;" placeholder="Search.."/>
<textarea style="height: 50px;" style="width: 100%;" placeholder="Input textarea.."></textarea>
<input type="search" name="nameinput" id="searchTable" style="width: 100%;" placeholder="Search table names.." onkeyup="tablesearchfilter()" onsearch="tablesearchfilter()" />
| Name | Test |
|---|---|
| Max Musterman | Yes |
| Bax Musterman | No |
| Sax Musterman | No |
<table id="customTable" class="pointer">
<thead>
<tr>
<th onclick="sortTable(0)">Name</th>
<th onclick="sortTable(1)">Test</th>
</tr>
</thead>
<tbody>
<tr>
<td>Max Musterman</td>
<td>Yes</td>
</tr>
<tr>
<td>Bax Musterman</td>
<td>Non</td>
</tr>
<tr>
<td>Sax Musterman</td>
<td>No</td>
</tr>
</tbody>
</table>
Description
<button class="collapsible">Collapsible</button>
<div class="collapsiblecontent">
<h1>Title</h1>
<p>Description</p>
</div>
<input type="file" name="file" id="file" class="inputfile" data-multiple-caption="{count} files selected" multiple/> <!-- data-multiple-caption="{count} files selected" multiple -->
<label for="file"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="48px" height="48px"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/></svg>
<span>Choose File</span>
</label>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
Do you want to quit?
<div class="card text-center">
<p>Do you want to quit?</p>
<button class="bcolor-quit bcolor-custom" style="margin-right: 0.5em;">quit</button>
<button class="bcolor-confirm bcolor-custom">stay</button>
</div>
Tell something?
<div class="card text-center">
<p>Tell something?</p>
<input type="search" name="nameinput" id="inputid" placeholder="Input.." style="width: 100%;margin-bottom: 1.4em;"/>
<button style="margin-right: 0.5em;">back</button>
<button class="bcolor-primary bcolor-custom">send</button>
</div>
The javascript code needs to be loaded before the Framework. When adding new taginput you need to add data in TagInputData for the element to work.
HTML:
<div name="tagname" class="tags-input" data-name="tags-input"></div>
JS:
var TagInputData = [
{
name: "tagPerson",
onlyfromData: true,
multipleData: false,
// removeTagformDataifUsed: false,
addData: ["01 Hello", "02 Lol", "02 Du","Kek"],
},
{
name: "tagPersonLol",
onlyfromData: false,
multipleData: true,
// removeTagformDataifUsed: false,
addData: ["Hello", "Du"],
}
];
HTML:
<div style="position: relative;padding: 0;">
<label for="progressslidername">Slider:</label><br>
<input id="progressslidername" type="range" min="0" max="100" step="0.01" value="10" class="slider"/>
<span class="slidertitle"></span>
</div>
<div style="position: relative;padding: 0;">
<label for="progressslidername2">Progress:</label><br>
<input id="progressslidername2" type="range" min="0" max="100" step="0.01" value="50" class="slider" disabled showvalue/>
<span class="slidertitle"></span>
</div>
JS:
SetProgressBar(elementid, newvalue);
SetProgressBarByTime(elementid, addvalue, interval, stopvalue);
SetProgressBarByTimeDecrease(elementid, minusvalue, interval, stopvalue);
DisableProgressBar(elementid);
ActiveProgressBar(elementid);
<div id="Dropdownbg" class="Dropdownbg"></div>
<button onclick="OpenDropdown(this)">Open Dropdown</button>
<div style="position: relative;">
<div class="dropdown-content">
<a href="#">Home</a>
<div>
<label style="cursor: pointer;" for="checkboxiddropdown">Checkbox</label>
<div class="container-checkbox">
<input type="checkbox" id="checkboxiddropdown" checked>
<span class="checkmark"></span>
</div>
</div>
<p>Test1</p>
<p>Test2</p>
</div>
</div>
<button onclick="OpenModal(this)">Open Modal</button>
<div class="modal">
<div class="modal-content">
<span onclick="CloseModal()" class="modal-close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>