This commit is contained in:
parent
246417a553
commit
155d47222e
SSH key fingerprint:
SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
20 changed files with 5172 additions and 4003 deletions
|
|
@ -1,90 +1,92 @@
|
|||
let can = document.createElement("canvas");
|
||||
let ctx = can.getContext('2d');
|
||||
let ctx = can.getContext("2d");
|
||||
let result;
|
||||
const downloadButton = document.querySelector('#download');
|
||||
const downloadButton = document.querySelector("#download");
|
||||
|
||||
function filterImage(svgDataUrl, width, height) {
|
||||
const filteredImage = new Image();
|
||||
const resultPreview = document.querySelector('#result_img')
|
||||
const filteredImage = new Image();
|
||||
const resultPreview = document.querySelector("#result_img");
|
||||
|
||||
can.width = width;
|
||||
can.height = height;
|
||||
can.width = width;
|
||||
can.height = height;
|
||||
|
||||
filteredImage.onload = function () {
|
||||
ctx.drawImage(filteredImage, 0, 0, width, height);
|
||||
result = can.toDataURL();
|
||||
downloadButton.disabled = false;
|
||||
resultPreview.src = result;
|
||||
};
|
||||
filteredImage.src = svgDataUrl;
|
||||
filteredImage.onload = function () {
|
||||
ctx.drawImage(filteredImage, 0, 0, width, height);
|
||||
result = can.toDataURL();
|
||||
downloadButton.disabled = false;
|
||||
resultPreview.src = result;
|
||||
};
|
||||
filteredImage.src = svgDataUrl;
|
||||
}
|
||||
|
||||
function loadImage(base64Image) {
|
||||
const sourceImage = new Image();
|
||||
const svg = document.querySelector('svg')
|
||||
const svgImage = svg.querySelector('image')
|
||||
const sourcePreview = document.querySelector('#source_img')
|
||||
let svgDataUrl;
|
||||
const sourceImage = new Image();
|
||||
const svg = document.querySelector("svg");
|
||||
const svgImage = svg.querySelector("image");
|
||||
const sourcePreview = document.querySelector("#source_img");
|
||||
let svgDataUrl;
|
||||
|
||||
sourceImage.onload = function () {
|
||||
let svgWidth = this.width;
|
||||
let svgHeight = this.height;
|
||||
sourceImage.onload = function () {
|
||||
let svgWidth = this.width;
|
||||
let svgHeight = this.height;
|
||||
|
||||
if (this.height > 1000) {
|
||||
svgHeight = 1000;
|
||||
svgWidth = 1000 * this.width / this.height;
|
||||
}
|
||||
if (this.height > 1000) {
|
||||
svgHeight = 1000;
|
||||
svgWidth = (1000 * this.width) / this.height;
|
||||
}
|
||||
|
||||
svg.setAttribute("height", svgHeight);
|
||||
svg.setAttribute("width", svgWidth);
|
||||
svg.setAttribute("height", svgHeight);
|
||||
svg.setAttribute("width", svgWidth);
|
||||
|
||||
let svgString = (new XMLSerializer).serializeToString(svg);
|
||||
svgDataUrl = 'data:image/svg+xml,' + encodeURIComponent(svgString);
|
||||
let svgString = new XMLSerializer().serializeToString(svg);
|
||||
svgDataUrl = "data:image/svg+xml," + encodeURIComponent(svgString);
|
||||
|
||||
filterImage(svgDataUrl, this.width, this.height);
|
||||
};
|
||||
sourceImage.src = svgImage.href.baseVal = sourcePreview.src = base64Image;
|
||||
filterImage(svgDataUrl, this.width, this.height);
|
||||
};
|
||||
sourceImage.src = svgImage.href.baseVal = sourcePreview.src = base64Image;
|
||||
}
|
||||
|
||||
|
||||
function handleFileSelect(e) {
|
||||
const files = e.target.files;
|
||||
if (!files || !files.length) return;
|
||||
const file = files[0];
|
||||
if (!file.type.match('image.*')) return;
|
||||
const files = e.target.files;
|
||||
if (!files || !files.length) return;
|
||||
const file = files[0];
|
||||
if (!file.type.match("image.*")) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = (readerEvent) => {
|
||||
loadImage(readerEvent.target.result);
|
||||
};
|
||||
reader.onload = (readerEvent) => {
|
||||
loadImage(readerEvent.target.result);
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
|
||||
document.querySelector('#file_input').addEventListener('change', handleFileSelect, false);
|
||||
document
|
||||
.querySelector("#file_input")
|
||||
.addEventListener("change", handleFileSelect, false);
|
||||
|
||||
function downloadURI(_uri, _name) {
|
||||
let link = document.createElement("a");
|
||||
link.download = 'distortedImageEH22.png';
|
||||
link.href = result;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
delete link;
|
||||
let link = document.createElement("a");
|
||||
link.download = "distortedImageEH22.png";
|
||||
link.href = result;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
delete link;
|
||||
}
|
||||
|
||||
downloadButton.addEventListener('click', downloadURI);
|
||||
downloadButton.addEventListener("click", downloadURI);
|
||||
|
||||
(async () => {
|
||||
let exampleImageBlob = await fetch("../assets/image/example_cat.jpg")
|
||||
.then(r => r.blob());
|
||||
let exampleImageBlob = await fetch("../assets/image/example_cat.jpg").then(
|
||||
(r) => r.blob(),
|
||||
);
|
||||
|
||||
let dataUrl = await new Promise(resolve => {
|
||||
let reader = new FileReader();
|
||||
reader.onload = () => resolve(reader.result);
|
||||
reader.readAsDataURL(exampleImageBlob);
|
||||
});
|
||||
let dataUrl = await new Promise((resolve) => {
|
||||
let reader = new FileReader();
|
||||
reader.onload = () => resolve(reader.result);
|
||||
reader.readAsDataURL(exampleImageBlob);
|
||||
});
|
||||
|
||||
loadImage(dataUrl);
|
||||
})()
|
||||
loadImage(dataUrl);
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -1,197 +1,229 @@
|
|||
const sizes = [
|
||||
"XXS", "XS", "S", "M", "L", "XL", "2XL", "3XL", "4XL", "5XL", "6XL"
|
||||
]
|
||||
"XXS",
|
||||
"XS",
|
||||
"S",
|
||||
"M",
|
||||
"L",
|
||||
"XL",
|
||||
"2XL",
|
||||
"3XL",
|
||||
"4XL",
|
||||
"5XL",
|
||||
"6XL",
|
||||
];
|
||||
|
||||
function selectCell(e) {
|
||||
const cell = e.target;
|
||||
const value = parseFloat(cell.dataset.val);
|
||||
const col = cell.dataset.col;
|
||||
const dimension = cell.dataset.dim;
|
||||
const cell = e.target;
|
||||
const value = parseFloat(cell.dataset.val);
|
||||
const col = cell.dataset.col;
|
||||
const dimension = cell.dataset.dim;
|
||||
|
||||
document.querySelectorAll('td.val:not(.empty)').forEach(match => {
|
||||
match.dataset.diff = '';
|
||||
match.classList.remove('highlighted')
|
||||
match.classList.remove('currentDimension')
|
||||
if (match.dataset.dim === dimension) {
|
||||
match.classList.add('currentDimension')
|
||||
const diff = parseFloat(match.dataset.val) - value;
|
||||
match.dataset.diff = diff > 0 ? `+${diff}` : diff;
|
||||
if (match.dataset.dim === 'A') match.style.cssText = `--custom-color: rgba(96, 165, 249, ${1 - Math.abs(diff) / 5})`
|
||||
if (match.dataset.dim === 'B') match.style.cssText = `--custom-color: rgba(211, 129, 247, ${1 - Math.abs(diff) / 5})`
|
||||
if (match.dataset.dim === 'C') match.style.cssText = `--custom-color: rgba(255, 121, 117, ${1 - Math.abs(diff) / 5})`
|
||||
}
|
||||
});
|
||||
document.querySelectorAll('td.dimension').forEach(match => {
|
||||
match.classList.remove('currentDimension');
|
||||
if (match.innerHTML === dimension) {
|
||||
match.classList.add('currentDimension');
|
||||
}
|
||||
});
|
||||
document.querySelectorAll("td.val:not(.empty)").forEach((match) => {
|
||||
match.dataset.diff = "";
|
||||
match.classList.remove("highlighted");
|
||||
match.classList.remove("currentDimension");
|
||||
if (match.dataset.dim === dimension) {
|
||||
match.classList.add("currentDimension");
|
||||
const diff = parseFloat(match.dataset.val) - value;
|
||||
match.dataset.diff = diff > 0 ? `+${diff}` : diff;
|
||||
if (match.dataset.dim === "A")
|
||||
match.style.cssText = `--custom-color: rgba(96, 165, 249, ${1 - Math.abs(diff) / 5})`;
|
||||
if (match.dataset.dim === "B")
|
||||
match.style.cssText = `--custom-color: rgba(211, 129, 247, ${1 - Math.abs(diff) / 5})`;
|
||||
if (match.dataset.dim === "C")
|
||||
match.style.cssText = `--custom-color: rgba(255, 121, 117, ${1 - Math.abs(diff) / 5})`;
|
||||
}
|
||||
});
|
||||
document.querySelectorAll("td.dimension").forEach((match) => {
|
||||
match.classList.remove("currentDimension");
|
||||
if (match.innerHTML === dimension) {
|
||||
match.classList.add("currentDimension");
|
||||
}
|
||||
});
|
||||
|
||||
cell.classList.add('highlighted')
|
||||
cell.classList.add("highlighted");
|
||||
}
|
||||
|
||||
function selectCellPlus(e) {
|
||||
e.stopPropagation();
|
||||
const cell = e.target;
|
||||
const group = cell.parentElement.parentElement;
|
||||
const col = cell.dataset.col;
|
||||
e.stopPropagation();
|
||||
const cell = e.target;
|
||||
const group = cell.parentElement.parentElement;
|
||||
const col = cell.dataset.col;
|
||||
|
||||
if (cell.classList.contains('highlighted') && !cell.classList.contains('currentDimension')) {
|
||||
selectCell(e);
|
||||
return;
|
||||
if (
|
||||
cell.classList.contains("highlighted") &&
|
||||
!cell.classList.contains("currentDimension")
|
||||
) {
|
||||
selectCell(e);
|
||||
return;
|
||||
}
|
||||
|
||||
const values = {};
|
||||
group.querySelectorAll(`td[data-col='${col}']`).forEach((match) => {
|
||||
values[match.dataset.dim] = parseFloat(match.dataset.val);
|
||||
});
|
||||
|
||||
document.querySelectorAll("td.val:not(.empty)").forEach((match) => {
|
||||
match.dataset.diff = "";
|
||||
match.classList.remove("highlighted");
|
||||
match.classList.remove("currentDimension");
|
||||
if (match.dataset.dim in values) {
|
||||
const diff = parseFloat(match.dataset.val) - values[match.dataset.dim];
|
||||
match.dataset.diff = diff > 0 ? `+${diff}` : diff;
|
||||
if (match.dataset.dim === "A")
|
||||
match.style.cssText = `--custom-color: rgba(96, 165, 249, ${1 - Math.abs(diff) / 5})`;
|
||||
if (match.dataset.dim === "B")
|
||||
match.style.cssText = `--custom-color: rgba(211, 129, 247, ${1 - Math.abs(diff) / 5})`;
|
||||
if (match.dataset.dim === "C")
|
||||
match.style.cssText = `--custom-color: rgba(255, 121, 117, ${1 - Math.abs(diff) / 5})`;
|
||||
}
|
||||
});
|
||||
document.querySelectorAll("td.dimension").forEach((match) => {
|
||||
match.classList.remove("currentDimension");
|
||||
});
|
||||
|
||||
const values = {}
|
||||
group.querySelectorAll(`td[data-col='${col}']`).forEach(match => {
|
||||
values[match.dataset.dim] = parseFloat(match.dataset.val);
|
||||
})
|
||||
|
||||
document.querySelectorAll('td.val:not(.empty)').forEach(match => {
|
||||
match.dataset.diff = '';
|
||||
match.classList.remove('highlighted')
|
||||
match.classList.remove('currentDimension')
|
||||
if (match.dataset.dim in values) {
|
||||
const diff = parseFloat(match.dataset.val) - values[match.dataset.dim];
|
||||
match.dataset.diff = diff > 0 ? `+${diff}` : diff;
|
||||
if (match.dataset.dim === 'A') match.style.cssText = `--custom-color: rgba(96, 165, 249, ${1 - Math.abs(diff) / 5})`
|
||||
if (match.dataset.dim === 'B') match.style.cssText = `--custom-color: rgba(211, 129, 247, ${1 - Math.abs(diff) / 5})`
|
||||
if (match.dataset.dim === 'C') match.style.cssText = `--custom-color: rgba(255, 121, 117, ${1 - Math.abs(diff) / 5})`
|
||||
}
|
||||
});
|
||||
document.querySelectorAll('td.dimension').forEach(match => {
|
||||
match.classList.remove('currentDimension');
|
||||
});
|
||||
|
||||
group.querySelectorAll(`td[data-col='${col}']`).forEach(match => {
|
||||
match.classList.add('highlighted')
|
||||
})
|
||||
|
||||
group.querySelectorAll(`td[data-col='${col}']`).forEach((match) => {
|
||||
match.classList.add("highlighted");
|
||||
});
|
||||
}
|
||||
|
||||
function hoverCell(e) {
|
||||
const cell = e.target;
|
||||
const group = cell.parentElement.parentElement;
|
||||
const col = cell.dataset.col;
|
||||
const dim = cell.dataset.dim;
|
||||
const cell = e.target;
|
||||
const group = cell.parentElement.parentElement;
|
||||
const col = cell.dataset.col;
|
||||
const dim = cell.dataset.dim;
|
||||
|
||||
hoverOff()
|
||||
document.querySelectorAll('table > thead > tr > th').forEach(match => {
|
||||
if (match.dataset.col === col) match.classList.add('hover')
|
||||
});
|
||||
group.querySelectorAll('td.dimension').forEach(match => {
|
||||
if (match.innerText === dim) match.classList.add('hover')
|
||||
});
|
||||
group.querySelectorAll('td:not(.dimension), th').forEach(match => {
|
||||
match.classList.add('hover')
|
||||
});
|
||||
hoverOff();
|
||||
document.querySelectorAll("table > thead > tr > th").forEach((match) => {
|
||||
if (match.dataset.col === col) match.classList.add("hover");
|
||||
});
|
||||
group.querySelectorAll("td.dimension").forEach((match) => {
|
||||
if (match.innerText === dim) match.classList.add("hover");
|
||||
});
|
||||
group.querySelectorAll("td:not(.dimension), th").forEach((match) => {
|
||||
match.classList.add("hover");
|
||||
});
|
||||
}
|
||||
|
||||
function hoverOff() {
|
||||
document.querySelectorAll('table > thead > tr > th').forEach(match => {
|
||||
match.classList.remove('hover')
|
||||
});
|
||||
document.querySelectorAll('td.dimension, td, th').forEach(match => {
|
||||
match.classList.remove('hover')
|
||||
});
|
||||
document.querySelectorAll("table > thead > tr > th").forEach((match) => {
|
||||
match.classList.remove("hover");
|
||||
});
|
||||
document.querySelectorAll("td.dimension, td, th").forEach((match) => {
|
||||
match.classList.remove("hover");
|
||||
});
|
||||
}
|
||||
|
||||
const typeList = new Set()
|
||||
const fitList = new Set()
|
||||
const typeList = new Set();
|
||||
const fitList = new Set();
|
||||
|
||||
document.querySelectorAll('tbody').forEach(tbody => {
|
||||
if (tbody.dataset.from) {
|
||||
const source = document.querySelector(`tbody#${tbody.dataset.from}`)
|
||||
if (!source) {
|
||||
console.log(`tbody with ID '${tbody.dataset.from}' not found.`);
|
||||
return;
|
||||
}
|
||||
|
||||
const name = tbody.querySelector('tr th').innerHTML;
|
||||
tbody.replaceChildren()
|
||||
tbody.insertAdjacentHTML("afterbegin", source.innerHTML)
|
||||
tbody.querySelector('tr th').innerHTML = name;
|
||||
delete tbody.dataset.from;
|
||||
tbody.dataset.type = source.dataset.type;
|
||||
tbody.dataset.fit = source.dataset.fit;
|
||||
document.querySelectorAll("tbody").forEach((tbody) => {
|
||||
if (tbody.dataset.from) {
|
||||
const source = document.querySelector(`tbody#${tbody.dataset.from}`);
|
||||
if (!source) {
|
||||
console.log(`tbody with ID '${tbody.dataset.from}' not found.`);
|
||||
return;
|
||||
}
|
||||
|
||||
typeList.add(tbody.dataset.type);
|
||||
fitList.add(tbody.dataset.fit);
|
||||
const name = tbody.querySelector("tr th").innerHTML;
|
||||
tbody.replaceChildren();
|
||||
tbody.insertAdjacentHTML("afterbegin", source.innerHTML);
|
||||
tbody.querySelector("tr th").innerHTML = name;
|
||||
delete tbody.dataset.from;
|
||||
tbody.dataset.type = source.dataset.type;
|
||||
tbody.dataset.fit = source.dataset.fit;
|
||||
}
|
||||
|
||||
typeList.add(tbody.dataset.type);
|
||||
fitList.add(tbody.dataset.fit);
|
||||
});
|
||||
|
||||
// build filter
|
||||
const filterTypeElement = document.querySelector('#filterType');
|
||||
typeList.forEach(type => {
|
||||
filterTypeElement.insertAdjacentHTML('beforeend', `<label>
|
||||
const filterTypeElement = document.querySelector("#filterType");
|
||||
typeList.forEach((type) => {
|
||||
filterTypeElement.insertAdjacentHTML(
|
||||
"beforeend",
|
||||
`<label>
|
||||
<input type="checkbox" value="${type}" checked>
|
||||
${type}
|
||||
</label>`)
|
||||
})
|
||||
const filterFitElement = document.querySelector('#filterFit');
|
||||
fitList.forEach(fit => {
|
||||
filterFitElement.insertAdjacentHTML('beforeend', `<label>
|
||||
</label>`,
|
||||
);
|
||||
});
|
||||
const filterFitElement = document.querySelector("#filterFit");
|
||||
fitList.forEach((fit) => {
|
||||
filterFitElement.insertAdjacentHTML(
|
||||
"beforeend",
|
||||
`<label>
|
||||
<input type="checkbox" value="${fit}" checked>
|
||||
${fit}
|
||||
</label>`)
|
||||
})
|
||||
</label>`,
|
||||
);
|
||||
});
|
||||
|
||||
const filterType = new Set(typeList);
|
||||
const filterFit = new Set(fitList);
|
||||
|
||||
function filter() {
|
||||
document.querySelectorAll(`tbody`).forEach(match => {
|
||||
match.classList.toggle('filtered', !filterType.has(match.dataset.type) || !filterFit.has(match.dataset.fit));
|
||||
})
|
||||
document.querySelectorAll(`tbody`).forEach((match) => {
|
||||
match.classList.toggle(
|
||||
"filtered",
|
||||
!filterType.has(match.dataset.type) || !filterFit.has(match.dataset.fit),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
filterTypeElement.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
|
||||
checkbox.addEventListener('change', (e) => {
|
||||
if (checkbox.checked) {
|
||||
filterType.add(checkbox.value)
|
||||
} else {
|
||||
filterType.delete(checkbox.value)
|
||||
}
|
||||
filter();
|
||||
filterTypeElement
|
||||
.querySelectorAll('input[type="checkbox"]')
|
||||
.forEach((checkbox) => {
|
||||
checkbox.addEventListener("change", (e) => {
|
||||
if (checkbox.checked) {
|
||||
filterType.add(checkbox.value);
|
||||
} else {
|
||||
filterType.delete(checkbox.value);
|
||||
}
|
||||
filter();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
filterFitElement.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
|
||||
checkbox.addEventListener('change', (e) => {
|
||||
if (checkbox.checked) {
|
||||
filterFit.add(checkbox.value)
|
||||
} else {
|
||||
filterFit.delete(checkbox.value)
|
||||
}
|
||||
filterFitElement
|
||||
.querySelectorAll('input[type="checkbox"]')
|
||||
.forEach((checkbox) => {
|
||||
checkbox.addEventListener("change", (e) => {
|
||||
if (checkbox.checked) {
|
||||
filterFit.add(checkbox.value);
|
||||
} else {
|
||||
filterFit.delete(checkbox.value);
|
||||
}
|
||||
|
||||
filter();
|
||||
filter();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('td.val').forEach(cell => {
|
||||
const rowTitle = cell.parentElement.querySelector('th');
|
||||
cell.dataset.col = sizes[rowTitle !== null ? cell.cellIndex - 4 : cell.cellIndex - 1];
|
||||
cell.addEventListener('pointerenter', hoverCell);
|
||||
cell.addEventListener('pointerleave', hoverOff);
|
||||
document.querySelectorAll("td.val").forEach((cell) => {
|
||||
const rowTitle = cell.parentElement.querySelector("th");
|
||||
cell.dataset.col =
|
||||
sizes[rowTitle !== null ? cell.cellIndex - 4 : cell.cellIndex - 1];
|
||||
cell.addEventListener("pointerenter", hoverCell);
|
||||
cell.addEventListener("pointerleave", hoverOff);
|
||||
});
|
||||
|
||||
// initialize table
|
||||
document.querySelectorAll('td.val:not(.empty)').forEach(cell => {
|
||||
cell.dataset.val = cell.innerText;
|
||||
cell.dataset.diff = '';
|
||||
cell.dataset.dim = cell.parentElement.querySelector('td.dimension').innerHTML;
|
||||
document.querySelectorAll("td.val:not(.empty)").forEach((cell) => {
|
||||
cell.dataset.val = cell.innerText;
|
||||
cell.dataset.diff = "";
|
||||
cell.dataset.dim = cell.parentElement.querySelector("td.dimension").innerHTML;
|
||||
|
||||
cell.addEventListener('click', selectCellPlus);
|
||||
cell.addEventListener("click", selectCellPlus);
|
||||
});
|
||||
|
||||
// disable select on click outside value cell
|
||||
document.addEventListener('click', e => {
|
||||
document.querySelectorAll('td.val:not(.empty)').forEach(match => {
|
||||
match.dataset.diff = '';
|
||||
match.classList.remove('highlighted')
|
||||
match.classList.remove('currentDimension')
|
||||
});
|
||||
document.querySelectorAll('td.dimension').forEach(match => {
|
||||
match.classList.remove('currentDimension');
|
||||
});
|
||||
});
|
||||
document.addEventListener("click", (e) => {
|
||||
document.querySelectorAll("td.val:not(.empty)").forEach((match) => {
|
||||
match.dataset.diff = "";
|
||||
match.classList.remove("highlighted");
|
||||
match.classList.remove("currentDimension");
|
||||
});
|
||||
document.querySelectorAll("td.dimension").forEach((match) => {
|
||||
match.classList.remove("currentDimension");
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,19 +1,18 @@
|
|||
document.querySelector('nav > button')?.addEventListener('click', (e) => {
|
||||
document.querySelector('nav').classList.toggle('visible');
|
||||
})
|
||||
document.querySelector("nav > button")?.addEventListener("click", (e) => {
|
||||
document.querySelector("nav").classList.toggle("visible");
|
||||
});
|
||||
|
||||
document.querySelectorAll('.toggleTheme')?.forEach(
|
||||
element => element.addEventListener('click', (e) => {
|
||||
const newTheme = element.dataset.theme;
|
||||
applyTheme(newTheme);
|
||||
}
|
||||
)
|
||||
document.querySelectorAll(".toggleTheme")?.forEach((element) =>
|
||||
element.addEventListener("click", (e) => {
|
||||
const newTheme = element.dataset.theme;
|
||||
applyTheme(newTheme);
|
||||
}),
|
||||
);
|
||||
|
||||
document.querySelector('#themeDark').addEventListener('change', (e) => {
|
||||
setTheme(e.target.checked ? 'dark' : 'system');
|
||||
})
|
||||
document.querySelector("#themeDark").addEventListener("change", (e) => {
|
||||
setTheme(e.target.checked ? "dark" : "system");
|
||||
});
|
||||
|
||||
document.querySelector('#themeLight').addEventListener('change', (e) => {
|
||||
setTheme(e.target.checked ? 'light' : 'system');
|
||||
})
|
||||
document.querySelector("#themeLight").addEventListener("change", (e) => {
|
||||
setTheme(e.target.checked ? "light" : "system");
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue