首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么我的深色主题按钮只把边框变成黑色?

深色主题按钮只将边框变成黑色的原因可能是由于按钮的CSS样式设置不正确或者缺少相应的样式属性。以下是一些可能导致此问题的原因和解决方法:

  1. CSS样式设置不正确:检查按钮的CSS样式是否正确设置了边框颜色属性。确保边框颜色属性被正确定义为黑色,例如:border-color: black;。
  2. 缺少其他样式属性:深色主题按钮可能还需要其他样式属性来完整地呈现深色主题效果。例如,可能需要设置背景颜色、文本颜色等属性来与边框颜色形成对比。确保按钮的其他样式属性也被正确设置。
  3. 主题相关的样式覆盖:检查是否有其他样式规则覆盖了深色主题按钮的样式。可能存在其他CSS规则或者样式库中的样式定义了按钮的边框颜色,导致深色主题按钮的边框颜色无法生效。可以通过使用!important关键字来提高样式的优先级,或者调整样式的顺序来解决这个问题。
  4. 浏览器兼容性问题:某些浏览器可能对CSS样式的解析和渲染存在差异,导致深色主题按钮的边框颜色无法正确显示。在开发过程中,可以使用浏览器的开发者工具来检查样式是否被正确应用,并尝试在不同的浏览器中进行测试和调试。

总结起来,要解决深色主题按钮只将边框变成黑色的问题,需要确保按钮的CSS样式设置正确,包括边框颜色和其他相关样式属性。同时,还需要注意样式的优先级和可能存在的浏览器兼容性问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

你说黑是什么黑

既然有一个“容器”,那必须得有个底,而且大家都习惯于白纸黑字,所有的界面都变成了白色了,好像白色会给人一种更加被“包装好”感觉。从此以后黑色界面的时代就过去了,存在于黑客电影中。...让人无法接受深色模式:Windows高对比度模式 在Windows推出了相当长一段时间里,黑色界面就不再出现了。但是准确说,实际上保留了一个主题功能。...但是这个换肤大多都带有很强个性和主题性,每个主题能命中用户其实并不是很多。相比之下,直接整个系统变黑,新鲜感满满,接受度也很高。...认为由于不同用户对于深色模式预期不一样。有些用户预期是一个低对比度黑夜模式,有些用户只是想换个主题而已。导致设计师两边不讨好,有些产品深色模式也是被骂改了又改。...比如说白色,你可以指定这个白色在深色模式下直接变成黑色

90820

WordPress夜间模式插件:Blackout: Dark Mode Widget

所谓夜间模式就是网页变成深色或者黑色模式,貌似现手机上某个系统能实现全局夜间模式就能吹嘘一通。...之后打开网站,会发现在页面最下端增加了一个圆形按钮,点击就会进入黑色背景夜间模式。...有些遗憾是插件夜间模式支持新版本Chrome、Firefox和Safari,不支持所有版本IE和Edge浏览器。...Darkmode.js使用方便,代码量少,不像我目前主题夜间模式,需要写样式配合并反复调试,不过由于Darkmode.js兼容性和自定义程度低,最终放弃使用,自己写代码实现。...夜间模式对于一款主题而言,用户可以不用,但你不能没有,好吧,接着改主题夜间样式去....

59910
  • Android 10适配要点,深色主题

    另外说明一下,本篇文章主要摘自《第一行代码——Android 第3版》第14章,在此基础之上,又扩展了一些内容。 为什么要将书中内容再发一份到博客上呢?...开启深色主题后,系统界面风格包括一些内置应用程序都会变成深色主题色调,如下图所示。 ? ?...可以看到,虽然整体界面风格好像确实变成深色主题模式,可是却并不怎么美观,尤其是卡片式布局效果,经过Force Dark之后已经完全看不出来了。...然而,虽然现在界面中主要内容都已经自动切换成了深色主题,但是你会发现标题栏和悬浮按钮仍然保持着和浅色主题时一样颜色。...个人认为,在绝大多数情况下,让应用程序跟随系统设置来决定使用浅色主题还是深色主题是最合适一种做法。

    1.8K10

    如何在网页设计中实现深色模式:增强用户体验

    但这不仅仅是一种趋势;这是一个将持续存在设计决策。 然而,到底什么是黑暗模式,为什么它如此受欢迎?从根本上来说,深色模式颠倒了用户界面的标准配色方案,用浅色文本代替深色色调,用明亮背景代替深色色调。...称为“深色模式”(有时称为“夜间模式”或“深色主题”)设计功能会修改用户界面的配色方案,使其主要使用深色黑色背景以及浅色文本和图形元素。...深色模式主要特征 深色调色板:为了与屏幕上较亮项目形成鲜明对比,深色模式通常使用黑色、深灰色或海军蓝色调作为背景颜色。...然后,我们创建一个暗模式类,在其中使用适合暗模式值覆盖这些变量。 深色模式切换按钮 接下来,让我们创建一个切换按钮,允许用户在浅色模式和深色模式之间切换。...博客即将同步至腾讯云开发者社区,邀请大家一同入驻:博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan

    21910

    一键切换亮色模式和暗色模式,用Figma搞定!

    以一个PC端应用界面为例。 在本文中,我们在创建样式同时,会说明我们为什么会选择特定颜色。因为这些差别对设计师非常重要。 0.常量样式 重要是要注意,在为明暗模式选择颜色时,颜色会略有不同。...另外,图像占位符颜色也是恒定,不会改变。 例如,在上图中,我们展示了该按钮在浅色和深色主题外观。图标,文本和计数器具有恒定颜色。按钮背景有变化,但其中内容未更改。...这是因为,在黑暗模式下,背景已经完全为黑色,此时在黑色背景上使用100透明度灰度颜色时,你颜色会完全不可见。...· 400(#E8E8E8)-用于较小细节,例如边框,分隔线和线条颜色。...例如,对于浅色版本,我们对白色应用了10%蓝色透明度,对深色版本,我们对黑色应用了25%蓝色透明度。

    18.9K11

    接口测试平台代码实现142: 平台主题-夏日清凉

    首先要明确俩个css技术: 背景渐变/边框渐变 动态渐变 我们先打开主页html 即 Home.html。...看看效果: 然后我们继续改 里面的这个小蓝色方块也给改了: 其实直接复制上面的即可,只是朝向从右right变成了左left。...然后注意给里面的文字白色换成深色 最终效果如下: 然后我们去动手左下角历史请求记录背景色: 然后 去修改点开项目后俩个按钮:进入和保存: 好,修改完毕,再看看最终效果: 好,主页修改到此为止...,只是教给大家修改颜色方法,大家可以按照自己喜好 设置成各种各样主题颜色,这个渐变色不止可以放2种3种,可以放很多很多颜色,你放个彩虹都没人管。...感觉应该是控制菜单主题代码,我们随便改几个字发现菜单就变成其他样子,更加证实了这个句代码作用。

    44830

    Material Design 实战 之第一弹——Toolbar详解

    但是为什么这里要指定一个xmlns:app命名空间呢?...(“(白底)黑字”),这是为了和主体颜色区别开(具体可以看文章开头对于深色浅色主题解释)。...在styles.xml中将程序主题指定成了淡色主题,Toolbar现在也是淡色主题,TooIbar上面的各种元素就会自动使用深色主题 但是这个效果看起来就会很差,之前使用ActionBar...时文字都是白色,现在变成黑色会很难看。...但是这样指定完了之后又会出现新问题,如果Toolbar中有菜单按钮,那么弹出菜单项也会变成深色主题,这样就再次变得十分难看,于是这里使用了app:popupTheme属性单独将弹出菜单项指定成了淡色主题

    76320

    Windows 10 1903新特性概览

    MSDN告诉你上也已经有相关镜像了。正好也安装尝尝鲜,顺便为大家介绍一下1903新特性。大家如果也想尝鲜的话推荐使用VHD方式安装,将来删除时候非常方便。...浅色主题 比较直观一点就是系统主题新增了一个浅色模式,浅色主题任务栏和开始菜单会变成浅白色,而图标颜色会变成黑色,看起来很不错。 ? 对应深色主题看起来就没那么好看了。...而且现在很多应用都没有适配深色主题,一堆黑色窗口中间混杂了一个白色窗口,格外难看。觉得到时候大家肯定都用浅色主题。 ?...搜索功能和Cortana分离 另外一项比较直观功能改动就是将搜索功能和微软小娜分离了。现在任务栏上有两个按钮,一个是搜索功能,另外一个小娜只有语言识别的功能了。 ? 这项改动有好有坏。...对来说不能打字和小娜沟通,实在是有点遗憾。不过搜索和小娜分离之后,本地搜索功能应该会方便一些,对于经常使用搜索功能用户来说是一件好事。 ?

    79040

    文本、图片和按钮在Flutter中怎么用

    如下方代码所示,我们分别定义了黑色与红色两种展示样式,随后一段字符串分成了4个片段,并设置了不同展示样式: Text.rich( TextSpan( children...最大缓存限制为100MB,当限定空间已经存满数据时,最久没有被访问到图片清除。图片缓存只会在运行期间生效,也就是缓存在内存中。...与Text控件类似,按钮控件也提供了丰富样式定制功能,比如背景颜色color、按钮形状shape、主题颜色colorBrightness,等等。...shape 来指定其外形为一个斜角矩形边框,并将按钮背景色设置为黄色。...因为按钮背景颜色是浅色,为避免按钮文字看不清楚,我们通过设置按钮主题 colorBrightness 为 Brightness.light ,保证按钮文字颜色为深色。 展示效果如下: ?

    7.7K20

    使用 SetWindowCompositionAttribute 来控制程序窗口边框和背景(可以做 Acrylic 亚克力效果、模糊效果、主题色效果等)

    还记得我们前面叠加颜色是什么吗? 接下来别忘了然后它误以为是系统主题色哦!...---- 使用 WindowChrome 在 Windows 10 上,在获得焦点时候整个背景是系统主题色;而失去焦点时候是灰色,但边框部分是深色。...: 最上面那根白线,是面前面设置边框为 0 1 0 0 导致。...效果 ACCENT_DISABLED 黑色边框为纯白色) ACCENT_ENABLE_GRADIENT GradientColor 颜色(失焦后边框深色) ACCENT_ENABLE_TRANSPARENTGRADIENT...主题色(失焦后边框深色) ACCENT_ENABLE_BLURBEHIND 模糊特效(失焦后边框为灰色) ACCENT_ENABLE_ACRYLICBLURBEHIND 与 GradientColor

    1.4K60

    IntelliJ IDEA 2023主题 图标 这样配置 ,让你IDEA好看到爆炸!

    一、主题 首先我们来设置 IDEA 主题。 那 IDEA 自带了两款主题,一款是浅色主题,一款是深色主题。 那显然这两款满足不了了我们需求,所以我们需要下载其他主题。...这个设置地方,首先我们挑选自己喜欢主题。 这里个人比较喜欢 Atom One Dark,推荐大家可以试试。 那第二点,设置 Tab(标签页) 大小,高度这些。...为什么说是程序员专用字体呢? 那是因为这两款字体都加入一个重要功能,编程连字特性(ligatures)。 这个字体利用这个特性对编程中常用符号进行优化,比如输入「!...=」直接显示成「≠」或者「>=」变成「≥ 」等等,以此来提高代码可读性。 以 Fira Code 为例,左边是打开编程连字特性,右边则是没有打开。...四、背景图 IDEA 默认情况背景是纯色,比如黑色,比较单调,这里我们可以设置一下背景图。 打开 Setting-Appearance,点击 Background Image 按钮

    2K10

    这样设置,让你 IDEA 好看到爆炸!

    主题 首先我们来设置 IDEA 主题。 那 IDEA 自带了两款主题,一款是浅色主题,一款是深色主题。 那显然这两款满足不了了我们需求,所以我们需要下载其他主题。...这个设置地方,首先我们挑选自己喜欢主题。 ? 这里个人比较喜欢 Atom One Dark,推荐大家可以试试。 那第二点,设置 Tab(标签页) 大小,高度这些。...为什么说是程序员专用字体呢? 那是因为这两款字体都加入一个重要功能,编程连字特性(ligatures)。 这个字体利用这个特性对编程中常用符号进行优化,比如输入「!...=」直接显示成「≠」或者「>=」变成「≥ 」等等,以此来提高代码可读性。 以 Fira Code 为例,左边是打开编程连字特性,右边则是没有打开。 ?...除此之外,上面 Material Theme UI 自带主题,默认配置字体都偏小,这里我们可以适当调大。 背景图 IDEA 默认情况背景是纯色,比如黑色,比较单调,这里我们可以设置一下背景图。

    2.5K21

    谷歌MD深色主题设计规范详解(附Sketch官方文件下载)

    深色模式下,不要使用黑色,而是使用深灰色,用来呈现较环境中高程和大范围区域。 色彩与调性 ? 在深色主题UI当中,尽可能使用数量有限色彩,确保绝大部分区域需要保持深色。...在APP顶部菜单中显示主题开关 ? 在弹出菜单菜单层中显示开关 ? 在APP设置列表当中显示开关 属性 深色主题使用是深灰色,而不是黑色来作为主要色彩。...在关键元素上应当谨慎地使用强调色,尤其是文本和按钮。 寻找强调色 你可以使用官方配色方案生成器来创建(或者查看)主题配色方案。它可以生成色调方案,也就是主色和次要色一系列深浅颜色变化。...为了保持品牌本身可识别性,品牌色应该可以在深色主题之下充分地使用,但是这种跨主题配色元素应该控制在一两个元素范围内,比如只有品牌LOGO 和品牌按钮是这样用。...不饱和色彩,应该在深色 UI 主题其他地方多使用。 ? 高饱和度品牌色应该使用浮动按钮(2),饱和度较低主色则应该应用到文本等元素(1)之中。

    9.7K10

    IDEA 这样设置,好看到爆炸!!!

    主题 首先我们来设置 IDEA 主题。 那 IDEA 自带了两款主题,一款是浅色主题,一款是深色主题。 那显然这两款满足不了了我们需求,所以我们需要下载其他主题。...这个设置地方,首先我们挑选自己喜欢主题。 ? 这里个人比较细喜欢 Atom One Dark,推荐大家可以试试。 那第二点,设置 Tab(标签页) 大小,高度这些。...为什么说是程序员专用字体呢? 那是因为这两款字体都加入一个重要功能,编程连字特性(ligatures)。 这连个字体利用这个特性对编程中常用符号进行优化,比如输入「!...=」直接显示成「≠」或者「>=」变成「≥ 」等等,以此来提高代码可读性。 以 Fira Code 为例,左边是打开编程连字特性,右边则是没有打开。 ?...除此之外,上面 Material Theme UI 自带主题,默认配置字体都偏小,这里我们可以适当调大。 背景图 IDEA 默认情况背景是纯色,比如黑色,比较单调,这里我们可以设置一下背景图。

    1.5K20

    为你网页添加深色模式

    为了测试这个功能,你需要升级到 Mojave 10.14(MacOS)并在“系统偏好设置”中选择“深色”。我们可以通过好几种方式使用这种新媒体查询来实现不同主题。...我们已经失去了对样式控制,当你用了彩色背景时,会出现一个更大问题。看看你照片变成了什么样子。 10....完全控制 自定义属性使我们可以完全控制选择自己颜色和其他属性。能够对页面容器上边框阴影进行更新,使其在使用深色模式时不太透明。索引我们需要为页面阴影创建一个新自定义属性。...创建按钮悬停样式 使用相同变量,还可以创建可用于两个主题悬停样式。为了实现这一点,当用户将鼠标悬停在按钮上并转换这些属性时,我们将反转颜色。...使用 scope 为按钮创建不同样式和交互 我们可以利用 scope 为深色和浅色主题按钮创建不同样式和悬停交互。可以根据媒体查询或元素状态修改变量值,而不是像往常一样使用新值重复属性。

    1.6K30

    创建华丽 UI 7条规则 第一部分 (2019年更新)

    你不会希望人们下眼睑都特别的黑吧,所以,如果我们在这些恶魔般眼睛上面多加一些光亮,突然间他们就变成了你家门前魔鬼女郎。...拿按钮举例,即使有了这个相对 “平面” 按钮,仍然有一些与光线相关细节: 未点击按钮(顶部)底部具有黑色底部边缘,正如夏天中午,我们站在太阳时影子样子。...嵌套控制面板上边缘投射一个微小阴影 * “ON” 滑块轨道也跟着设置了一些阴影 * “ON” 滑块表面是凹,底部会反射更多光线 顶部边框颜色比较其它深点,这代表一个垂直于光源表面,因此接收到大量光...虽然很多关于色彩东西在你完成设计时并不是很实用,但是却看到了一些非常有用东西: * 学习 UI 设计:这是作者创建一门课程,包含3个小时彩色设计视频(以及 20 多个小时 UI设计主题视频)...永远不要使用黑色 (伊恩·斯托姆·泰勒):这篇文章谈到完全平面化灰色几乎从来没有出现在现实世界中,同时它也提到了如何饱和灰色阴影 — 尤其是深色阴影 — 为设计增添了视觉丰富性。

    1.2K40

    Android MVVM框架使用(十三)UI更新 (App启动白屏优化、适配Android10.0深色模式)

    如果你不想去适配深色模式,你希望深色模式和正常模式都一样,很简单,你values下内容再复制一份到values-night中,将values-night中内容全部覆盖掉。...颜色   深色模式下最重要一点就是设置颜色和主题样式,当前我们是给了一个green色值作为主题颜色,下面我们改一下,这将是一个比较繁琐工作,但是做完之后,你会觉得很Nice…   改是直接拿这个...下面简单用两张图说明一下: 第一张图是正常模式,第二张图是深色模式。两个资源name一样,value不一样,也就是说正常情况下你颜色是绿色,深色模式下就是黑色。...上面的头像那个部分实际上改动了背景颜色,因为默认是绿色。下面的菜单Item,需要改动了。...FloatingActionButton 浮动按钮改动有一点特殊,如果你样式主题中是NoActionBar,那么你直接通过tint去改变图标颜色是不行,而是通过页面的样式colorOnSecondary

    1.1K10

    给你应用建立一套配色方案

    surface 颜色 surface颜色是文本所在背景、边框和其他装饰表面。在浅色主题中,这些是浅色,而不是深色文本颜色。要使用 hsl 创建浅色,我们将在第三个亮度值中使用更高百分比值。...大多数品牌都没有以深色主题开始,它是其主要主题变体,通常是较浅主题。...另一方面,用户通常为不同环境选择一个黑暗主题,比如夜间。这些因素使在黑暗主题中牢记两件事: 用户在使用此主题时通常会处于黑暗中,因此请在黑暗中进行测试。...,是时候将它们变成与方案无关属性了。...意思是,作为这个配色方案项目中 CSS 作者,应该很少需要访问特定配色方案值。想让它更容易留在主题中。 为了实现这一点,颜色方案使用应该完全通过通用自定义属性完成,我们将在稍后定义。

    1.7K40
    领券