hexo-theme-butterfly/source/css/_mode/darkmode.styl
Jerry cb82bfb7b6 feat: 替換 Justified Gallery 為 flickr-justified-gallery
feat: 完全移除 jquery
feat: 清除配置文件的CDN, 默認 CDN 不再顯示在 config
feat: 切換夜間模式後, mermaid 也會切換夜間主題
feat: 移除騰訊分析
feat: 移除右下角字體調整按鈕
feat: 本地搜索可處理 json
feat: 右下角按鈕自定義順序
feat: 右小角按鈕 UI 微調
improvement: 手機端更改閲讀模式退出按鈕到右下角
improvement: photofigcaption 和 fancybox 的 figcaption 優先顯示 圖片的title屬性,然後是 alt 屬性
improvement: 首頁ui微調
improvement: 禁止一些瀏覽器會出現點擊左下角按鈕出現放大網頁的行為
improvement: js 優化
fix: 修復窗口大小改變時,導航欄的ui 可能會錯亂的 bug
fix: 修復 pjax 下, twikoo 評論獲取是上一篇評論的 bug
fix: 壓縮 html 代碼後, mermaid 顯示正常
2021-10-12 23:27:56 +08:00

143 lines
3.7 KiB
Stylus

if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
[data-theme='dark']
--global-bg: darken(#121212, 2)
--font-color: alpha(#FFFFFF, .7)
--hr-border: alpha(#FFFFFF, .4)
--hr-before-color: alpha(#FFFFFF, .7)
--search-bg: #121212
--search-input-color: alpha(#FFFFFF, .7)
--search-result-title: alpha(#FFFFFF, .9)
--preloader-bg: darken(#121212, 2)
--preloader-color: alpha(#FFFFFF, .7)
--tab-border-color: #2c2c2c
--tab-botton-bg: #2c2c2c
--tab-botton-color: alpha(#FFFFFF, .7)
--tab-button-hover-bg: lighten(#121212, 15)
--tab-button-active-bg: #121212
--card-bg: #121212
--sidebar-bg: #121212
--btn-hover-color: lighten(#121212, 40)
--btn-color: alpha(#FFFFFF, .7)
--btn-bg: lighten(#121212, 5)
--text-bg-hover: lighten(#121212, 15)
--light-grey: alpha(#FFFFFF, .7)
--white: alpha(#FFFFFF, .9)
--text-highlight-color: alpha(#FFFFFF, .9)
--blockquote-color: alpha(#FFFFFF, .7)
--blockquote-bg: lighten(#121212, 10)
--reward-pop: lighten(#121212, 10)
--toc-link-color: alpha(#FFFFFF, .6)
--hl-color: alpha(#FFFFFF, .7)
--hl-bg: lighten(#121212, 2)
--hltools-bg: lighten(#121212, 3)
--hltools-color: #90a4ae
--hlnumber-bg: lighten(#121212, 2)
--hlnumber-color: alpha(#FFFFFF, .4)
--hlscrollbar-bg: lighten(#121212, 5)
--hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9))
--timeline-bg: lighten(#121212, 5)
#web_bg:before,
#footer:before,
#page-header:before
position: absolute
width: 100%
height: 100%
background-color: alpha($dark-black, .7)
content: ''
#article-container
code
background: #2c2c2c
pre > code
background: lighten(#121212, 2)
figure.highlight
box-shadow: none
.note
code
background: $code-background
.aplayer
filter: brightness(.8)
kbd
border-color: #696969
background-color: #525252
color: #e2f1ff
//
#page-header
&.nav-fixed > #nav,
&.not-top-img > #nav
background: alpha(#121212, .8)
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
#post-comment
#comment-switch
if hexo-config('comments.text')
background: #2c2c2c !important
.switch-btn
filter: brightness(.8)
// note
if hexo-config('note.style') == 'modern' || hexo-config('note.style') == 'flat'
.note
filter: brightness(.8)
// hide-tags
.hide-button,
.btn-beautify,
.hl-label,
.post-outdate-notice,
.error-img,
#article-container iframe,
.gist,
.ads-wrap
filter: brightness(.8)
img
if hexo-config('lazyload.enable') && hexo-config('lazyload.blur') && !hexo-config('lazyload.placeholder')
filter: blur(0) brightness(.8)
else
filter: brightness(.8)
#aside-content .aside-list > .aside-list-item:not(:last-child)
border-bottom: 1px dashed alpha(#FFFFFF, .1)
// Gitalk
#gitalk-container
filter: brightness(.8)
svg
fill: alpha(#FFFFFF, .9) !important
// Disqusjs
#disqus_thread
#dsqjs
.dsqjs-tab-active,
.dsqjs-no-comment
color: alpha(#FFFFFF, .7)
.dsqjs-order-label
background-color: lighten(#121212, 5)
.dsqjs-post-body
color: alpha(#FFFFFF, .7)
code,
pre
background: #2c2c2c
blockquote
color: alpha(#FFFFFF, .7)
#artitalk_main #lazy
background: #121212
#operare_artitalk .c2
background: #121212