html rice preview
This commit is contained in:
Lennart J. Kurzweg (Nx2)
@@ -1,29 +1,106 @@
|
|||||||
{ config, pkgs, rice, ... }:
|
{ rice, ... }:
|
||||||
{
|
{
|
||||||
home.file.".config/color-pallet.txt".text = with rice.color; ''
|
home.file.".config/color-pallete.html".text = with rice.color; let
|
||||||
black: dark: ${black.dark}
|
cb = color-set: color-name: size: /* html */ ''
|
||||||
base: ${black.base}
|
<div class="color-container" style="border-color: ${color-set.base}">
|
||||||
bright: ${black.bright}
|
<div class="color-box" style="background: ${color-set.dark}; height: ${builtins.toString size}px;">
|
||||||
white: dark: ${white.dark}
|
<p style="color: ${color-set.bright}"> ${color-name}.dark </p>
|
||||||
base: ${white.base}
|
</div>
|
||||||
bright: ${white.bright}
|
<div class="color-box" style="background: ${color-set.base}; height: ${builtins.toString size}px;">
|
||||||
blue: dark: ${blue.dark}
|
<p class="dynamic-text"> ${color-name}.base </p>
|
||||||
base: ${blue.base}
|
</div>
|
||||||
bright: ${blue.bright}
|
<div class="color-box" style="background: ${color-set.bright}; height: ${builtins.toString size}px;">
|
||||||
magenta: dark: ${magenta.dark}
|
<p style="color: ${color-set.dark}"> ${color-name}.bright </p>
|
||||||
base: ${magenta.base}
|
</div>
|
||||||
bright: ${magenta.bright}
|
</div>
|
||||||
red: dark: ${red.dark}
|
'';
|
||||||
base: ${red.base}
|
|
||||||
bright: ${red.bright}
|
|
||||||
cyan: dark: ${cyan.dark}
|
in /* html */ ''
|
||||||
base: ${cyan.base}
|
<!DOCTYPE html>
|
||||||
bright: ${cyan.bright}
|
<head>
|
||||||
green: dark: ${green.dark}
|
<meta charset="UTF-8">
|
||||||
base: ${green.base}
|
<meta name="darkreader-lock">
|
||||||
bright: ${green.bright}
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
yellow: dark: ${yellow.dark}
|
<title>Color Pallete</title>
|
||||||
base: ${yellow.base}
|
<style>
|
||||||
bright: ${yellow.bright}
|
* {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
html {
|
||||||
|
background: rgba(${rice.lib.hex-to-rgb-comma-string background},${builtins.toString rice.transparency});
|
||||||
|
padding: auto;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: ${rice.font.base.name};
|
||||||
|
color: ${foreground};
|
||||||
|
width: fit-content;
|
||||||
|
margin: 10px auto 10px auto;
|
||||||
|
background: ${background};
|
||||||
|
border: ${builtins.toString rice.border-width}px solid ${border};
|
||||||
|
border-radius: ${builtins.toString rice.rounding}px;
|
||||||
|
padding: ${builtins.toString rice.gap-size}px;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
margin: ${builtins.toString rice.gap-size}px;
|
||||||
|
}
|
||||||
|
.color-container {
|
||||||
|
font-family: ${rice.font.code.name2};
|
||||||
|
display: flex;
|
||||||
|
gap: ${builtins.toString rice.gap-size}px;
|
||||||
|
margin: ${builtins.toString rice.gap-size}px;
|
||||||
|
}
|
||||||
|
.color-box {
|
||||||
|
width: 200px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: ${builtins.toString rice.rounding}px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1> Color Pallete </h1>
|
||||||
|
${cb accent "accent" 100}
|
||||||
|
${cb secondary "secondary" 100}
|
||||||
|
${cb tertiary "tertiary" 100}
|
||||||
|
${cb weird "weird" 75}
|
||||||
|
${cb special "special" 75}
|
||||||
|
${cb positive "positive" 30}
|
||||||
|
${cb negative "negative" 30}
|
||||||
|
${cb black "black" 25}
|
||||||
|
${cb white "white" 25}
|
||||||
|
${cb blue "blue" 25}
|
||||||
|
${cb cyan "cyan" 25}
|
||||||
|
${cb green "green" 25}
|
||||||
|
${cb magenta "magenta" 25}
|
||||||
|
${cb red "red" 25}
|
||||||
|
${cb yellow "yellow" 25}
|
||||||
|
</body>
|
||||||
|
<script>
|
||||||
|
function getLuminance(color) {
|
||||||
|
const rgb = color.match(/\w\w/g).map((c) => parseInt(c, 16));
|
||||||
|
const [r, g, b] = rgb.map((val) => {
|
||||||
|
const channel = val / 255;
|
||||||
|
return channel <= 0.03928 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4);
|
||||||
|
});
|
||||||
|
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
||||||
|
}
|
||||||
|
function setDynamicTextColor() {
|
||||||
|
const texts = document.getElementsByClassName("dynamic-text");
|
||||||
|
function ff(text) {
|
||||||
|
const backgroundColor = text.parentElement.style.backgroundColor;
|
||||||
|
const rgbValues = backgroundColor.match(/\d+/g).map(Number);
|
||||||
|
const hexColor = `#''${rgbValues.map(c => c.toString(16).padStart(2, '0')).join("")}`;
|
||||||
|
const luminance = getLuminance(hexColor);
|
||||||
|
text.style.color = luminance < 0.2 ? '${foreground}' : '${background}';
|
||||||
|
};
|
||||||
|
for (let id in texts) { ff(texts[id]); }
|
||||||
|
}
|
||||||
|
setDynamicTextColor();
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
'';
|
'';
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -331,9 +331,10 @@ lib.mkIf (user != "tv")
|
|||||||
# "SUPER, F4,"
|
# "SUPER, F4,"
|
||||||
"SUPER, F5, exec, nx_gcal_event force-lookup"
|
"SUPER, F5, exec, nx_gcal_event force-lookup"
|
||||||
"SUPER SHIFT, F5, exec, nx_gcal_event reauthenticate"
|
"SUPER SHIFT, F5, exec, nx_gcal_event reauthenticate"
|
||||||
# "SUPER, F6,"
|
"SUPER, F6, exec, kitty -e 'htop'"
|
||||||
''SUPER, F8, exec, find ~/Pictures/wallpapers/* -type f -not -path "~/Pictures/wallpapers/.git/*" | sort -R | head -n 1 | xargs swww img --transition-type wipe --transition-angle 60 --transition-step 120 --transition-fps 120''
|
''SUPER, F8, exec, find ~/Pictures/wallpapers/* -type f -not -path "~/Pictures/wallpapers/.git/*" | sort -R | head -n 1 | xargs swww img --transition-type wipe --transition-angle 60 --transition-step 120 --transition-fps 120''
|
||||||
"SUPER, F9, exec, change_colors_json $(swww query | sed -n 1p | sed -e 's-.*image: --g') && nh home switch"
|
''SUPER, F9, exec, kitty -e sh -c 'change_colors_json $(swww query | sed -n 1p | sed -e "s-.*image: --g") && nh home switch && firefox /home/${user}/.config/color-pallete.html' ''
|
||||||
|
''SUPER SHIFT, F9, exec, firefox /home/${user}/.config/color-pallete.html ''
|
||||||
# "SUPER, F10, hyprload,update"
|
# "SUPER, F10, hyprload,update"
|
||||||
"SUPER, F11, exec, waybar"
|
"SUPER, F11, exec, waybar"
|
||||||
"SUPER SHIFT, F11, exec, pkill waybar "
|
"SUPER SHIFT, F11, exec, pkill waybar "
|
||||||
|
|||||||
@@ -116,10 +116,7 @@ def extract_colors(
|
|||||||
|
|
||||||
return Palette(colors)
|
return Palette(colors)
|
||||||
if __name__ == "__main__":
|
if __name__ == "__main__":
|
||||||
try:
|
img = sys.argv[1]
|
||||||
img = sys.argv[1]
|
|
||||||
except IndexError:
|
|
||||||
img = "/home/nx2/Pictures/wallpapers/absolute-cinema-acid.png"
|
|
||||||
|
|
||||||
palette = extract_colors(image=img, palette_size=3)
|
palette = extract_colors(image=img, palette_size=3)
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user