Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Lyrikp opened this issue May 31, 2022 · 2 comments
Open

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

Lyrikp opened this issue May 31, 2022 · 2 comments

Comments

@Lyrikp
Copy link

Lyrikp commented May 31, 2022

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

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

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

#artitalk_main .zuiliangdezai {
}

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

@Drew233
Copy link
Collaborator

Drew233 commented May 31, 2022

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

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

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

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

@SaraKale
Copy link

SaraKale commented Jun 5, 2022

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants