通过 SASS 修改是最方便的，但是需要安装 nodejs 和 node-sass，有小伙伴觉得麻烦，那来一种简单版本的吧，直接撸 CSS。

1. 在插件开发的时候，先修改 index.php，设置 DEBUG 为 2

!defined('DEBUG') AND define('DEBUG', 2);

2. 后台安装 xn_theme_paopao 这个主题

3. 新建自己的插件目录：myname_theme_xxx，名字按照规律取一个

然后复制 plugin/xn_theme_paopao 下所有的文件到 plugin/myname_theme_xxx 目录

4. 修改 hook/header_link_after.htm：

<style>
body { background: #196e95 !important; background-image: url(plugin/myname_theme_xxx/img/body_bg.jpg) !important; background-repeat: no-repeat !important;}
#header { background: rgba(0,0,0,0.5) !important; }
#footer { background: rgba(0,0,0,0.5) !important; }
.card > .card-header { background-image: linear-gradient(0deg, #c4d9e3, #fcfdfd); }
.card { background: #f4fbfe !important; }
.thread:hover { background-color: rgba(255,255,255,0.6) !important; }
.text-grey { color: #90a9b6 !important;}
.thread, .post { border-bottom: 1px solid #dfeef2;}
.input-group .form-control, .input-group .custom-select, .input-group .custom-file { background: rgba(255,255,255,0.7);}
.card-header-tabs > .nav-item > .nav-link.active { background-image: linear-gradient(0deg, #dfedf4, #f2f2f2); border-color: #c9dce5; border-bottom-color: #dfebf1;}
.nav_tag_list a { color: #c5dbe4; }
.nav_tag_list a.active { color: #6fd2ff; }
.btn-secondary { background-color:#405763; border-color:#3b515d; }
.btn-secondary:hover { background-color: #374b55; border-color: #344751; }
.blockquote { background: #e0eaef;}
</style

5. 修改 conf.json：

{
    "name": "插件名字",
    "brief": "插件介绍。",
    "version": "1.0",
    "bbs_version": "4.0",
    "installed": 1,
    "enable": 1,
    "hooks_rank": [],
    "dependencies": []
}

6. 修改  plugin/xn_theme_paopao/conf.json，手工禁用刚才安装的泡泡插件，否则两个插件样式会冲突

"enable": 0

7. 到前台 CTRL+F5 看看。