WordPress Blues主题暗黑模式美化css样式代码分享

首页 WordPress资讯 WordPress Blues主题暗黑模式美化css样式代码分享
「WordPress从入门到放弃」QQ交流群:782332434(资源和技术交流)

说好的暗黑模式可能要泡汤了,不是我不想整,的确是整个暗黑模式有点辣眼睛。

下面是我整的暗黑模式,图片颜色跳的太厉害了,太辣眼睛了。

WordPress Blues主题暗黑模式美化css样式代码分享

样式代码

下面分享Blues主题暗黑模式美化(丑化)的css代码,代码有点长,请直接点击复制!!!没压缩代码是方便用的人二次修改!!直接拉到下面看使用方法!


/*
* ------------------------------------------------------------------------------
* 暗黑模式
* ------------------------------------------------------------------------------
*/

h1,
h2,
h3,
.uk-h3,
.uk-h5,
h5 {
	color: #eee;
}


/*默认背景色*/

.uk-background-default {
	background-color: #1d1f20;
}


/*板块背景色*/

.uk-background-muted {
	background-color: #151617;
}

.b-a {
	border: 1px solid #262626
}

.b-b {
	border-bottom: 1px solid #262626;
}

.b-t {
	border-top: 1px solid #262626;
}

pre {
	background: #151617!important;
	border: 1px solid #262626;
	color: #999!important;
}

pre::-webkit-scrollbar {
	width: 10px;
	height: 8px;
	background-color: #333;
}

pre::-webkit-scrollbar-track {
	background-color: #333;
}

pre::-webkit-scrollbar-thumb {
	background-color: #444;
}

.btn {
	background: #262626;
}


/*导航样式*/

.nav>ul>li>a {
	color: #999;
}

.nav>ul .current-menu-item>a {
	color: #fff;
}


/*手机导航*/

.side-nav>ul>li a {
	color: #eee;
}

.side-nav>ul {
	border-left: 1px solid #262626;
}


/*最新发布*/

.uk-text-secondary {
	color: #ddd!important
}

.box .box-title {
	color: #fff
}


/*快捷导航*/

.fastlink-item {
	box-shadow: none;
}

.fastlink-title {
	color: #ddd;
}

.fastlink-list {
	border-left: 1px solid #262626;
}

.fastlink-list li::after {
	background: #1d1f20;
	border: 1px solid #333;
}

.switcher-title a {
	colro: #4c4c4c;
	transition: all .3s;
}

.switcher-title a:hover {
	color: #666
}


/*卡片阴影*/

.card-item:hover {
	-webkit-box-shadow: 0 34px 20px -24px rgba(0, 0, 0, 0.3);
	box-shadow: 0 34px 20px -24px rgba(0, 0, 0, 0.3);
	-webkit-transform: translateY(-5px);
	transform: translateY(-5px);
	-ms-transform: translateY(-5px);
}

.blog-item-foot a:hover {
	color: #fff;
}


/*列表*/

.card-item .title a {
	color: #fff;
}


/*返回顶部*/

.gotop a {
	background-color: #262626;
}


/*分类*/

.nav>ul>li:hover .sub-menu>li {
	border-bottom: 1px solid #262626;
}


/*面包屑*/

.crumb a {
	color: #999;
}


/*分页*/

.fenye .page-numbers {
	background: #262626;
	box-shadow: 0 5px 10px -5px #111;
}

.fenye .current {
	background: #2c63ff;
	color: #fff;
	box-shadow: 0px 5px 10px -5px #2c63ff;
}

.fenye a {
	border: 1px solid #262626;
}


/*内容页*/

.single-content h2 {
	border-bottom: 2px dashed #333;
}

.single-content p {
	color: #aaa;
}

.uk-alert-primary {
	background: #151617;
}


/*点赞*/

.zan .done {
	background-color: #262626!important;
}

.zan a {
	background-color: #262626;
	color: #aaa;
}

.zan a:hover {
	background-color: #111!important;
}


/*分享*/

.share>a {
	background: #262626;
}

.share>a:hover {
	background-color: #111;
}

.uk-dropdown {
	background: #1d1f20;
}


/*上一页下一页*/

.turn-page a {
	color: #ddd;
}

.turn-page i {
	color: #ddd;
}


/*网址导航*/

.site-switcher-main {
	box-shadow: 0 6px 20px -8px #0d0d0d;
	background: #262626;
}

.site-item {
	box-shadow: 0 10px 20px -10px rgb(19, 19, 19);
}

.site-item p {
	color: #fff;
}

.site-item .site-item-tag a {
	background: #262626;
}

.sitenav li a {
	background: none;
}

.site-select {
	background: #262626;
	color: #eee;
}

.site-form input {
	background: #262626;
	color: #999;
}

.site-form button {
	color: #999;
}

.site-switcher-main {
	box-shadow: 0 6px 20px -8px #0d0d0d;
}

.sitenav li b {
	border-right: 1px solid #262626;
}

.sitenav li a:hover {
	color: #fff;
}

.site-item .site-item-go {
	color: #fff;
}


/*主题介绍*/

.theme-title {
	color: #fff;
}


/*评论*/

.comments-title {
	color: #eee;
}

.commentlist .children {
	background: #222;
}

.comment-head em {
	background: #262626;
}
.uk-input, .uk-select, .uk-textarea {
	background: #262626;
	border: 1px solid #333;
}

/*搜索框*/

.uk-modal-dialog {
	background: #151617;
}

.uk-search-input {
	background: #151617;
}


/*登录*/

.login-contnet .uk-background-default {
	background-color: #fff;
}

.login-contnet .b-a {
	border: 1px solid #2c63ff;
}

.login-contnet .b-b {
	border-bottom: 1px solid #f2f2f2;
}

.login-l h2 {
	color: #333;
}

.other-login .btn {
	background: #f9f9f9;
	color: #999;
	border: 1px solid #f2f2f2;
}

.other-login .btn:hover {
	background: #2c63ff;
}


/*滚动条*/

::-webkit-scrollbar {
	width: 10px;
	height: 4px;
	background-color: #333;
}

::-webkit-scrollbar-track {
	background-color: #333;
}

::-webkit-scrollbar-thumb {
	background-color: #444;
	border-radius: 10px
}

使用方法

1、将上面的css样式代码复制粘贴到Blues主题的主题设置-DIY样式,保存即可。

WordPress Blues主题暗黑模式美化css样式代码分享

2、将代码写入主题的diy.css文件中,保存即可。

标题:WordPress Blues主题暗黑模式美化css样式代码分享

分类:WordPress资讯

版权:wpToo教程网(wpToo.com)所分享发布内容,部分为网络转载,如有侵权请立即联系我们,我们第一时间删除并致歉!

评论

邮箱地址不会被公开。 必填项已用*标注

  • 等风也等你 等风也等你
    回复

    谢谢分享,喜欢晚上模式

  • 相关文章