YASB项目样式定制指南：打造个性化状态栏

原创于 2025-06-27 09:13:14 发布 · 283 阅读

5 ·

CC 4.0 BY-SA版权

YASB项目样式定制指南：打造个性化状态栏

yasb A highly configurable Windows status bar written in Python. 项目地址: https://gitcode.com/gh_mirrors/yas/yasb

项目概述

YASB是一个轻量级的系统状态栏工具，通过CSS样式文件可以实现高度自定义的外观效果。本文将详细介绍如何为YASB状态栏创建个性化的样式方案。

样式文件基础

YASB使用标准的CSS文件进行样式定制，文件名为styles.css。该文件默认存放在用户配置目录下，也可以通过环境变量YASB_CONFIG_HOME指定自定义位置。

核心样式结构

1. 状态栏主体样式

状态栏的整体外观可以通过.yasb-bar选择器进行控制：

.yasb-bar {
    background-color: #1e1e1e;  /* 背景色 */
    padding: 5px 10px;         /* 内边距 */
    border-radius: 8px;        /* 圆角 */
}

2. 部件组布局

YASB将部件分为左、中、右三个区域，分别对应以下选择器：

.container-left - 左侧部件组
.container-center - 中间部件组
.container-right - 右侧部件组

.container-left {
    margin-right: 15px;  /* 与中间区域的间距 */
}

.container-center {
    /* 中间区域特殊样式 */
}

部件样式定制

通用部件样式

使用.widget选择器可以影响所有部件：

.widget {
    margin: 0 5px;      /* 部件间距 */
    padding: 3px 8px;   /* 内边距 */
}

特定部件样式

更推荐使用特定部件的类名进行精确控制，格式为[部件名]-widget：

/* 时钟部件样式 */
.clock-widget {
    background-color: #1e1e1e;
    border-radius: 10px;
    padding: 5px 12px;
}

/* 媒体控制部件样式 */
.media-widget {
    background-color: #2a2a2a;
    border-radius: 8px;
}

文本与图标样式

文本标签样式

使用.label选择器控制文本显示：

.label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: #cdd6f4;
}

图标样式控制

图标通过.icon类进行控制，也可以通过自定义类名实现差异化：

/* 通用图标样式 */
.icon {
    font-size: 16px;
    color: #89b4fa;
    margin-right: 5px;
}

/* 特定图标样式 */
.icon-1 {
    color: #f38ba8;  /* 粉色图标 */
}

在配置文件中，可以这样指定图标类：

label: "<span class=\"icon-1"\">\uf4bc</span> {virtual_mem_free}"

容器样式优化

每个部件的内容都包裹在.widget-container容器中，可以针对这个容器进行样式优化：

.widget-container {
    transition: all 0.3s ease;  /* 平滑过渡效果 */
}

.widget-container:hover {
    background-color: #3a3a3a;  /* 悬停效果 */
}

多显示器适配

YASB会自动为不同显示器的窗口添加对应的类名，可以实现多显示器差异化样式：

/* 为主显示器设置特殊样式 */
.output-DP-1 .widget {
    background-color: #252525;
}

/* 为副显示器设置不同样式 */
.output-HDMI-1 .widget {
    background-color: #1a1a1a;
}

深色/浅色主题适配

YASB会自动检测系统主题并添加.dark类，可以据此实现主题切换：

/* 浅色主题样式 */
.yasb-bar {
    background-color: #f5f5f5;
}

.yasb-bar .label {
    color: #333333;
}

/* 深色主题覆盖 */
.yasb-bar.dark {
    background-color: #1e1e1e;
}

.yasb-bar.dark .label {
    color: #ffffff;
}