SeaGlass
An exceptionally comprehensive skin for Linux centered around dynamic colors, translucency, and ease of use
Install / Use
/learn @alexhulbert/SeaGlassREADME
What is this repository?
This is a set of declarative Linux configuration files and scripts designed to consistently reproduce my personal setup. It contains many unique features such as:
- A color scheme engine that dynamically themes the entire operating system, including the vast majority of websites and qt/gtk applications
- Global window background translucency effects (without sacrificing the opacity of foreground elements)
- Support for running KDE widgets and services in Hyprland.
- Custom monitor configuration and power widgets
- A modern zsh config with all of the shortcuts and autocomplete features from the fish shell
This repository is designed to provide quick and automatic configuration of all these features on a fresh Arch Linux installation, although configuration for i3 and NixOS is available at an older commit.
Currently, this repository works well, but useful features such as the ones mentioned above are intermingled with various personal configuration changes. These configuration files need to be cleaned up to modularize the various features they provide, but in the meantime, here is a quick summary of how some of the features work:
<h3>Color Scheme Engine</h3> The color scheme engine is implemented with a combination of <a href="https://github.com/dylanaraps/pywal">pywal templates</a>, <a href="https://github.com/luisbocanegra/kde-material-you-colors">kde-material-you-colors</a>, and <a href="https://github.com/alexhulbert/darkreader">a custom fork of the dark reader addon</a>. This fork attaches to a custom native messaging host that forwards the current pywal color scheme to the addon process. A compiled version of the dark reader fork is available in <a href="user/files/darkreader.xpi">user/files/darkreader.xpi</a> for firefox and <a href="user/files/darkreader-chrome.zip">user/files/darkreader-chrome.zip</a> for Chrome. The native messaging host is a small C program (<a href="user/files/coloreader-native.c">user/files/coloreader-native.c</a>) that uses inotify to watch for pywal color changes. Everything else is in <a href="user/firefox.nix">user/firefox.nix</a>. <h3>Global Transparency</h3> The OS-wide frosted glass effect is achieved with a combination of <a href="https://github.com/Luwx/Lightly">lightly-qt</a> and <a href="https://github.com/alexhulbert/hyprchroma">a custom Hyprland plugin</a>. This plugin applies a GLSL shader to each window which uses the chromakey algorithm to selectively apply transparency to the system background color and colors close to it. An older commit of this repository contains the necessary configuration to apply a similar effect in i3. <h3>KDE On Hyprland</h3> KDE support is achieved by manually starting kde daemon modules via dbus commands and storing windowed versions of plasmoid applets in the hyprland scratchpad. This allows the majority of KDE features to work without having to run plasmashell or use the KDE wayland compositor. <h3>Automatic Configuration</h3> The reproducible and declarative aspects of this repository come from its use of <a href="https://github.com/CyberShadow/aconfmgr">aconfmgr</a> and <a href="https://github.com/nix-community/home-manager">nix home-manager</a>. The `system` folder contains the contents of my `~/.config/aconfmgr` folder and the `user` folder contains my `~/.config/home-manager` folder.Installation
Since this is a pretty broad repository and different people are likely going to want different things out of it, I've provided multiple installation guides for various parts of the repo.
Firefox Pywal Customization
I would imagine that most people visiting this repository are primarily interested in the firefox customizations contained within it, and would prefer to apply them as easily as possible to their existing configuration. If you're comfortable using nix home-manager, you can just add <a href="user/firefox.nix">firefox.nix</a> to your home-manager configuration and run home-manager switch. If you're not comfortable with home-manager, you can still apply the firefox customization manually.
The following steps should be sufficient to apply the firefox customization to any existing Linux installation, assuming you already have pywal installed and working.
- Compile the native messaging host:
gcc -O2 -o /opt/darkreader-pywal/darkreader user/files/coloreader-native.c
This path can be changed if you don't have permission to write to /opt.
- Put the following content in
~/.mozilla/native-messaging-hosts/darkreader.json, updating thepathfield if you used a different location in step 1:
{
"name": "darkreader",
"description": "custom darkreader native host for syncing with pywal",
"path": "/opt/darkreader-pywal/darkreader",
"type": "stdio",
"allowed_extensions": ["darkreader@alexhulbert.com"]
}
- Open firefox and navigate to
about:configin the URL bar. Settoolkit.legacyUserProfileCustomizations.stylesheetstotrueAt this point, you can skip steps 4-9 if you have your own userChrome/userContent files that you want to keep.
- Install pywalfox
- Download <a href="user/files/theme/firefox/userContent.css">user/files/theme/firefox/userContent.css</a> and place it in
~/.config/wal/templates - Symlink
~/.cache/wal/userContent.css(create an empty file if it doesn't exist) to~/.mozilla/Firefox/default/chrome/userContent.css - Put the following content in
~/.mozilla/Firefox/default/chrome/userChrome.css:
@import url('blurredfox/userChrome.css');
@import url('userContent.css');
@import url('layout.css');
- Download <a href="https://github.com/eromatiya/blurredfox">this repo</a> and place the
blurredfoxfolder in~/.mozilla/Firefox/default/chrome - Download <a href="user/files/theme/firefox/twoline.css">user/files/theme/firefox/twoline.css</a> and place it in
~/.mozilla/Firefox/default/chrome, renaming it fromtwoline.csstolayout.css - Download <a href="user/files/darkreader.xpi">this modified version of the Darkreader addon</a> and install it into firefox, making sure to delete any existing copies of Darkreader
- Open the dark reader extension, click on "Dev Tools", and then click "Preview new design"
- Open the dark reader extension again, click "Settings", go to the "Advanced" tab, and enable "Synchronize site fixes"
Close and reopen firefox and the theme should be applied.
For best results, set websites to use their light/default theme in each site's own settings. Darkreader produces much better results when converting light themes and avoids issues like bright borders and inconsistent backgrounds. Also disable the "Detect dark theme" option in Darkreader settings, since Darkreader won't apply any styling (including pywal colors) to pages it detects as already dark.
I'm working on trying to get these changes upstreamed into Darkreader so that the fork isn't necessary.
Chrome Pywal Customization
The fork also works on Chrome/Chromium/Brave/etc. The steps are slightly different, though.
- Locate the native extension directory for your browser (on Google Chrome, it would be
~/.config/google-chrome/NativeMessagingHosts) and create a new file called "darkreader.json" with the following contents:
{
"name": "darkreader",
"description": "custom darkreader native host for syncing with pywal",
"path": "/opt/darkreader-pywal/darkreader",
"type": "stdio",
"allowed_origins": ["chrome-extension://gidgehhdgebooieidpcckaphjbfcghpe/"]
}
- Compile the native messaging host:
gcc -O2 -o /opt/darkreader-pywal/darkreader user/files/coloreader-native.c
Update the path field in darkreader.json if you used a different location.
3. Download <a href="user/files/darkreader-chrome.zip">this modified version of the Darkreader addon</a> and unzip it into a folder anywhere on your computer
4. Open chrome and navigate to chrome://extensions in the URL bar. Enable "Developer mode" and click "Load unpacked"
5. Select the directory you unzipped the contents of darkreader-chrome.zip into. You can safely delete the folder after doing this.
6. Open the dark reader extension, click on "Dev Tools", and then click "Preview new design"
7. Open the dark reader extension again, click "Settings", go to the "Advanced" tab, and enable "Synchronize site fixes"
8. Optionally, you can go to the "Appearance" tab in Chrome settings and select "Use GTK" if your GTK theme matches your pywal colors.
9. Follow the tips at the end of the <a href="#firefox-pywal-customization">Firefox section above</a> for best results.
Background Transparency
Chromakey-based background transparency in hyprland can be achieved by running the following commands:
hyprpm add https://github.com/alexhulbert/hyprchromahyprpm enable hyprchroma
To disable chromakey on fullscreen applications, add the following line to your hyprland.conf:
chromakey_enable = fullscreen:0
Sometimes, videos may be a bit washed out. To set a shortcut key to toggle the chromakey effect, add a line like the following to your hyprland.conf:
bind = $mainMod, O, togglechromakey
To make the chromakey sync up with your pywal configuration, copy <a href="user/files/theme/colors-hyprland.conf">colors-hyprland.conf</a> to ~/.config/wal/templates and add the following line to your hyprland.conf:
source = ~/.cache/wal/colors-hyprland.conf
Running KDE Applets and Services on Hyprland
The KDE support in hyprland is achieved via a python-based daemon in <a href="user/files/plasma-waybar.py">user/files/plasma-waybar.py</a>. It depends on pyprland, so make sure you've installed that. This daemon should be started with hyprland and will automatically launch any KDE applets specified in ~/.config/hypr/plasmoids.json. Check <a href="https://github.c
