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

分类：uni-app x

uni_app

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

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

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

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

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

2025-09-18 15:42 负责人:无分享

4 个回复

awebcer (作者)

@DCloud_UNI_JBB @DCloud_UNI_yuhe

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 (作者)

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 (作者)

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  }

要回复问题请先登录或注册

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

4 个回复

公告

相关问题

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

与内容相关的链接

4 个回复

公告

相关问题

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