我啥也不懂，我自己能用就行，改着玩的

有深色模式

css 版文章页面有优先级问题，用 js 版才能正常食用

https://webqwe.webqwe.com/webqwe/14tuynfh930d8bdm63jahzt9b0x3h56m?filename=233 webqwe-2025-03-09.user.js

/* ==UserStyle==
@name           webqwe.com
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */
@-moz-document domain("webqwe.com") {
    
    /* 深色模式 */
    .darkb {
        background-color: #66666666;
        position: fixed;
        top: 50%;
        transform: translate(-1rem, 0px);
        border-radius: 50%;
        width: 3rem;
        height: 3rem;
    }
    .dark .pageform:hover {
        background-color: #ffffff22;
    }
    .dark,
    .dark div > div.row.mt-3 > div.col-12.col-md-8 > div:nth-child(1) > div,
    .dark div > div.row.mt-3 > div.col-12.col-md-8 > div:nth-child(2):not(.mb-3.p-3) {
        background-color: #111 !important;
        color: #fff !important
    }
    .dark .card,
    .dark .navbar,
    .dark .nav-link,
    .dark .navbar-brand,
    .dark .list-group-item,
    .dark div > div.row.mt-3 > div.col-12.col-sm-4,
    .dark div > div.row.mt-3 > div.col-12.col-md-4,
    .dark div > div.row.mt-3 > div.col-12.col-md-8 > div:nth-child(2) > div > div.row {
        background: none !important;
        background-color: #222 !important;
        color: #fff !important;
    }
    .dark small,
    .dark .breadcrumb-item.active,
    .dark .breadcrumb-item+.breadcrumb-item::before {
        color: #fff !important;
    }
    .dark::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #00000033;
        z-index: 9999;
        pointer-events: none;
    }   
    /* 其他 */
    .w-e-select-list {
        z-index: 99999;
        top: -10rem;
    }
    .navbar-nav .nav-link.active,
    .navbar-nav .nav-link.show {
        color: #2997f7 !important;
        text-decoration: none !important;
        
    }
    /* 文章标题区 */
    .row .author {
        height: 100%;
        max-height: inherit;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
    }
    .row .author > img {
        height: inherit;
        border-radius: 50%;
        object-fit: cover;
        padding: .45rem;
        aspect-ratio: 1 / 1;
    }
    
    body {
        background-image: none !important;    
    }
    /* 加粗字体 */
    .breadcrumb,
    .navbar-nav .nav-link.show,
    .navbar-nav .nav-link.active {
        font-weight: bold;
    }
    /* 背景色 */
    body,
    body > div > div.row.mt-3 > div.col-12.col-md-8 > div:nth-child(1) > div,
    body > div > div.row.mt-3 > div.col-12.col-md-8 > div:nth-child(2):not(.mb-3.p-3) {
        background-color: #F5F7FA;
    }
    .navbar {
    background-color: #ffffff !important
    }
    body > div > div.row.mt-3 > div.col-12.col-sm-4,
    body > div > div.row.mt-3 > div.col-12.col-md-4,
    body > div > div.row.mt-3 > div.col-12.col-md-8 > div:nth-child(2) > div > div.row {
        background-color: #ffffff;
    }
    /* 卡片阴影 */
    .navbar,
    #article_list,
    body > div > div.row.mt-3 > div.col-12.col-sm-4 {
        box-shadow: 2px 2px 20px #66666611;
    }
    /* 角 */
    #article_list,
    body > div > div.row.mt-3 > div.col-12.col-md-8 > div.card.mt-3.mb-3,
    body > div > div.row.mt-3 > div.col-12.col-md-8 > div.card.container-fluid {
        border-radius: 2% !important;
    }
    /* 统一外边距 */
    body > div.z-3.fixed-top.mt-3,
    body > div > div.row.mt-3 > div.col-12.col-md-8 > div:nth-child(3),
    body > div > div.row.mt-3 > div.col-12.col-md-8 > div.card.mt-3.mb-3,
    body > div > div.row.mt-3 > div.col-12.col-md-8 > div.card.container-fluid {
        margin-top: .5rem !important;
    }
    /* 边框0 */
    .container,
    body > div > div.row.mt-3 > div.col-12.col-md-8 > .card {
        border: none !important;
    }
    /* 外边距0 */
    .breadcrumb,
    body > div > div.row.mt-3,
    body > div > div.row.mt-3 > div.col-12.col-md-8 > div:nth-child(2),
    body > div > div.row.mt-3 > div.col-12.col-md-8 > div.card.container-fluid > nav,
    body > div > div.row.mt-3 > div.col-12.col-md-8 > div:nth-child(2) > div > div.row,
    body > div > div.row.mt-3 > div.col-12.col-md-8 > div:nth-child(2) > div > div.row.mt-3,
    body > div > div.row.mt-3 > div.col-12.col-md-8 > div:nth-child(2) > div > div:nth-child(2) > div:nth-child(2) > p {
        margin: 0 !important;
    }
    /* 内边距0 */
    .col-9,
    .container,
    #article_list > div > div.col-3,
    body > div > div.row.mt-3 > div.col-12.col-sm-4,
    body > div > div.row.mt-3 > div.col-12.col-md-4,
    body > div > div.row.mt-3 > div.col-12.col-md-8,
    div.row.mt-3 > div.col-12.col-md-8 > div:nth-child(2) > div,
    body > div > div.row.mt-3 > div.col-12.col-md-8 > div:nth-child(1) > div {
        padding: 0 !important;
    }
    /* 顶栏 */
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 999;
    }
    /* 距顶栏 */
    #notify,
    .container {
        margin-top: 3.5rem !important;
    }
    /* 页面路径 */
    body > div > div.row.mt-3 > div.col-12.col-md-8 > div.card.container-fluid {
        padding: .8rem !important;
        
    }
    /* 距页面路径 */

    /* 左边 */
    body > div > div.row.mt-3 {
        zoom: .8 !important;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    /* 右边 */
    body > div > div.row.mt-3 > div.col-12.col-sm-4,
    body > div > div.row.mt-3 > div.col-12.col-md-4 {
        margin-left: .5rem;

    }
    body > div > div.row.mt-3 > div.col-12 > div.card.p-3.sticky-top.z-2 {
        top: 4.5rem;
        padding-top: .5rem !important;
        border: 0 !important;
    }
    /* 图片预览 */
    #preview-img {
        width: 33vw;
        height: 33vh;
        object-fit: contain;
        background: rgba(0, 0, 0, 0);
        box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px;
        border: none;
    }
    /* 卡片列表 */
    #article_list {
        border: none !important;
        height: 9rem;
        margin-top: .5rem !important;
    }
    #article_list:last-child {
        margin-bottom: 8px !important;
    }
    #article_list .card-body {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        padding: .5rem 1rem !important;
    }
    /* 统一卡片内高度 */
    .img-fluid,
    #article_list > .row,
    #article_list > div > div.col-3 {
        height: inherit !important;
        max-height: inherit !important;
    }
    /* 卡片内 */
    #article_list > .row,
    #article_list .card-text,
    #article_list > div > div.col-3 {
        margin: 0 !important;
    }
    #article_list .card-title {
        margin-top: .5rem;
    }
    #article_list .card-title a {
        height: 3rem;
        display: block;
        overflow: hidden;
    }
    #article_list .card-text {
        display: flex;
        flex-wrap: wrap;
    }
    .text-body-secondary {
        margin-right: 1rem !important;
    }
    /* 卡片内图片 */
    .img-fluid {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    #article_list:hover .img-fluid {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    /* 底栏 */
    body > div > div.row.mt-3 > div.col-12.col-md-8 > div.card.mb-3.p-3,
    body > div > div.row.mt-3 > div.col-12.col-md-8 > div.card.mt-3.p-3 {
        box-shadow: 0px 0px 20px #66666633;
        margin: 0 !important;
    }
    .pageform {
        padding: 0 !important;
    }
    .pageform:hover {
        background-color: #00000022;
    }
    input[name=page] {
        text-align: center;
        background-color: #ffffff11;
        margin: 0 !important;
        padding: .25rem .5rem !important;
        width: 100%;
        height: 100%;
        border: 0 !important;
    }
    input[name=page]:focus {
        color: var(--bs-body-color);
        border-color: #86b7fe;
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
    }
    /* 文章内容区 */
    #context {
        margin: 0!important;
        border-top: solid 1px #ECEFF5;
        padding: 1rem !important;
    }
    body > div > div.row.mt-3 > div.col-12.col-md-8 > div:nth-child(2) > div > div:nth-child(2) > div:nth-child(2) {
        color: #767575;
        height: 100%;
        max-height: inherit;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: flex-end;
        align-items: flex-end;
    }
    
}