Theme editor #184
svilenmarkov
started this conversation in
Guides and resources
Theme editor
#184
Replies: 2 comments
|
Added theme color randomization Background colors:
Primary colors:
View code(function() {
function newThemeEditor() {
const container = element({
style: {
position: 'fixed',
width: '100%',
maxWidth: '400px',
zIndex: 9999,
bottom: 0,
right: 0,
padding: 'var(--widget-content-padding)',
}
});
const {
themeProperties,
setIsLight,
setContrastMultiplier,
setTextSaturationMultiplier,
setBackgroundColor,
setPrimaryColor,
setPositiveColor,
setNegativeColor
} = newThemePropertiesManager();
const frame = element({ classes: 'widget-content-frame padding-widget', style: { boxShadow: '0 0 40px 10px var(--color-separator)' } });
const copyThemeButton = newButton('Copy theme config', () => {
const config = themePropertiesToConfig(themeProperties);
navigator.clipboard.writeText(config);
alert("Theme config copied to clipboard: \n\n" + config);
});
let clientX, clientY, offsetX, offsetY, movedX = 0, movedY = 0;
const handleMouseMove = (e) => {
offsetX = e.clientX - clientX + movedX;
offsetY = e.clientY - clientY + movedY;
frame.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
}
const moveFrameHandle = element({
style: {
backgroundImage: 'radial-gradient(var(--color-text-base) 2px, transparent 0)',
backgroundSize: '10px 7px',
width: '30px',
height: '22px',
cursor: 'move',
},
events: {
mousedown: (e) => {
clientX = e.clientX;
clientY = e.clientY;
window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('mouseup', () => {
movedX = offsetX;
movedY = offsetY;
window.removeEventListener('mousemove', handleMouseMove);
}, { once: true });
}
},
});
let manualIsLight = false;
const [isLightCheckbox, setIsLightCheckbox] = newCheckbox('Light scheme', themeProperties.isLight, (v) => {
manualIsLight = true;
setIsLight(v);
});
let positiveTiedToPrimary =
themeProperties.positiveColor[0] === themeProperties.primaryColor[0] &&
themeProperties.positiveColor[1] === themeProperties.primaryColor[1] &&
themeProperties.positiveColor[2] === themeProperties.primaryColor[2];
const [positiveColorPicker, setPositiveColorPicker] = newColorPicker('Positive color', themeProperties.positiveColor, (v) => {
positiveTiedToPrimary = false;
setPositiveColor(v);
});
const randomizeBackgroundButton = newButton('R', () => {
const randomColor = generateRandomHSLColor(false, themeProperties.isLight);
setBackgroundColor(randomColor);
if (!manualIsLight) {
const isLight = randomColor[2] > 65;
setIsLight(isLight);
setIsLightCheckbox(isLight);
}
});
const randomizePrimaryButton = newButton('R', () => {
const randomColor = generateRandomHSLColor(true);
setPrimaryColor(randomColor);
if (positiveTiedToPrimary) {
setPositiveColor(randomColor);
setPositiveColorPicker(randomColor);
}
});
frame.append(
horizontalContainer(
copyThemeButton,
moveFrameHandle,
),
spacer('2em', false),
isLightCheckbox,
spacer(),
newColorPicker('Background color', themeProperties.backgroundColor, (v) => {
setBackgroundColor(v);
if (!manualIsLight) {
const isLight = v[2] > 65;
setIsLight(isLight);
setIsLightCheckbox(isLight);
}
}, randomizeBackgroundButton)[0],
spacer(),
newColorPicker('Primary color', themeProperties.primaryColor, (v) => {
setPrimaryColor(v);
if (positiveTiedToPrimary) {
setPositiveColor(v);
setPositiveColorPicker(v);
}
}, randomizePrimaryButton)[0],
spacer(),
positiveColorPicker,
spacer(),
newColorPicker('Negative color', themeProperties.negativeColor, (v) => {
setNegativeColor(v);
})[0],
spacer(),
newSlider('Contrast multiplier', 0.3, 2, 0.1, themeProperties.contrastMultiplier, (v) => {
setContrastMultiplier(v);
}),
spacer(),
newSlider('Text saturation multiplier', 0.3, 5, 0.1, themeProperties.textSaturationMultiplier, (v) => {
setTextSaturationMultiplier(v);
}),
);
container.append(frame);
return container;
}
document.body.append(newThemeEditor());
function newThemePropertiesManager() {
const root = document.querySelector(':root');
const style = getComputedStyle(root);
let backgroundHue = parseFloat(style.getPropertyValue('--bgh'));
let [backgroundSaturation] = extractDigitsFromString(style.getPropertyValue('--bgs'));
let [backgroundLightness] = extractDigitsFromString(style.getPropertyValue('--bgl'));
const themeProperties = {
isLight: document.documentElement.classList.contains('light-scheme'),
backgroundColor: [backgroundHue, backgroundSaturation, backgroundLightness],
primaryColor: extractValuesFromHslString(style.getPropertyValue('--color-primary')),
positiveColor: extractValuesFromHslString(style.getPropertyValue('--color-positive')),
negativeColor: extractValuesFromHslString(style.getPropertyValue('--color-negative')),
contrastMultiplier: style.getPropertyValue('--cm'),
textSaturationMultiplier: style.getPropertyValue('--tsm'),
};
return {
themeProperties,
setIsLight: function (value) {
themeProperties.isLight = value;
if (value) {
document.documentElement.classList.add('light-scheme');
} else {
document.documentElement.classList.remove('light-scheme');
}
},
setBackgroundColor: function ([h, s, l]) {
themeProperties.backgroundColor = [h, s, l];
root.style.setProperty('--bgh', h);
root.style.setProperty('--bgs', s + "%");
root.style.setProperty('--bgl', l + "%");
},
setPrimaryColor: function (value) {
themeProperties.primaryColor = value;
root.style.setProperty('--color-primary', hslValuesToCSSString(value));
},
setPositiveColor: function (value) {
themeProperties.positiveColor = value;
root.style.setProperty('--color-positive', hslValuesToCSSString(value));
},
setNegativeColor: function (value) {
themeProperties.negativeColor = value;
root.style.setProperty('--color-negative', hslValuesToCSSString(value));
},
setContrastMultiplier: function (value) {
themeProperties.contrastMultiplier = value;
root.style.setProperty('--cm', value);
},
setTextSaturationMultiplier: function (value) {
themeProperties.textSaturationMultiplier = value
root.style.setProperty('--tsm', value);
},
};
}
function element({ tag = 'div', classes = null, style = null, attrs = null, events = null } = {}) {
const e = document.createElement(tag);
if (style !== null) applyStyle(e, style);
if (attrs !== null) Object.assign(e, attrs);
if (classes !== null) e.className = classes;
if (events !== null)
for (const [event, handler] of Object.entries(events))
e.addEventListener(event, handler);
return e;
}
function applyStyle(element, style) {
Object.assign(element.style, style);
return element;
}
function text(value) {
const node = document.createTextNode(value);
return [node, function (value) { node.textContent = value; }];
}
function horizontalContainer(...children) {
const container = element({ style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } });
container.append(...children);
return container;
}
function textInElement(value, e = null) {
if (e === null) e = element();
const [node, setValue] = text(value);
e.append(node);
return [e, setValue];
}
function newSlider(label, min, max, step, value, onChange) {
const container = element();
const [valueElement, setValueElement] = textInElement(value, element({ style: { color: 'var(--color-text-highlight)' } }));
const [labelElement] = textInElement(label);
const heading = horizontalContainer(labelElement, valueElement);
applyStyle(heading, { marginBottom: '.6em' });
const slider = element({
tag: 'input',
attrs: {
type: 'range',
min: min,
max: max,
step: step,
value: value,
},
style: {
width: '100%',
accentColor: 'var(--color-primary)',
},
events: {
input: (e) => {
setValueElement(e.target.value);
onChange(e.target.value);
},
},
});
container.append(heading, slider);
return container;
}
function newColorPicker(label, value, onChange, additionalElement = null) {
const [labelElement] = textInElement(label);
const colorPicker = element({
tag: 'input',
attrs: {
type: 'color',
value: hslToHex(value),
},
style: {
width: '70px',
height: '1.7em'
},
events: {
input: (e) => {
onChange(hexToHsl(e.target.value));
},
},
});
const labelContainer = element();
labelContainer.append(labelElement);
const rightSideContainer = element({ style: { display: 'flex', gap: '10px', alignItems: 'center' } });
if (additionalElement) {
rightSideContainer.append(additionalElement);
}
rightSideContainer.append(colorPicker);
return [
horizontalContainer(labelContainer, rightSideContainer),
function (value) { colorPicker.value = hslToHex(value); }
];
}
function newCheckbox(label, value, onChange) {
const [labelElement] = textInElement(label);
const checkbox = element({
tag: 'input',
attrs: {
type: 'checkbox',
checked: value,
},
events: {
change: (e) => {
onChange(e.target.checked);
},
},
});
return [
horizontalContainer(labelElement, checkbox),
function (value) { checkbox.checked = value; }
];
}
function spacer(amount, border = true) {
const e = element({ style: { marginBlock: amount || '0.8em' } });
if (border) applyStyle(e, { height: '1px', background: 'var(--color-separator)' });
return e;
}
function themePropertiesToConfig(themeProperties) {
return [
`light: ${themeProperties.isLight ? 'true' : 'false'}`,
`background-color: ${hslValuesToThemeString(themeProperties.backgroundColor)}`,
`primary-color: ${hslValuesToThemeString(themeProperties.primaryColor)}`,
`positive-color: ${hslValuesToThemeString(themeProperties.positiveColor)}`,
`negative-color: ${hslValuesToThemeString(themeProperties.negativeColor)}`,
`contrast-multiplier: ${themeProperties.contrastMultiplier}`,
`text-saturation-multiplier: ${themeProperties.textSaturationMultiplier}`,
].join('\n');
}
function newButton(label, onClick) {
const e = element({
tag: 'button',
events: {
click: (e) => onClick(e),
},
style: {
border: '1px solid var(--color-text-subdue)',
borderRadius: '5px',
padding: '0.1em 0.8em',
font: 'inherit',
background: 'none',
color: 'var(--color-text-base)',
textTransform: 'uppercase',
cursor: 'pointer',
fontSize: 'var(--font-size-h5)',
}
});
e.textContent = label;
return e;
}
function generateRandomHSLColor(forPrimary = false, isLight = true) {
const h = Math.floor(Math.random() * 360);
const s = forPrimary ?
Math.floor(Math.random() * 65) + 35 :
isLight ?
Math.floor(Math.random() * 30) + 10 :
Math.floor(Math.random() * 40) + 10;
let l;
if (forPrimary) {
l = Math.floor(Math.random() * 40) + 30;
} else if (isLight) {
l = Math.floor(Math.random() * 30) + 60;
} else {
l = Math.floor(Math.random() * 12) + 8;
}
return [h, s, l];
}
function hslValuesToThemeString([h, s, l]) {
return `${h} ${s} ${l}`;
}
function hslValuesToCSSString([h, s, l]) {
return `hsl(${h}, ${s}%, ${l}%)`;
}
function extractDigitsFromString(str) {
return str.match(/\d+(\.\d+)?/g).map(parseFloat);
}
function extractValuesFromHslString(hslString) {
const [h, s, l] = extractDigitsFromString(hslString);
return [h, s, l];
}
function hslToHex(value) {
let [h, s, l] = value;
l /= 100;
const a = s * Math.min(l, 1 - l) / 100;
const f = n => {
const k = (n + h / 30) % 12;
const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
return Math.round(255 * color).toString(16).padStart(2, '0');
};
return `#${f(0)}${f(8)}${f(4)}`;
}
function hexToHsl(H) {
let r = 0, g = 0, b = 0;
if (H.length == 4) {
r = "0x" + H[1] + H[1];
g = "0x" + H[2] + H[2];
b = "0x" + H[3] + H[3];
} else if (H.length == 7) {
r = "0x" + H[1] + H[2];
g = "0x" + H[3] + H[4];
b = "0x" + H[5] + H[6];
}
r /= 255;
g /= 255;
b /= 255;
let cmin = Math.min(r, g, b),
cmax = Math.max(r, g, b),
delta = cmax - cmin,
h = 0,
s = 0,
l = 0;
if (delta == 0)
h = 0;
else if (cmax == r)
h = ((g - b) / delta) % 6;
else if (cmax == g)
h = (b - r) / delta + 2;
else
h = (r - g) / delta + 4;
h = Math.round(h * 60);
if (h < 0)
h += 360;
l = (cmax + cmin) / 2;
s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
s = +(s * 100).toFixed(1);
l = +(l * 100).toFixed(1);
return [Math.round(h), Math.round(s), Math.round(l)];
}
})(); |
0 replies
|
Came here to say my thanks, playing with colors is much easier the way you put it. Instead it's maybe more convinient to just do console.log or alert so user can copy his theme manually and paste later instead of manipulating clipboard? Anyway, if someone has issues like this, just replace |
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
I quickly hacked together a theme editor that I don't currently plan on adding to Glance but wanted to share as a tool on the side that makes creating new themes much easier.
Preview
Demo
theme-picker-demo.mp4
Usage
Paste this hunk of code into your browser's console while having Glance open:
View code
Note: refreshing the page as well as navigating to another page removes the editor and all changes.
All reactions