mirror of
https://github.com/danth/stylix
synced 2024-11-25 13:40:22 +00:00
rofi: allow theme customizability (#230)
This commit is contained in:
Ivan
GitHub
parent
606a7983a0
commit
81de262bf1
2 changed files with 128 additions and 130 deletions
|
|
@ -1,22 +1,20 @@
|
||||||
{ pkgs, config, lib, ... }:
|
{ config, lib, ... }:
|
||||||
|
|
||||||
with config.stylix.fonts;
|
with config.stylix.fonts;
|
||||||
|
|
||||||
let
|
let
|
||||||
|
inherit (config.lib.formats.rasi) mkLiteral;
|
||||||
|
mkRgba = opacity: color:
|
||||||
|
let
|
||||||
|
c = config.lib.stylix.colors;
|
||||||
|
r = c."${color}-rgb-r";
|
||||||
|
g = c."${color}-rgb-g";
|
||||||
|
b = c."${color}-rgb-b";
|
||||||
|
in
|
||||||
|
mkLiteral
|
||||||
|
"rgba ( ${r}, ${g}, ${b}, ${opacity} % )";
|
||||||
|
mkRgb = mkRgba "100";
|
||||||
rofiOpacity = builtins.toString (builtins.ceil (config.stylix.opacity.popups * 100));
|
rofiOpacity = builtins.toString (builtins.ceil (config.stylix.opacity.popups * 100));
|
||||||
finalString = ''
|
|
||||||
* { background: rgba ( {{base00-rgb-r}}, {{base00-rgb-g}}, {{base00-rgb-b}}, ${rofiOpacity} % );
|
|
||||||
lightbg: rgba ( {{base01-rgb-r}}, {{base01-rgb-g}}, {{base01-rgb-b}}, ${rofiOpacity} % );
|
|
||||||
red: rgba ( {{base08-rgb-r}}, {{base08-rgb-g}}, {{base08-rgb-b}}, ${rofiOpacity} % );
|
|
||||||
blue: rgba ( {{base0D-rgb-r}}, {{base0D-rgb-g}}, {{base0D-rgb-b}}, ${rofiOpacity} % );
|
|
||||||
lightfg: rgba ( {{base06-rgb-r}}, {{base06-rgb-g}}, {{base06-rgb-b}}, ${rofiOpacity} % );
|
|
||||||
foreground: rgba ( {{base05-rgb-r}}, {{base05-rgb-g}}, {{base05-rgb-b}}, ${rofiOpacity} % );
|
|
||||||
}
|
|
||||||
'' + builtins.toString (builtins.readFile ./template.mustache);
|
|
||||||
finalFile = config.lib.stylix.colors {
|
|
||||||
template = finalString;
|
|
||||||
extension = ".rasi";
|
|
||||||
};
|
|
||||||
in
|
in
|
||||||
{
|
{
|
||||||
options.stylix.targets.rofi.enable =
|
options.stylix.targets.rofi.enable =
|
||||||
|
|
@ -25,7 +23,122 @@ in
|
||||||
config = lib.mkIf config.stylix.targets.rofi.enable {
|
config = lib.mkIf config.stylix.targets.rofi.enable {
|
||||||
programs.rofi = {
|
programs.rofi = {
|
||||||
font = "${monospace.name} ${toString sizes.popups}";
|
font = "${monospace.name} ${toString sizes.popups}";
|
||||||
theme = finalFile;
|
theme = {
|
||||||
|
"*" = {
|
||||||
|
background = mkRgba rofiOpacity "base00";
|
||||||
|
lightbg = mkRgba rofiOpacity "base01";
|
||||||
|
red = mkRgba rofiOpacity "base08";
|
||||||
|
blue = mkRgba rofiOpacity "base0D";
|
||||||
|
lightfg = mkRgba rofiOpacity "base06";
|
||||||
|
foreground = mkRgba rofiOpacity "base05";
|
||||||
|
|
||||||
|
background-color = mkRgb "base00";
|
||||||
|
separatorcolor = mkLiteral "@foreground";
|
||||||
|
border-color = mkLiteral "@foreground";
|
||||||
|
selected-normal-foreground = mkLiteral "@lightbg";
|
||||||
|
selected-normal-background = mkLiteral "@lightfg";
|
||||||
|
selected-active-foreground = mkLiteral "@background";
|
||||||
|
selected-active-background = mkLiteral "@blue";
|
||||||
|
selected-urgent-foreground = mkLiteral "@background";
|
||||||
|
selected-urgent-background = mkLiteral "@red";
|
||||||
|
normal-foreground = mkLiteral "@foreground";
|
||||||
|
normal-background = mkLiteral "@background";
|
||||||
|
active-foreground = mkLiteral "@blue";
|
||||||
|
active-background = mkLiteral "@background";
|
||||||
|
urgent-foreground = mkLiteral "@red";
|
||||||
|
urgent-background = mkLiteral "@background";
|
||||||
|
alternate-normal-foreground = mkLiteral "@foreground";
|
||||||
|
alternate-normal-background = mkLiteral "@lightbg";
|
||||||
|
alternate-active-foreground = mkLiteral "@blue";
|
||||||
|
alternate-active-background = mkLiteral "@lightbg";
|
||||||
|
alternate-urgent-foreground = mkLiteral "@red";
|
||||||
|
alternate-urgent-background = mkLiteral "@lightbg";
|
||||||
|
|
||||||
|
# Text Colors
|
||||||
|
base-text = mkRgb "base05";
|
||||||
|
selected-normal-text = mkRgb "base01";
|
||||||
|
selected-active-text = mkRgb "base00";
|
||||||
|
selected-urgent-text = mkRgb "base00";
|
||||||
|
normal-text = mkRgb "base05";
|
||||||
|
active-text = mkRgb "base0D";
|
||||||
|
urgent-text = mkRgb "base08";
|
||||||
|
alternate-normal-text = mkRgb "base05";
|
||||||
|
alternate-active-text = mkRgb "base0D";
|
||||||
|
alternate-urgent-text = mkRgb "base08";
|
||||||
|
};
|
||||||
|
|
||||||
|
window.background-color = mkLiteral "@background";
|
||||||
|
|
||||||
|
message.border-color = mkLiteral "@separatorcolor";
|
||||||
|
|
||||||
|
textbox.text-color = mkLiteral "@base-text";
|
||||||
|
|
||||||
|
listview.border-color = mkLiteral "@separatorcolor";
|
||||||
|
|
||||||
|
element-text = {
|
||||||
|
background-color = mkLiteral "inherit";
|
||||||
|
text-color = mkLiteral "inherit";
|
||||||
|
};
|
||||||
|
|
||||||
|
element-icon = {
|
||||||
|
background-color = mkLiteral "inherit";
|
||||||
|
text-color = mkLiteral "inherit";
|
||||||
|
};
|
||||||
|
|
||||||
|
"element normal.normal" = {
|
||||||
|
background-color = mkLiteral "@normal-background";
|
||||||
|
text-color = mkLiteral "@normal-text";
|
||||||
|
};
|
||||||
|
"element normal.urgent" = {
|
||||||
|
background-color = mkLiteral "@urgent-background";
|
||||||
|
text-color = mkLiteral "@urgent-text";
|
||||||
|
};
|
||||||
|
"element normal.active" = {
|
||||||
|
background-color = mkLiteral "@active-background";
|
||||||
|
text-color = mkLiteral "@active-text";
|
||||||
|
};
|
||||||
|
|
||||||
|
"element selected.normal" = {
|
||||||
|
background-color = mkLiteral "@selected-normal-background";
|
||||||
|
text-color = mkLiteral "@selected-normal-text";
|
||||||
|
};
|
||||||
|
"element selected.urgent" = {
|
||||||
|
background-color = mkLiteral "@selected-urgent-background";
|
||||||
|
text-color = mkLiteral "@selected-urgent-text";
|
||||||
|
};
|
||||||
|
"element selected.active" = {
|
||||||
|
background-color = mkLiteral "@selected-active-background";
|
||||||
|
text-color = mkLiteral "@selected-active-text";
|
||||||
|
};
|
||||||
|
|
||||||
|
"element alternate.normal" = {
|
||||||
|
background-color = mkLiteral "@alternate-normal-background";
|
||||||
|
text-color = mkLiteral "@alternate-normal-text";
|
||||||
|
};
|
||||||
|
"element alternate.urgent" = {
|
||||||
|
background-color = mkLiteral "@alternate-urgent-background";
|
||||||
|
text-color = mkLiteral "@alternate-urgent-text";
|
||||||
|
};
|
||||||
|
"element alternate.active" = {
|
||||||
|
background-color = mkLiteral "@alternate-active-background";
|
||||||
|
text-color = mkLiteral "@alternate-active-text";
|
||||||
|
};
|
||||||
|
|
||||||
|
scrollbar.handle-color = mkLiteral "@normal-foreground";
|
||||||
|
sidebar.border-color = mkLiteral "@separatorcolor";
|
||||||
|
button.text-color = mkLiteral "@normal-text";
|
||||||
|
"button selected" = {
|
||||||
|
background-color = mkLiteral "@selected-normal-background";
|
||||||
|
text-color = mkLiteral "@selected-normal-text";
|
||||||
|
};
|
||||||
|
|
||||||
|
inputbar.text-color = mkLiteral "@normal-text";
|
||||||
|
case-indicator.text-color = mkLiteral "@normal-text";
|
||||||
|
entry.text-color = mkLiteral "@normal-text";
|
||||||
|
prompt.text-color = mkLiteral "@normal-text";
|
||||||
|
|
||||||
|
textbox-prompt-colon.text-color = mkLiteral "inherit";
|
||||||
|
};
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,115 +0,0 @@
|
||||||
* {
|
|
||||||
background-color: rgba ( {{base00-rgb-r}}, {{base00-rgb-g}}, {{base00-rgb-b}}, 0 % );
|
|
||||||
separatorcolor: @foreground;
|
|
||||||
border-color: @foreground;
|
|
||||||
selected-normal-foreground: @lightbg;
|
|
||||||
selected-normal-background: @lightfg;
|
|
||||||
selected-active-foreground: @background;
|
|
||||||
selected-active-background: @blue;
|
|
||||||
selected-urgent-foreground: @background;
|
|
||||||
selected-urgent-background: @red;
|
|
||||||
normal-foreground: @foreground;
|
|
||||||
normal-background: @background;
|
|
||||||
active-foreground: @blue;
|
|
||||||
active-background: @background;
|
|
||||||
urgent-foreground: @red;
|
|
||||||
urgent-background: @background;
|
|
||||||
alternate-normal-foreground: @foreground;
|
|
||||||
alternate-normal-background: @lightbg;
|
|
||||||
alternate-active-foreground: @blue;
|
|
||||||
alternate-active-background: @lightbg;
|
|
||||||
alternate-urgent-foreground: @red;
|
|
||||||
alternate-urgent-background: @lightbg;
|
|
||||||
|
|
||||||
/* Text Colors */
|
|
||||||
base-text: rgba ( {{base05-rgb-r}}, {{base05-rgb-g}}, {{base05-rgb-b}}, 100 % );
|
|
||||||
selected-normal-text: rgba ( {{base01-rgb-r}}, {{base01-rgb-g}}, {{base01-rgb-b}}, 100 % );
|
|
||||||
selected-active-text: rgba ( {{base00-rgb-r}}, {{base00-rgb-g}}, {{base00-rgb-b}}, 100 % );
|
|
||||||
selected-urgent-text: rgba ( {{base00-rgb-r}}, {{base00-rgb-g}}, {{base00-rgb-b}}, 100 % );
|
|
||||||
normal-text: rgba ( {{base05-rgb-r}}, {{base05-rgb-g}}, {{base05-rgb-b}}, 100 % );
|
|
||||||
active-text: rgba ( {{base0D-rgb-r}}, {{base0D-rgb-g}}, {{base0D-rgb-b}}, 100 % );
|
|
||||||
urgent-text: rgba ( {{base08-rgb-r}}, {{base08-rgb-g}}, {{base08-rgb-b}}, 100 % );
|
|
||||||
alternate-normal-text: rgba ( {{base05-rgb-r}}, {{base05-rgb-g}}, {{base05-rgb-b}}, 100 % );
|
|
||||||
alternate-active-text: rgba ( {{base0D-rgb-r}}, {{base0D-rgb-g}}, {{base0D-rgb-b}}, 100 % );
|
|
||||||
alternate-urgent-text: rgba ( {{base08-rgb-r}}, {{base08-rgb-g}}, {{base08-rgb-b}}, 100 % );
|
|
||||||
}
|
|
||||||
window {
|
|
||||||
background-color: @background;
|
|
||||||
}
|
|
||||||
message {
|
|
||||||
border-color: @separatorcolor;
|
|
||||||
}
|
|
||||||
textbox {
|
|
||||||
text-color: @base-text;
|
|
||||||
}
|
|
||||||
listview {
|
|
||||||
border-color: @separatorcolor;
|
|
||||||
}
|
|
||||||
element-text, element-icon {
|
|
||||||
background-color: inherit;
|
|
||||||
text-color: inherit;
|
|
||||||
}
|
|
||||||
element normal.normal {
|
|
||||||
background-color: @normal-background;
|
|
||||||
text-color: @normal-text;
|
|
||||||
}
|
|
||||||
element normal.urgent {
|
|
||||||
background-color: @urgent-background;
|
|
||||||
text-color: @urgent-text;
|
|
||||||
}
|
|
||||||
element normal.active {
|
|
||||||
background-color: @active-background;
|
|
||||||
text-color: @active-text;
|
|
||||||
}
|
|
||||||
element selected.normal {
|
|
||||||
background-color: @selected-normal-background;
|
|
||||||
text-color: @selected-normal-text;
|
|
||||||
}
|
|
||||||
element selected.urgent {
|
|
||||||
background-color: @selected-urgent-background;
|
|
||||||
text-color: @selected-urgent-text;
|
|
||||||
}
|
|
||||||
element selected.active {
|
|
||||||
background-color: @selected-active-background;
|
|
||||||
text-color: @selected-active-text;
|
|
||||||
}
|
|
||||||
element alternate.normal {
|
|
||||||
background-color: @alternate-normal-background;
|
|
||||||
text-color: @alternate-normal-text;
|
|
||||||
}
|
|
||||||
element alternate.urgent {
|
|
||||||
background-color: @alternate-urgent-background;
|
|
||||||
text-color: @alternate-urgent-text;
|
|
||||||
}
|
|
||||||
element alternate.active {
|
|
||||||
background-color: @alternate-active-background;
|
|
||||||
text-color: @alternate-active-text;
|
|
||||||
}
|
|
||||||
scrollbar {
|
|
||||||
handle-color: @normal-foreground;
|
|
||||||
}
|
|
||||||
sidebar {
|
|
||||||
border-color: @separatorcolor;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
text-color: @normal-text;
|
|
||||||
}
|
|
||||||
button selected {
|
|
||||||
background-color: @selected-normal-background;
|
|
||||||
text-color: @selected-normal-text;
|
|
||||||
}
|
|
||||||
inputbar {
|
|
||||||
text-color: @normal-text;
|
|
||||||
}
|
|
||||||
case-indicator {
|
|
||||||
text-color: @normal-text;
|
|
||||||
}
|
|
||||||
entry {
|
|
||||||
text-color: @normal-text;
|
|
||||||
}
|
|
||||||
prompt {
|
|
||||||
text-color: @normal-text;
|
|
||||||
}
|
|
||||||
textbox-prompt-colon {
|
|
||||||
text-color: inherit;
|
|
||||||
}
|
|
||||||
Loading…
Reference in a new issue