[tutorial] support night dark mode

imaegoo commented 5 years ago

Update: Icarus v4.1 night mode support

Github diff: https://github.com/imaegoo/hexo-theme-icarus/commit/ac92cdc5f87671e9ac67f4dbb85eb546b68d9bf4

Full theme pack download: https://github.com/imaegoo/hexo-theme-icarus/archive/night4.zip

Preview

preview

Live Preview

https://www.imaegoo.com/

Attention

This extension is NOT FULLY TESTED, so it may not fully cover the theme styles, if you find something wrong (such as bright things in night mode), please report it in this issue, do not open new issue.

Usage

(FOR ICARUS 4.1) Merge night4 branch from imaegoo/hexo-theme-icarus into your icarus theme folder, or dowmload zip.

(FOR ICARUS 3.0) Merge night3 branch from imaegoo/hexo-theme-icarus into your icarus theme folder, or dowmload zip. (FOR ICARUS 2.0) Merge night branch from imaegoo/hexo-theme-icarus into your icarus theme folder, or dowmload zip.
If you configured an image logo, you should prepare a logo for night mode, then apply them in themes/icarus/_config.yml.
```
logo:
light: /images/logo.png
dark: /images/logo-dark.png
```

Modify

If you want to customize your theme, you can modify themes/icarus/source/css/night.styl.

Thanks

Universe background from https://github.com/fan-lv/Fan

removeif commented 5 years ago

add another live demo of icarus night mode 😊 https://removeif.github.io/removeif-demo/

nameussi commented 4 years ago

@imaegoo 切换黑色主题后footer变透明了，尝试改了几次都无法定义background-color。就是遇到这个问题，其他的都挺好。

Anne416wu commented 4 years ago

屏幕在tablet大小的时候，navbar-menu会变白色，作以下修改即可

.navbar,
+.navbar-menu,
.card
        background-color: rgba(40,44,52,0.5)
        backdrop-filter: none
        -webkit-backdrop-filter: none

imaegoo commented 4 years ago

Updated night mode for Icarus 3.0.

https://github.com/imaegoo/hexo-theme-icarus/commit/fc3d016ae1c999347bd9ecbf3cc656e1382db06d

imaegoo commented 4 years ago

@ppoffice 请问是否有官方适配深色模式的计划？最近许多朋友问我的 night mode 相关的问题，如果有计划把这个做成官方的功能，那就太好了。我没有设计方面的才能，所以不太好意思提交这方面的 PR。

ppoffice commented 4 years ago

@removeif 暂时没有

krisnaxda commented 4 years ago

where's the toggle button to activate night mode?

imaegoo commented 4 years ago

where's the toggle button to activate night mode?

@krisnaxda It should be at the top right of the page, did you follow the step to merge night branch to your theme? If yes, please check navbar.jsx and find the toggle button id="night-nav".

krisnaxda commented 4 years ago

where's the toggle button to activate night mode?

@krisnaxda It should be at the top right of the page, did you follow the step to merge night branch to your theme? If yes, please check navbar.jsx and find the toggle button id="night-nav".

yes i merge night3.0 branch and then i try to run with hexo generate -d it says Package hexo-component-inferno's version (0.3.0) does not satisfy the required version (^0.2.7).

INFO === Checking package dependencies === ERROR Package hexo-component-inferno's version (0.3.0) does not satisfy the required version (^0.2.0). ERROR Please install the missing dependencies your Hexo site root directory: ERROR npm install --save hexo-component-inferno@^0.2.0

so i installing inferno 0.27 and try to run again and still same

*edit inferno 0.2.0

imaegoo commented 3 years ago

Update: Icarus v4.1 night mode support

Github diff: https://github.com/imaegoo/hexo-theme-icarus/commit/ac92cdc5f87671e9ac67f4dbb85eb546b68d9bf4

Full theme pack download: https://github.com/imaegoo/hexo-theme-icarus/archive/night4.zip

GanZhiXiong commented 3 years ago

@imaegoo 不错不错

我觉得你这个目录得滑到最底部才能看到，如果显示在靠上会好点。
配色不是很好，配置可以仿照下Typora的黑暗模式配色。

punksinatra commented 2 years ago

@imaegoo anyway to make dark them the default and disable the button on top?

imaegoo commented 2 years ago

@imaegoo anyway to make dark them the default and disable the button on top?

@punksinatra

themes\icarus\layout\layout.jsx

-            <body class={`is-${columnCount}-column`}>
-                <script type="text/javascript" src="/js/imaegoo/night.js"></script>
+            <body class={`is-${columnCount}-column night`}>

themes\icarus\layout\common\navbar.jsx

-                        <a class="navbar-item night" id="night-nav" title="Night Mode" href="javascript:;">
-                            <i class="fas fa-moon" id="night-icon"></i>
-                        </a>

punksinatra commented 2 years ago

@imaegoo anyway to make dark them the default and disable the button on top?

@punksinatra

themes\icarus\layout\layout.jsx

-            <body class={`is-${columnCount}-column`}>
-                <script type="text/javascript" src="/js/imaegoo/night.js"></script>
+            <body class={`is-${columnCount}-column night`}>

themes\icarus\layout\common\navbar.jsx

-                        <a class="navbar-item night" id="night-nav" title="Night Mode" href="javascript:;">
-                            <i class="fas fa-moon" id="night-icon"></i>
-                        </a>

Thank you.

punksinatra commented 2 years ago

@imaegoo

The navbar stays white when the site is viewed on mobile. Just reporting

maiixu commented 2 years ago

@imaegoo

The navbar stays white when the site is viewed on mobile. Just reporting

Anne416wu's answer above solves the problem.

ppoffice / hexo-theme-icarus