ArtitalkJS / Artitalk

通过leancloud实现的可实时发布说说的js
https://artitalk.js.org
MIT License
321 stars 52 forks source link

关于黑暗模式下的css样式配置问题 #96

Open Lyrikp opened 2 years ago

Lyrikp commented 2 years ago

描述你想实现或修改的功能 项目中的 main.css 样式文件备注有些稀少,我比较难找到合适的地方进行修改。 我想知道是否存在修改暗黑模式下的背景色、编辑框文字以及小图标颜色(显示设备旁的小电脑和评论的气泡等)的接口。

其他内容 另外,如下几个样式的作用我没有搞明白

#artitalk_main body.theme-dark .cbp_tmtimeline::before{
}

#artitalk_main .zuiliangdezai {
}

最亮的崽让我笑了3分钟,但我确实不知道它是干什么的。 如果可能的话,希望css文件有更为详细的注释,以方便自定义样式。

Drew233 commented 2 years ago

这个暗色模式属于是做的时候就没有考虑到,如果以后有能力我可能会试着加一下吧🫡

#artitalk_main body.theme-dark .cbp_tmtimeline::before{
} /*这个应该是之前某位小伙伴加的暗色适配,用来修改每个气泡小箭头的颜色*/

#artitalk_main .zuiliangdezai {
}/*zuiliangdezai是我用来区分当前显示的表情分类的*/

感谢反馈,以后这些问题我都会尽力改进

SaraKale commented 2 years ago

哈哈果然也有小伙伴需求夜间模式~我之前自己改的是这样的:

/* 上一个说说框背景和颜色 */
[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']意思是切换夜间模式下的样式,最后就差评论数字没法改颜色了,期待未来夜间模式的适配~!