Warning
This repository is regularly updated
A desktop shell based on Astal.
- Most widgets are copied from Aylur dotfiles, the creator of Astal/AGS. Thanks, Aylur!
- Some features may not work as expected. Feel free to ask if you encounter any issues.
- Only Hyprland is supported, although some widgets might work with other Wayland compositors.
astal(libastal-meta&libastal-gjs) oraylurs-gtk-shelldart-sassesbuild
hyprpickerswappywf-recorderwayshotslurpwl-copybrightnessctl
sudo pacman -S libastal-meta libastal-gjs-git dart-sass esbuild hyprpicker swappy wf-recorder wayshot slurp wl-copy brightnessctl- Clone the repository
git clone https://github.com/ezerinz/epik-shell
- Navigate to project directory
cd epik-shell - Run
You can also use ags:
LD_PRELOAD=/usr/lib/libgtk4-layer-shell.so gjs -m build.js
or:ags run --gtk4 -d .ags run --gtk4 -d <FULL-PATH-TO-SRC-FOLDER>
Epik Shell looks for a configuration file in the config directory (~/.config/epik-shell/config.json).
Configuration comes with the following defaults:
You can check some configurations in the wiki
Warning
Don't copy and paste this entire block into your config.json, it's just to show which configurations are available.
- Theme:
adw-gtk3 - Icons:
Colloid
- Install
libadwaita-without-adwaita. - This configuration generates a
colors.cssfile in$HOME/.themesbased on theme settings insrc/theme.json. Import thecolors.cssfile into theadw-gtk3theme to apply it to your GTK apps.
Locate the following files:
adw-gtk3/gtk-3.0/gtk.cssadw-gtk3/gtk-4.0/gtk.cssadw-gtk3-dark/gtk-3.0/gtk-dark.cssadw-gtk3.dark/gtk-4.0/gtk-dark.css
Add the following line after the define-color section:
This assumes your adw-gtk3 folder is inside $HOME/.themes. If it's not, adjust the path accordingly.
/* Import after many define-color lines */
@import "../../colors.css";
{ "dock": { "position": "bottom", // "top" | "bottom" "pinned": ["firefox", "Alacritty", "org.gnome.Nautilus", "localsend"], // array of application classname }, "bar": { "position": "top", // "top" | "bottom" "separator": true, // modules to show in start, center, and end of bar. // available options: "launcher", "workspace", "time", "notification", "network_speed", "quicksetting" "start": ["launcher", "workspace"], "center": ["time", "notification"], "end": ["network_speed", "quicksetting"], }, "desktop_clock": { "position": "top_left", // "top_left" | "top" | "top_right" | "left" | "center" | "right" | "bottom_left" | "bottom" | "bottom_right" }, "theme": { "bar": { "bg_color": "$bg", // css color values (name -> red, rgb -> rgb(50, 50, 50), etc), or use theme color with "$" prefix ($bg, $accent, etc) "opacity": 1, "border_radius": 6, // in px, support css style (top, right, bottom, left -> [10, 15, 20, 10]) "margin": 10, // in px, support css style "padding": 3, // in px, support css style "border_width": 2, "border_color": "$fg", // css color values or use theme color "shadow": { "offset": [6, 6], // in px, can be [horizontal, vertical] or single number "blur": 0, "spread": 0, "color": "$fg", // css color values or use theme color "opacity": 1, }, "button": { "bg_color": "$bg", "fg_color": "$fg", "opacity": 1, "border_radius": 8, "border_width": 0, "border_color": "$fg", "padding": [0, 4], "shadow": { "offset": [0, 0], "blur": 0, "spread": 0, "color": "$fg", "opacity": 1, }, }, }, "window": { "opacity": 1, "border_radius": 6, "margin": 10, "padding": 10, "dock_padding": 4, "desktop_clock_padding": 4, "border_width": 2, "border_color": "$fg", "shadow": { "offset": [6, 6], "blur": 0, "spread": 0, "color": "$fg", "opacity": 1, }, }, "light": { "bg": "#fbf1c7", "fg": "#3c3836", "accent": "#3c3836", "red": "#cc241d", }, "dark": { "bg": "#282828", "fg": "#ebdbb2", "accent": "#ebdbb2", "red": "#cc241d", }, }, }