mirror of
https://github.com/danth/stylix
synced 2024-11-10 06:34:15 +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;
|
||||
|
||||
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));
|
||||
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
|
||||
{
|
||||
options.stylix.targets.rofi.enable =
|
||||
|
|
@ -25,7 +23,122 @@ in
|
|||
config = lib.mkIf config.stylix.targets.rofi.enable {
|
||||
programs.rofi = {
|
||||
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