awebcer
awebcer
  • 发布:2025-09-18 15:42
  • 更新:2025-09-19 10:38
  • 阅读:118

button checkbox switch slider等 这些内置组件的primary颜色全局修改

分类:uni-app x

原以为在uni.scss修改 $uni-color-primary ,就会全局生效了
没想到不行,需要一个个像这样写css ,

button[type=primary]{  
background-color:#xxxxx  
}

关键是有很多组件不知道写在哪的颜色,上线了发现一个修改一个吗

这是一个常见的需求啊,难道使用uniapp-x开发的项目都是蓝色的?

还是我没有发现正确的修改样式的方法吗?

2025-09-18 15:42 负责人:无 分享
已邀请:
awebcer

awebcer (作者)

@DCloud_UNI_JBB @DCloud_UNI_yuhe

DCloud_UNI_JBB

DCloud_UNI_JBB

哪个端?什么版本的hx?

  • awebcer (作者)

    hx ver 4.76,现在测试的是 运行->运行到内置浏览器。因为是在开发阶段,小程序和APP还没测试,这2个端支持在uni.scss修改 $uni-color-primary ,就会全局生效吗?

    2025-09-19 10:27

  • DCloud_UNI_JBB

    回复 awebcer: 其他浏览器有问题吗?

    2025-09-19 10:30

  • awebcer (作者)

    看了下源代码,发现uniapp-x 默认primary颜色#007aff 都是写死在css文件里,没有使用变量,详细见下面的代码

    2025-09-19 10:31

  • awebcer (作者)

    回复 DCloud_UNI_JBB: 运行到chrome , $uni-color-primary: #07C160; 改了 ,按钮背景还是默认的蓝色#007aff

    2025-09-19 10:36

  • DCloud_UNI_JBB

    回复 awebcer: 你通过 hx 的 帮助 bug反馈 提个 issue 吧

    2025-09-19 10:39

  • awebcer (作者)

    回复 DCloud_UNI_JBB: 好的。顺便问一句,hbuilderx的设计应该是支持直接修改 uni.scss , $uni-color-primary的值 ,从而全局修改内置组件primary颜色的吧?

    2025-09-19 10:41

  • DCloud_UNI_JBB

    回复 awebcer: 不太确定这个是bug还是有意设计成这样,等其他同事看下这个uniappx的问题

    2025-09-19 10:46

awebcer

awebcer (作者)

Searching 9 files for "007aff"  

D:\soft\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-h5\style\framework\base.css:  
   89  html {  
   90    /* --UI-BG-0: #ededed; */  
   91:   --primary-color: #007aff;  
   92    --UI-BG: #fff;  
   93    --UI-BG-1: #f7f7f7;  

1 match in 1 file  

Searching 5 files for "007aff"  

D:\soft\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-h5\style\api\location-picker.css:  
   97    
   98  .uni-system-choose-location .nav-btn.confirm>svg {  
   99:   background-color: #007aff;  
  100    padding: 5px;  
  101  }  
  ...  
  130  .uni-system-choose-location .search-btn {  
  131    margin-left: 5px;  
  132:   color: #007aff;  
  133    font-size: 17px;  
  134    text-align: center;  

D:\soft\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-h5\style\api\location-view.css:  
   49    border-radius: 50%;  
   50    margin-top: -25px;  
   51:   background-color: #007aff;  
   52  }  
   53    

D:\soft\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-h5\style\api\modal.css:  
  130    
  131  .uni-modal__btn_primary {  
  132:   color: #007aff;  
  133  }  
  134    

4 matches across 3 files
awebcer

awebcer (作者)

Searching 33 files for "007aff"  

D:\soft\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-components\style\button.css:  
   66  uni-button[type='primary'] {  
   67    color: #ffffff;  
   68:   background-color: #007aff;  
   69  }  
   70    
   ..  
   94    
   95  uni-button[type='primary'][plain] {  
   96:   color: #007aff;  
   97:   border: 1px solid #007aff;  
   98    background-color: transparent;  
   99  }  
  ...  
  192    
  193  uni-button[loading][type='primary'][plain] {  
  194:   color: #007aff;  
  195    background-color: transparent;  
  196  }  

D:\soft\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-components\style\checkbox.css:  
   32    
   33  .uni-checkbox-input svg {  
   34:   color: #007aff;  
   35    font-size: 22px;  
   36    position: absolute;  
   ..  
   42  @media (hover: hover) {  
   43    uni-checkbox:not([disabled]) .uni-checkbox-input:hover {  
   44:     border-color: var(--HOVER-BD-COLOR, #007aff) !important;  
   45    }  
   46  }  

D:\soft\HBuilderX\plugins\uniapp-cli-vite\node_modules\@dcloudio\uni-components\style\radio.css:  
   33  @media (hover: hover) {  
   34    uni-radio:not([disabled]) .uni-radio-input:hover {  
   35:     border-color: var(--HOVER-BD-COLOR, #007aff) !important;  
   36    }  
   37  }

要回复问题请先登录注册