49 lines
1.3 KiB
JavaScript
49 lines
1.3 KiB
JavaScript
import merge from "deepmerge";
|
|
import { renderTheme } from "./default.js";
|
|
|
|
export const colors = {
|
|
background: "#333",
|
|
backgroundActive: "#828282",
|
|
backgroundInactive: "#4d4d4d",
|
|
backgroundAlternate: "#555",
|
|
color: "#7094db",
|
|
colorActive: "#ecb1c5",
|
|
colorInactive: "#7d98d4",
|
|
colorAlternate: "#ecb1c5",
|
|
shadowColor: "#222",
|
|
borderColor: "#222",
|
|
borderColorActive: "silver",
|
|
borderColorInactive: "#7d98d4",
|
|
spinnerShadow: "#444",
|
|
spinnerHighlight: "#db7093",
|
|
cardFoldHighlight: "#091225",
|
|
cardFoldShadow: "#bdb19a",
|
|
selectColor: "#7094db"
|
|
};
|
|
|
|
const mapRange = (l, i, min, max) => Math.round((max - min) * ((l - i) / l) + min);
|
|
|
|
export const darkTheme = merge(renderTheme(colors), {
|
|
snakePart: {
|
|
boxShadow: "1px 1px 2px #888 inset, -1px -1px 2px #222 inset",
|
|
getColor(length, index, died) {
|
|
const hue = 220;
|
|
if (!died) {
|
|
const saturation = mapRange(length, index, 20, 65);
|
|
const brightness = 65;
|
|
return `hsl(${hue}, ${saturation}%, ${brightness}%)`;
|
|
}
|
|
const saturation = 0;
|
|
const brightness = mapRange(length, index, 70, 0);
|
|
return `hsl(${hue}, ${saturation}%, ${brightness}%)`;
|
|
}
|
|
},
|
|
stage: {
|
|
cell: {
|
|
boxShadow: "1px 1px 3px #191919 inset, -1px -1px 1px #777777 inset"
|
|
}
|
|
}
|
|
});
|
|
|
|
export default darkTheme;
|