前端项目主题色巧妙更换方案

利用css反转色可以实现简单的反转主题色

.darkTheme {

    transition: all .2s;
    filter: invert(0.9) hue-rotate(180deg) brightness(1.3) saturate(1.6);

    .ant-btn-dashed,
    .ant-switch::after {
        background-color: #e3e3e3;
    }

    .ant-switch-checked::after {
        background: #18BA79
    }

    .ant-btn-primary,
    .success,
    .faild,
    .tag,
    svg,
    .ant-table-thead>tr>th,
    .ant-menu-item,
    .circle,
    .ant-tree-title .title,
    .uploadImg .btn,
    .attack,
    .risk,
    .ant-tree-title .label,
    .attRskType,
    .initValue,
    .cusTag,
    .allGroup .value,
    .addSelf .label,
    .selectAllTools .actived {
        color: #000 !important;
    }

    .bg {
        filter: invert(0.9) hue-rotate(180deg) brightness(1.3) saturate(1.6);
    }

    .login-box {
        filter: invert(0.9) hue-rotate(180deg) brightness(1.3) saturate(1.6);

        .ant-form {
            filter: invert(0.9) hue-rotate(180deg) brightness(2.3) saturate(1.6)
        }
    }

    .attRskType {
        background: #e3e3e3;
    }

    .hostIp .svg-icon {
        filter: invert(0.9) hue-rotate(180deg) brightness(1.18);
    }

    img,
    .ImgCon svg,
    .cusicon {
        filter: invert(0.9) hue-rotate(180deg) brightness(1.18);
    }

    svg {
        color: #000 !important;
        // 
    }

    .ant-modal-mask,
    .ant-drawer-mask {
        filter: invert(0.9) hue-rotate(180deg) brightness(1);
    }





}

//主题色
    const THEME: ComputedRef<CustomTheme> = computed(
      () => store.state.langTheme.theme
    )
    watchEffect(() => {
      const METHODS = unref(THEME) === CustomTheme.DARK ? 'add' : 'remove'
      document.getElementsByTagName('html')[0].classList[METHODS]('darkTheme')
    })