wechat-theme.scss

@media (prefers-color-scheme: light) {
    $wechat-text-radius: 4px;
    $wechat-green: #95ec69;

    // 主题色
    body:has(.message-panel) {
        --brand_standard: #1aad19;
        --text-brand: black;
        --nt_brand_standard_2_overlay_hover_brand_2_mix: #38cd7f;
    }

    #app {
        // 左边栏
        div.sidebar,
        .sidebar-nav {
            background: #2e2e2e;
            width: 55px;
            // 边栏按钮
            .tab-item-mask,
            .tab-item-img-mask {
                background-color: #07c160;
            }

            .tab-item-img-normal,
            .icon-item {
                filter: invert(0.5);
            }

            // 头像
            .user-avatar-container {
                .avatar {
                    border-radius: unset;
                }

                // 头像轮廓图形
                .user-avatar--clip {
                    -webkit-clip-path: unset;
                    clip-path: unset;
                }
            }
        }

        // 信息列表栏
        .recent-contact {
            background-color: #f7f7f7 !important;

            .search .search-input {
                background: #e2e2e2;
            }
            .contact-top-bar .top-bar__adder {
                background: #e2e2e2;
            }

            .viewport-list__inner {
                background-color: #e5e5e5 !important;
            }

            .avatar {
                border-radius: 3px;
                // 移除群助手和我的手机icon外圆形
                &.avatar-sys::before {
                    border-radius: unset;
                }
            }

            .list-item {
                height: 65px;
            }

            .list-item__container {
                background: #00000000;
                // 通话时头像
                .recent-contact-item__phone .recent-contact-item__phone_bg {
                    border-radius: unset;
                }
            }
            // 置顶颜色
            .recent-contact-item.recent-contact-item--top .list-item__container.item-dragging-over {
                background: #dbdbdb;
            }
            // 选中颜色
            .recent-contact-item.recent-contact-item--selected .list-item__container.item-dragging-over {
                background: #c4c4c4 !important;
            }

            // 文字颜色（会员名，普通名，聊天时间，聊天summary）
            .across-mode.list-item,
            .across-mode.list-item--selected {
                .list-item__content {
                    .list-item__title .main-info {
                        // 普通ID, 会员ID, 群名
                        span,
                        .text-ellipsis,
                        .text-ellipsis.vip-name {
                            color: black !important;
                            -webkit-text-fill-color: unset !important;
                            background: unset !important;
                        }
                    }

                    .secondary-info.text-ellipsis span {
                        color: #999999ff;
                    }

                    .list-item__info .list-item__summary {
                        color: #999999ff;

                        .q-icon {
                            color: #999999ff;
                        }
                    }
                }
            }
        }

        // 聊天栏
        .aio {
            background: #f5f5f5;
            // header
            .panel-header.chat-header {
                background: #f5f5f5;

                .panel-header__title {
                    font-size: min(var(--font_size_5), 20px) !important;
                    // 去除vip颜色
                    #chatHeaderContactName,
                    .chat-header__contact-name .text-ellipsis {
                        color: black !important;
                        -webkit-text-fill-color: unset !important;
                        background: unset !important;
                    }
                }
                .panel-header__action {
                    .bar-icon:not(:hover) .q-icon {
                        color: #505050;
                    }
                }
            }

            // 聊天框
            .chat-msg-area {
                // 聊天头像
                .message-container__avatar {
                    border-radius: 2px;
                }

                // 文字泡
                .msg-content-container {
                    // 商店表情包 小程序背景保持透明
                    &.container--self:not(:has(.market-face-element, canvas)) {
                        border-radius: $wechat-text-radius;
                        background-color: $wechat-green;
                        color: black;
                    }

                    &.container--others:not(:has(.market-face-element, canvas)) {
                        border-radius: $wechat-text-radius;
                    }

                    // 超链接
                    .text-element .text-link {
                        color: #576b95;
                    }

                    // at用户
                    .text-element--at {
                        color: black;
                    }

                    // 转发
                    .forward-msg {
                        border-radius: $wechat-text-radius;
                    }

                    // 回复
                    .reply-element {
                        color: black;
                    }

                    // 图片
                    .image-content {
                        border-radius: $wechat-text-radius;
                    }
                }

                // 语音
                .container--self {
                    .ptt-element__button .q-icon {
                        --bubble_host: #444444;
                    }
                    .ptt-element__progress-item {
                        background-color: #444444;
                    }
                    .ptt-element__duration {
                        color: black;
                    }
                }

                // 文件
                .message-container--self.normal-file {
                    background-color: white;
                    border-radius: $wechat-text-radius;
                    color: black;
                }

                .msg-preview {
                    border-radius: $wechat-text-radius;
                }

                // 群聊用户名
                .user-name .text-ellipsis {
                    color: #999999ff;
                }

                // 用户名tag 隐藏等级，保留自定义tag
                .q-tag {
                    background-color: #1aad1926;
                    color: #1aad19;
                    .level {
                        display: none;
                    }
                    &.q-tag--grey {
                        display: none;
                    }
                }

                // 群聊时间 撤回通知
                .message__timestamp,
                .gray-tip-content {
                    .babble {
                        padding: 0;
                        background-color: unset;
                    }
                    width: fit-content;
                    margin-left: auto;
                    margin-right: auto;
                    color: white;

                    background: #dadada;
                    padding: 3px 5px 2px 5px;
                    border-radius: 2px;
                }
                .gray-tip-action {
                    --text_link: #576b95;
                }

                // 新老消息提示
                .q-notification {
                    border-radius: 100px;
                    box-shadow: 0 2px 4px #0000000f;

                    &.theme-default .content {
                        color: #09bb07;
                        font-size: 14px;
                    }
                }
            }

            // 编辑栏
            .chat-input-area {
                // 聊天工具
                .chat-func-bar {
                    .bar-icon:not(:hover) .q-icon {
                        color: #505050;
                    }
                }
                .operation {
                    .send-btn-wrap {
                        background-color: #e9e9e9;
                        .send-setting i.q-icon {
                            color: #07c160;
                        }
                        .send {
                            width: 100px;
                        }
                        .divider,
                        .send-setting__wrapper {
                            display: none;
                        }
                    }

                    .send--disabled {
                        opacity: 1;
                    }

                    .send {
                        font-size: 1.25em;
                        color: #07c160;
                    }

                    .close {
                        display: none;
                    }
                }

                // 表情popup
                .sticker-panel {
                    border-radius: 0;
                    background: #f7f7f7;
                }
            }

            // 右栏 群成员和群公告
            .group-box {
                .group-notice .content {
                    color: black;
                }

                .group-user__name.text-ellipsis {
                    color: black;
                }

                .group-user {
                    .avatar {
                        border-radius: unset;
                    }
                    .q-tag.q-tag--blue {
                        color: #1aad19;
                        background-color: #1aad1926;
                    }
                }
            }

            // 右栏 信息设定
            .side-panel .more-panel {
                .input-field .input-container,
                .q-list,
                .q-pulldown-menu,
                .q-pulldown-menu-button,
                .q-button {
                    border-radius: 2px;
                }
            }
        }

        // 其他
        .q-popover {
            background-color: white;
            border-radius: 3px;
            box-shadow: 0 0 6px 3px #0000000f;

            .buddy-profile {
                background-image: unset;

                .avatar {
                    border-radius: 5px;
                }

                .circle-button {
                    border-radius: 5px;
                }
            }
        }

        // 联系人栏目
        .contact {
            background-color: #f7f7f7;

            .avatar {
                border-radius: 2px;

                &.avatar-sys::before {
                    border-radius: unset;
                }
            }

            .avatar--offline::after {
                border-radius: unset;
            }

            .tab-header,
            .q-collapse-item__header {
                background-color: #f7f7f7;
            }

            // 选中颜色
            .viewport-list__inner .across-mode.list-item--selected {
                background: #c4c4c4 !important;

                .list-item__content .list-item__title span {
                    color: black;
                }
            }
        }

        // 右上角按钮
        .window-control-area > div {
            color: #505050;
        }
    }

    // 右键菜单高亮回复和撤回
    .q-context-menu {
        border-radius: 0 !important;
    }
    .q-context-menu-item {
        &:has(.q-icon path[d^="M6.00031"], .q-icon use[*|href$="quote_24"]) {
            color: green;
        }
        &:has(.q-icon path[d^="M2.14649"], .q-icon use[*|href$="recall_24"]) {
            color: red;
        }
    }

    // btn指针样式
    [role="button"],
    button {
        cursor: pointer;
    }
}