修改Ubuntu主题的颜色 Ubuntu的主题中，我比较喜欢使用Radiance主题，但是他的工具提示颜色我很不喜欢，因为看其来很不顺眼，虽然可以在自定义中的颜色中进行调节，但是我有觉得出现一个自定义主题很不好看所以开始手动修改主题中的颜色显示...其中ntooltip_bg_color是工具提示中的背景色，ntooltip_fg_color是显示的文字颜色，我一般都会把他们改成ntooltip_bg_color:#F5F5B5\ntooltip_fg_color...ps:xfce修改tooltip_bg_color:#F5F5B5\ntooltip_fg_color:#000000这两项. ps2：KDE下面这样修改： 设置-›应用外观-›颜色-›颜色,修改其中的工具提示背景和工具提示文字...ps3:KDE+最新版GTK3下面修改 KDE修改方法还是和上面一样，但是GTK3修改的地方变了 修改/usr/share/themes/Breeze/gtk-3.0/gtk.css文件，搜索toolt...如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
，此处要说明的是，此处的source代表的是Hexo根目录的source文件夹，不是next主题中的source 创建样式文件 在Hexo -> source文件夹下建立 _data文件夹，新建文件...styles.styl文件，在文件中设置的css会被应用到站点中： 事实上在Next 7.7 主题中已经放置了用户自定义设置的styl文件，具体位置： themes/next/source/css...important; } 其中背景图像 bg.jpg 存放在主题source中的images文件夹内 初步效果： 自定义修改样式 当我们想修改页面的某个地方时，具体该添加哪个样式表呢？...解决这个问题可以用浏览器的调试工具（一般浏览器F12可以调出），查看感兴趣内容的名称，建立同名css可以覆盖原有样式，例如我要修改侧边栏导航部分的背景颜色 确定了元素名为 header-inner...，在styles.styl中配置相应的css： .header-inner{ background: rgba(255, 0, 0, 1); } 然后，可以明显地看到效果 妈耶，赶紧改回来
我为这两种模式指定不同的 CSS 变量值，让用户的操作系统来决定。...; } } 在上面的 CSS 中，--body-bg 和 --body-color 是 CSS 变量。...正如你所看到的，它们对两种模式都包含不同的值。在浅色主题中，我设置了一个白色背景和黑色文本。在深色主题中，我设置了黑色背景和白色文本。...body { background: var(--body-bg); color: var(--body-color); } var() 语法 是 CSS 使用变量的方式。...这意味着背景和前景的颜色是根据操作系统的设置而改变的！ 这就是媒体查询的真正能力。提供一个从操作系统到网页的一致的用户体验。
CSS概念 CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表) Css是用来美化html标签的，相当于页面化妆。...直接写颜色的名称（比如：red，green等） 十六进制显示颜色 （#000000; 前2为代表红色，中间2位代表绿色，后边2位代表蓝色。...特点： 1.继承的权重为0（当没有自己的样式时，听继承的；有自己的样式时，继承的权重为0） 2.权重会叠加。 ?...清除浮动 问题：当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误（占据父盒子的位置）。 清除浮动不是不用浮动，清除浮动产生的问题。...PS：之所以选择con作为父盒子而不是box作为父盒子，是因为box的宽度不定，不同的显示器宽度不同，那么new和hot的定位就有问题。
下载 当你看到这里的时候，应该已经有一个自己的 Hexo 博客了。...以下列出了可能对你有用的地方： 修改主题颜色 在主题文件的 /source/css/matery.css 文件中，搜索 .bg-color 来修改背景颜色： /* 整体背景颜色，包括导航、移动端的导航、...页尾、标签页等的背景颜色. */ .bg-color { background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%...script> 代码中： $('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay...修复了 iPhone 上点击搜索输入获取焦点的问题； 修复了 iPhone 上输入框获取焦点后页面放大的问题； 修复一些文章或 UI 显示问题；
如下命令将无任何输出 tail -f access_log.log | grep 500 | grep 500 用颜色标记日志中的特定内容 比如，nginx日志格式为： log_format main...[13/Apr/2011:15:19:10 +0800] "GET /bg-button.png HTTP/1.1" 304 0 "http://192.168.1.9/tomcat.css" "Mozilla...如果用grep只能用过滤方式，如下命令： grep -v "200" access_log.log 用sed可以用颜色标出非200的状态码： 为了拼出sed的正确正则表达式，我们先从标记200为绿色开始...x1b[32m&\x1b[0m/g' access_log.log 说明：echo打印彩色字符时，使用八进制符号\033，但是在sed中不支持八进制，必须使用16进制：\x1b 下一步，把状态码3XX标为黄色...位数标记颜色： sed 's/\(HTTP\/1\.[01]" \)\(3[0-9][0-9]\)/\1\x1b[33m\2\x1b[0m/g' access_log.log 再下一步，如果状态码之后的返回数据量大于
1>安装插件说明 如果应用官网的主题你会发现，有可能出现打不开的情况，这是由于有些主题使用的插件，本地并没有安装导致的报错。所以本篇文章为补充说明篇。...（无问题的可以跳过） 2>常用的插件 代码高亮（建议安装） 由于 Hexo 自带的代码高亮主题显示不好看，所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮，安装命令如下...以下列出了可能对你有用的地方： 修改主题颜色 在主题文件的 /source/css/matery.css 文件中，搜索 .bg-color 来修改背景颜色： /* 整体背景颜色，包括导航、移动端的导航、...页尾、标签页等的背景颜色. */ .bg-color { background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%...script> 代码中： $(".bg-cover").css( "background-image", "url(/medias/banner/" + new Date().
在 23 年的 CSS 新特性中，有一个非常重要的功能更新 -- 相对颜色。 简单而言，相对颜色的功能，让我们在 CSS 中，对颜色有了更为强大的掌控能力。...本文，我们将从实际实用角度出发，基于实际的案例，看看 CSS 相对颜色，能够如何解决我们的一些实际问题。...并且，混合模式这个方案最大的问题是会影响清晰度。 有了 CSS 相对颜色后，我们有了更多的纯 CSS 方案。...BG 当然，这个方案还有两个问题： 如果颜色恰好是在 #808080 灰色附近，它的反色，其实还是它自己！...总结一下 到今天，我们可以利用 CSS 提供的各类颜色函数，对颜色有了更为强大的掌控力。 很多交互效果，不借助 JavaScript 的运算，也能计算出我们想要的最终颜色值。
注意：将CSS的样式导入到外部样式表时，要注意图片的位置，以及 对外部样式表的引入 1、头部的背景图片的高度128px来自素材的图片高，容器的宽度大小也来自图片 的宽，那么这里背景图片设置的有意思吗...里面的子div main-left和main-right设置浮动样式时，要设置宽和高不然不起作用(起单独一个宽或者高也不起作用，这里的背景颜色只是父div的背景颜色)。.../img/index_main_top_bg.gif); /*14对原先设置的背景颜色进行更改*/ } .subtitle img{ float: left;.../img/index_main_top_bg.gif); /*14对原先设置的背景颜色进行更改*/ line-height: 37px; } .subtitle img{ float:...如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
+:是表示相邻的兄弟下面的所有:比如: ul下面有N个li标签,不要第一个li标签,则可以用 li+li:{}; *和~一般用在属性选择器上使用: *表示属性中有这类的字符串,举个例子: [data*=..."abc"] 选择 data 属性值中包含子串 "abc" 的所有元素 ~这个表达不清楚,请意会: [data~="abc..."] 选择 data 属性值等于“abc"的所有元素 不能选择 [data~="abc"] 选择 data 属性值等于“abc..."的所有元素 可以选择 类似的还有 ^ $等
具体问题 按照设计，Web PC 端的左侧边栏有一排导航按钮，这些导航按钮在 light 模式下应该是白底，在 dark 模式下应该是 Naive UI 的默认底色。...[#需要的颜色]" 来处理。...有任何其他问题 feel free 问我。...在直接提问这个思路下我又尝试问过如下几个问题： Tailwind CSS 中与 dark:bg-whtie 对立的表达是什么 Tailwind CSS 怎样才能使得 bg-white 仅对 light...Tailwind CSS 我希望最终实现的效果与 dark:* 类似，当有 .light 的父类 css class 时触发 light:* 仅保留 .light 就可以了，其他的删掉 经过这四连问之后
CSS 变量有一个值，可以使用var()函数在其他 CSS 声明中使用。变量可以通过 CSS 或 JavaScript 进行更新。当发生这样的更新时，所有的因变量都会相应的更新。...Tolinski 给出了一个具体的演示。该演示是对一个教程网站的完全重新设计，用户可以从六个主题中选择一个，使用户界面的外观发生相应的改变。...例如，oled主题与oled-mode类关联，该类配置了以下 CSS 变量： .oled-mode { --bg-color: var (--darkPurp) --sheetHover: var...相应的 CSS 代码更容易维护：更容易更改，也更容易限定需要更改的内容。这里，修改深紫色值将自动反映到所有需要修改的地方，而修改黑色肯定不会修改背景颜色。...例如，现有的工具可以从一些基本颜色和对比度目标生成自适应调色板。定义好颜色之后，Tolinski 继续介绍他所说的颜色意向（例如--bgColor或lineCo lor）。
目的 当前我有一份 less 样式和 2 份颜色变量，我需要生成如下样式: image.png 这样我就可以在 html 跟节点 添加和删除 dark 这个样式来实现换肤了。...或许有同学会问，这里怎么突然变成 less 了？PostCSS 能解析 Less 吗？ 答案是不能。 当前假设我们的 webapp 是基于 webpack 构建的。...(less|css|scss|sass)/) 2、删除不包含颜色的样式，保留 border-color background-color 等包含颜色的样式 ["color", "background",...原来的项目中可能没有区分颜色变量到单独的样式文件中，在样式中可能写了颜色绝对值。...最后 如果大家也在给 webapp 做换肤工作，被前端多皮肤的问题困扰，希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。
本博文持续更新～ 有问题请在本博留言～ 美化记录 本博一键美化插件 展开 看本博客效果～只要安装后就不需要手动修改了 目前实现的功能 iframe视频文章嵌入优化 iframe视频短代码插入...减少服务器压力） 右侧边栏时光流逝模块 顶部导航显示心知天气 左侧目录彩色图标 右侧彩色标签和彩色标签云 鼠标经过头像旋转放大 鼠标点击特效 文章标题居中 LOGO扫光 复制成功提示 H1/H2标题背景颜色设置....bg-red { background-color: #f00 } .github-badge .bg-green { background-color: #3bca6e } .github-badge...colorArr[Math.floor(Math.random() * colorArr.length)]; tag.style.backgroundColor = tagsColor; }); 如果主题中启用了...color: #495dc3; } .glyphicon-transfer { color: #0e5458; } 首页文章版式阴影化 展开 #阴影颜色修改rgba后面的值(别复制该行)
这种方式存在一个问题，当点击切换的时候会引起整个页面重排，因此我们需要单独打包出只包含颜色的样式文件。...目的 当前我有一份 less 样式和 2 份颜色变量，我需要生成如下样式: 这样我就可以在 html 跟节点 添加和删除 dark 这个样式来实现换肤了。...或许有同学会问，这里怎么突然变成 less 了？PostCSS 能解析 Less 吗？ 答案是不能。 当前假设我们的 webapp 是基于 webpack 构建的。...(less|css|scss|sass)/ ); 2、删除不包含颜色的样式，保留 border-color background-color 等包含颜色的样式 ["color", "background...原来的项目中可能没有区分颜色变量到单独的样式文件中，在样式中可能写了颜色绝对值。
假设我们有一个标准按钮和一些需要与该按钮颜色相同的选项卡： .button { background-color: rgba(247, 186, 30, 0.6); } .tab { background-color...: "rgba(247, 186, 30, 0.6)", }, }, }; 在添加了一个名为primary的新颜色后，我们可以在整个应用程序中使用bg-primary设置背景颜色，或者使用...为了解决这个问题，Tailwind CSS 内置了与 PurgeCSS 的集成，PurgeCSS 是一个用于删除未使用 CSS 的工具。...注意：在使用prettier-plugin-tailwindcss时，会和prettier有版本兼容性问题。 4....在覆盖和扩展样式时避免不一致性 假设，我们在页面上使用了一个带有自定义按钮的组件： 并且我们有一个具有一些默认样式的 Button 组件
很早之前就在想在线换肤的实现思路，主要是之前有个项目有换肤，连布局图片都不一样，无能为力，只好写不同页面，然后通过打包的时候配置删除和替代文件实现，但是在线换肤还是没去做。...另外一种是类似element-ui做的换肤，把颜色的样式都写在head头部的style标签里面，可以去看一下，当你换颜色的时候，style标签id为docs-style和chalk-style里面的颜色就会被替换...，element是颜色对应一个关键字的数组，然后把style里面的颜色都先替换成关键字，然后再根据颜色生成对应的数组，接着把关键字替换回颜色，最后写入style标签。...还有一种css自定义变量的方式，这我还真是前几天才知道的，是一个大佬告知的，这个css很早就出现了，只是一直不知道： :root { --bg: #00aaee; --color: #00aaee...自己知道的在线换肤的思路只有这三种了，如果真的有需求要做在线换肤功能，还真不知道哪种会比较好，只能是自己选型了，真正涉及项目的时候，可不只是这样说说而已，会碰见什么坑就不好说了。
--一级标题中嵌入小标题--> 一级标题小标题 文本对齐 <!...紧缩型表格 .table-responsive 响应式表格 状态类 Class 描述 .active 鼠标悬停在行或单元格上时所设置的颜色 .success 标识成功或积极的动作 .info 标识普通的提示信息或动作... 背景颜色 ... ... ...... ... ......（单位为缩放为 100% 时的 CSS 的像素）。
下载 当你看到这里的时候，应该已经有一个自己的 Hexo 博客了。如果还没有的话，不妨使用 Hexo 和 Markdown 来写博客和文章。...: customEmojis: 添加 RSS 订阅支持（可选的） 本主题中还使用到了 hexo-generator-feed 的 Hexo 插件来做 RSS，安装命令如下： npm install...，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要 categories: Markdown tags: - Typora - Markdown ---...首页文章列表 修改主题颜色 在主题文件的 /source/css/matery.css 文件中，搜索 .bg-color 来修改背景颜色： /* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色...script> 代码中： $('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay
是实现换肤最方便的方案，按传统的方案就得加入一些css class 就可以实现，如： :root { --page-bg:#fff; --card-bg:#F9FAFB; /* gray...:root { --color: red; } h1 { color: var(--color); } 经过postcss 的处理，得到下面的css，不支持的css属性， 浏览器会自动忽略。...h1 { color: red; color: var(--color); } 但是这个插件只对第一次编译的时候有用，动态换肤的时候就失效了， 我们可以使用js polyfill 来修复这个问题...Tailwind 配置 tailwind css 可以让用户在tailwind.config.js中配置一些自定义颜色，这样css 中就增加了与之对应颜色的class。...，背景和字体颜色，当然还有扩展其他样式如borderColor 然后在css 中定义变量 theme 方法可以获取tailwind 内置的颜色，想要使用颜色比配置在colors 中。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
