Artitalk
Artitalk copied to clipboard
关于黑暗模式下的css样式配置问题
描述你想实现或修改的功能
项目中的 main.css
样式文件备注有些稀少,我比较难找到合适的地方进行修改。
我想知道是否存在修改暗黑模式下的背景色、编辑框文字以及小图标颜色(显示设备旁的小电脑和评论的气泡等)的接口。
其他内容 另外,如下几个样式的作用我没有搞明白
#artitalk_main body.theme-dark .cbp_tmtimeline::before{
}
#artitalk_main .zuiliangdezai {
}
最亮的崽让我笑了3分钟,但我确实不知道它是干什么的。 如果可能的话,希望css文件有更为详细的注释,以方便自定义样式。
这个暗色模式属于是做的时候就没有考虑到,如果以后有能力我可能会试着加一下吧🫡
#artitalk_main body.theme-dark .cbp_tmtimeline::before{
} /*这个应该是之前某位小伙伴加的暗色适配,用来修改每个气泡小箭头的颜色*/
#artitalk_main .zuiliangdezai {
}/*zuiliangdezai是我用来区分当前显示的表情分类的*/
感谢反馈,以后这些问题我都会尽力改进
哈哈果然也有小伙伴需求夜间模式~我之前自己改的是这样的:
/* 上一个说说框背景和颜色 */
[data-theme='dark'] #artitalk_main .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
background: #333030;
color: #e3dede;
}
/* 下一个说说框背景和颜色 */
[data-theme='dark'] #artitalk_main .cbp_tmtimeline>li .cbp_tmlabel {
background: #333030;
color: #e3dede;
}
/* 右边框颜色 */
[data-theme='dark'] #artitalk_main .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
border-right-color: #333030;
}
[data-theme='dark'] #artitalk_main .cbp_tmtimeline>li .cbp_tmlabel:after {
border-right-color: #333030;
}
/* 加载更多按钮 */
[data-theme='dark'] #artitalk_main .at_button {
background: #333030;
color: #f5f5f5;
}
/* 评论小气泡 */
[data-theme='dark'] #artitalk_main path {
fill: rgb(227, 222, 222);
}
/* 发布说说背景 */
[data-theme='dark'] #article-container #artitalk_main textarea#neirong {
border: 1px solid #ffffffdb;
background-color: #ffffff00;
color: #ffffff;
}
/* 邮箱框背景 */
[data-theme='dark'] #article-container #artitalk_main input#email {
border: 1px solid #ffffffdb;
background-color: #ffffff00;
color: #ffffff;
}
/* 昵称框背景 */
[data-theme='dark'] #article-container #artitalk_main imput#commentNick {
border: 1px solid #ffffffdb;
background-color: #ffffff00;
color: #ffffff;
}
/* 表情框背景 */
[data-theme='dark'] #article-container #artitalk_main .shuoshuo_emoji {
border: 1px solid #ffffff;
border-radius: 6px 6px 0 0;
height: 120px;
overflow: auto;
margin-top: 10px;
border-bottom: none;
}
[data-theme='dark'] #article-container #artitalk_main div#shuoshuo_emojiswitch {
height: 40px;
width: auto;
border-radius: 0 0 6px 6px;
border-collapse: collapse;
border: 1px solid #ffffff;
border-top: none;
}
我用的是butterfly主题,前面[data-theme='dark']
意思是切换夜间模式下的样式,最后就差评论数字没法改颜色了,期待未来夜间模式的适配~!