『 纸上得来终觉浅,绝知此事要躬行 』


I3wm 配置思路

2021.01.28

之前看到了一份 i3wm nord 配色的主题展示图,瞬间激起我重新捏一套 i3 配置的欲望,本文主要阐述我在 gentoo 上配置一份基于 nord 配色的 i3 主题的思路和流程。

1 我的环境

  • Gentoo linux

  • i3-gaps

  • rofi

  • polybar

  • alacritty

  • feh

  • i3lock-color

  • picom

    我的配置环境是 gentoo linux,所以会增加一些开启 use 的额外操作,其他发行版可忽略。

2 具体配置

2.1 安装基本软件

$ sudo emerge -aq i3-gaps 

i3-gaps 可以在窗口间提供间隔,虽然会挤占一部分屏幕空间,但是非常美观。

$ sudo emerge -aq feh

feh 是一个简单的图片查看器和壁纸设置软件。

$ sudo emerge -aq polybar 

polybar 是一个优秀的 bar 组件,支持 font awesome、nerd font 和 weather icons 等多种字体,但注意它不支持图片,所以无法提供任务栏这样的 module。

它最突出的优点就是将显示内容模块化,例如显示网速和显示时间等模块,还支持鼠标点击和滚轮操作,这是 i3bar 等没有的。

建议开启以下 use

  • alsa 或者 pulseaudio

    提供声音模块支持,以便显示和切换当前音量

  • i3wm

    提供 i3wm 模块支持,以便显示 i3wm 的 workspace 并支持切换

  • ipc

    提供 polybar 内建的命令支持,包括显示和隐藏 polybar

  • network

    提供网络模块支持,用来显示网速

  • mpd

    这个和 ncmpcpp 配套,用来显示和切换当前音乐

$ sudo emerge -aq rofi

rofi 是一个很优秀的应用选择器,比 dmenu 多出不少功能,例如 ssh 和切换当前活动窗口等。

建议开启 drun 和 windowmode 这两个 use,前者可以支持显示拥有 desktop 文件的应用,后者能让 rofi 像个正常窗口一样运行 ,这对于后面利用 rofi 做一个 powermenu 什么的很有用。

$ sudo emerge -aq alacritty tilda

alacritty 支持 GPU 加速渲染,轻量且配置简洁,配置文件支持 live reload。tilda 是一款纯 gtk 下拉终端,不会引入过多依赖。

$ sudo emerge -aq i3lock-color

i3lock-color 是 i3lock 的一个 fork,它增加了诸如显示时间和模糊背景的支持。

$ sudo emerge -aq picom

picom 是混成器,用来提供透明、阴影和窗口圆角等特效,我没有选择带有模糊特效的分支,因为 kawase blur 性能有些差,想再等等看。

2.2 具体配置

以下主要提供几个选择方案或者直接叙述我的方案

2.2.1 如何进入 i3wm

进入 i3 一般有两种方案,其一是 startx,其二是使用 dm。

我推荐后者,startx 需要额外考虑一些环境变量问题。例如 export XDG_SESSION_TYPE="x11" 来告诉某些应用这是 xorg 会话。

针对于 gentoo 用户还可能需要考虑 eval "$(dbus-launch --sh-syntax --exit-with-session)" 来正常启动 dbus。

$ sudo emerge -aq sddm
$ systemctl enable sddm

推荐使用 sddm-theme-chili 效果如下图

2.2.2 修改 i3 配置文件

注: Arch linux 的默认配置文件 dmenu 那行有两个示例,所以会冲突,自己修改一下就好了,gentoo 的默认示例是正常的。

配置文件在 ~/.config/i3/config 先设置一下 mod 键,我这里 Mod4 是指 meta,也就是键盘上有 windows logo 的那个键

set $mod Mod4

再设置一下窗口标题栏的字体,我无所谓,保持默认,因为我会把标题栏都去掉

font pango:monospace 8

把 nm-applet 开起来,用于显示网络托盘图标,需要安装 gnome-extra/nm-applet

exec --no-startup-id nm-applet

我使用的是 pulseaudio,所以我使用 pactl 来调节音量

bindsym XF86AudioRaiseVolume exec --no-startup-id pactl set-sink-volume @DEFAULT_SINK@ +5%
bindsym XF86AudioLowerVolume exec --no-startup-id pactl set-sink-volume @DEFAULT_SINK@ -5%
bindsym XF86AudioMute exec --no-startup-id pactl set-sink-mute @DEFAULT_SINK@ toggle
bindsym XF86AudioMicMute exec --no-startup-id pactl set-source-mute @DEFAULT_SOURCE@ toggle

我使用 xbacklight 来调节亮度,你也可以选择安装其他的

bindsym XF86MonBrightnessUp exec xbacklight -inc 5
bindsym XF86MonBrightnessDown exec xbacklight -dec 5

设置快捷键开启 alacritty

bindsym $mod+Return exec alacritty

设置快捷键开启 rofi

bindsym $mod+d exec --no-startup-id rofi -show drun

设置一下颜色主题,这个比较重要,建议根据自己的配色来微调。 依次是边框颜色、背景色、文本颜色、焦点指示顔色和子窗口的边框颜色。

# Theme colors
# <colorclass> <border> <background> <text> <indicator> <child_border>
client.focused            #84FFFF      #5E81AC     #E5E9F0     #E5E9F0       #ECECEC
client.focused_inactive   #4C556A      #84FFFF     #2E3440     #ECECEC       #ECECEC
client.unfocused          #84FFFF      #84FFFF     #171717     #ECECEC       #ECECEC
client.urgent             #BF616A      #BF616A     #ffffff     #268BD2
client.placeholder        #84FFFF      #909090     #FFFFFF     #268BD2

把 bar 那几行注释掉,因为它是启用 i3bar,而我是使用 polybar 的。

#bar {
#        status_command i3status
#}

设置窗口参数

for_window [class="^.*"] border pixel 2 # 把所有的窗口边框设为 2 像素
new_window 1pixel # 去掉标题栏

设置 gaps,参数根据自己屏幕尺寸微调就行

gaps inner 6
gaps outer 4

设置一些需要自启的软件,下面是我的示例

exec --no-startup-id picom --experimental-backends -b # 启动 picom
exec_always --no-startup-id numlockx on # 开启小键盘
exec_always feh --bg-scale "path_to_wallpaper" # 设置壁纸
exec --no-startup-id dunst & # 桌面通知
exec --no-startup-id copyq & # 剪切板管理器
exec --no-startup-id fcitx5 & # fcitx5 输入法
exec_always --no-startup-id $HOME/.config/polybar/launch.sh # 开启 polybar

额外设置一些快捷键

bindsym $mod+Shift+s exec --no-startup-id flameshot gui # 设置火焰截图
bindsym $mod+p exec --no-startup-id polybar-msg cmd toggle # 设置快捷键来显示隐藏 polybar
bindsym $mod+q exec --no-startup-id "$HOME/.config/rofi/powermenu.sh" # 启用基于 rofi 的 powermenu

其他没有提到的设置我都是默认

2.2.3 配置其他的组件

dunst

桌面通知管理器,用到它的时候其实很少,我就简单的配置了一下 ~/.config/dunst/dunstrc

[global]
	monitor = 0
	follow = mouse
	geometry = "320x6-30+60"
	indicate_hidden = yes
	shrink = no
	notification_height = 15
	separator_height = 1
	padding = 10
	horizontal_padding = 10
	frame_width = 2
	frame_color = "#aaaaaa"
	separator_color = frame
	sort = yes
	idle_threshold = 120
	font = Noto Sans Mono SC 14
	line_height = 0
	markup = full
	format = "<span><b>%s %p</b></span>\n%b"
	alignment = left
	show_age_threshold = 60
	word_wrap = yes
	ellipsize = middle
	ignore_newline = no
	stack_duplicates = true
	hide_duplicate_count = false
	show_indicators = yes
	icon_position = left
	max_icon_size = 48
	icon_path = /usr/share/icons/Arc/status/48/:/usr/share/icons/Arc/devices/48/:/usr/share/icons/Papirus/48x48/apps/
	sticky_history = yes
	history_length = 20
	always_run_script = true
	startup_notification = false
	verbosity = mesg
	corner_radius = 5
	force_xinerama = false
	mouse_left_click = do_action
	mouse_middle_click = close_all
	mouse_right_click = close_current


[shortcuts]
	#close = ctrl+space
	#history = ctrl+shift+space
	#context = ctrl+shift+period


[urgency_low]
	# IMPORTANT: colors have to be defined in quotation marks.
	# Otherwise the '#' and following  would be interpreted as a comment.
	background="#2B2F36"
	foreground="#b6a49b"
	timeout = 5


[urgency_normal]
	background="#2B2F36"
	foreground="#b6a49b"
	timeout = 10


[urgency_critical]
	background="#2B2F36"
	foreground="#b6a49b"
	timeout = 0

效果如下

picom

混成器是美化 i3 的重要组件,~/.config/picom/picom.conf

首先我们把一些基本参数设置好

experimental-backends = true; # 实验特性打开,如果你下一行选了 glx 的话(在 i3 config 里依然要加上)
backend = "glx";
glx-no-stencil = true;
glx-no-rebind-pixmap = true;
glx-copy-from-front = false;
use-damage = false; # 解决息屏再亮屏,屏幕闪烁问题,会增加功耗
vsync = true; # 垂直同步

其次我们设置阴影(虽然我现在没有打开) 注: 圆角矩形窗口不建议开黑色阴影,会出现毛刺

shadow = false;
shadow-exclude = [
	"name = 'Notification'",
	"name = 'MPV'",
	"name *= 'Telegram'",
	"name *= 'picom'",
	"name *= 'firefox'",
	"name = 'polybar-main_eDP1'",
	"name *= 'pcmanfm'",
	"name *= 'feeluown'",
	"name *= 'VirtualBox Machine'"
];
shadow-radius = 12;
shadow-offset-x = -5;
shadow-offset-y = -5;
shadow-opacity = 0.5;

再然后设置窗口透明

opacity = 1;
inactive-opacity = 1.0; # 这里可以设置不活动窗口的透明度,辅助显示窗口焦点
frame-opacity = 1.0;
inactive-opacity-override = false;
opacity-rule = [
	# "80:class_g = 'Alacritty'",
	# "80:class_g *?= 'rofi'"
	"95:class_g = 'Code'",
	"90:class_g = 'FeelUOwn'",
	"95:class_g = 'dunst'",
	"90:class_g = 'Tilda'"
];

设置一下淡入淡出效果

fading = true;
fade-delta = 3;
fade-in-step = 0.03;
fade-out-step = 0.03;

最后把一些焦点检测和圆角检测设置好

inactive-dim = 0.0;
mark-wmwin-focused = true;
mark-ovredir-focused = true;
detect-rounded-corners = true;
detect-client-opacity = true;

rofi

这里就不细讲了,我直接捏了几个组件,大家可以直接看文末的配置链接

其一,rofi 主窗口,采用官仓的 material 主题,支持 ssh,window,run,drun 四个模式

├── config.rasi
└── material.rasi

其二,结合 polybar 的一个应用启动器,用鼠标控制,基于 nord 配色

├── colors.rasi
└── launcher.rasi

其三,基于 nordic 配色的一个 powermenu,支持关机、锁屏和注销

├── nordic.rasi
├── powermenu.rasi
└── powermenu.sh

polybar

从别人那里学到的配置结构,感觉清爽多了

├── colors.ini 
├── config.ini
├── fonts.ini
├── include-modules.ini
├── launch.sh
├── modules
└── scripts

示意图不贴了,上面几张图里有,依次的 modules 是:

1. gentoo logo,显示 gentoo logo 并鼠标左键点击唤出 rofi launcher
2. i3 workspace,显示 i3 的工作区,鼠标点击或者滚轮可以切换
3. wlan,显示 wifi 下载速度
4. cpu,显示 cpu 占用
5. memory,显示内存占用
6. pulseaudio,显示音量,点击静音,滚轮调节
7. xbacklight,显示亮度,滚轮调节
8. battery,电池,充电时显示动画
9. time,显示时间,鼠标单击显示日期
10. tray,自带的托盘图标区域

i3lock-color

如果喜欢简单素雅,可以直接抄文末链接中的配置,示例如下

也可以简单的用 imagemagick 加一点二次元,比如我比较喜欢的小巫女

或者选用某些组图来轮换显示,比如我喜欢的 touhou

2.3 协调统一应用主题

针对 gtk 应用,选用 nordic-darker 主题,利用 lxapparance 来设置

例如 lutris

针对 qt 应用,选用 nordic-darker 应用样式,利用 kvantum 来设置

例如 qbittorrent

那不吃系统主题的应用怎么办呢?那只有单独设置了,均选用相同配色主题,具体不详述

例如火狐

例如 telegram

2.4 一些 tips

videowallpaper

每次鬼刀交新货会玩玩视频壁纸,利用 xwinwrap 调用 mpv 来硬解视频做壁纸

neofetch

按照惯例需要交一份 neofetch,从某位群友那边学的配置

3 总结

其实大体上的配置就是基于某个配色捏出一整套配置出来,我现在这份还並不算协调,某些配色还有瑕疵。 大家可以作为配置思路参考,从而捏合出属于自己的配置。

4 参考和我的配置