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.

Sign up for GitHub

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

Jump to bottom

[tutorial] support night dark mode #564

Open
imaegoo opened this issue Nov 30, 2019 · 16 comments
Open

[tutorial] support night dark mode #564

imaegoo opened this issue Nov 30, 2019 · 16 comments
Labels
tutorial:v2 Helpful tips and tuturials.

Comments

@imaegoo
Copy link
Contributor

imaegoo commented Nov 30, 2019 •
edited
Loading

Update: Icarus v4.1 night mode support

Github diff: imaegoo@ac92cdc

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

  1. (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.

  1. 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
@ppoffice ppoffice added discussion Any questions about this theme. tutorial:v2 Helpful tips and tuturials. and removed discussion Any questions about this theme. labels Nov 30, 2019
@removeif
Copy link
Contributor

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

@nameussi
Copy link

nameussi commented Dec 7, 2019

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

@Anne416wu
Copy link

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

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

@imaegoo
Copy link
Contributor Author

imaegoo commented Apr 8, 2020

Updated night mode for Icarus 3.0.

imaegoo@fc3d016

@imaegoo
Copy link
Contributor Author

imaegoo commented May 19, 2020

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

@ppoffice
Copy link
Owner

@removeif 暂时没有

@krisnaxda
Copy link

image
where's the toggle button to activate night mode?

@imaegoo
Copy link
Contributor Author

imaegoo commented Jun 19, 2020

image
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
Copy link

krisnaxda commented Jun 19, 2020 •
edited
Loading

image
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

ILAsoft pushed a commit to ILAsoft/hexo-theme-icarus that referenced this issue Aug 16, 2020
Night theme merge github.com/ppoffice/issues/564
1187e8d
@imaegoo
Copy link
Contributor Author

imaegoo commented Dec 31, 2020

Update: Icarus v4.1 night mode support

Github diff: imaegoo@ac92cdc

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

@GanZhiXiong
Copy link

@imaegoo 不错不错

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

@punksinatra
Copy link

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

@imaegoo
Copy link
Contributor Author

imaegoo commented Mar 26, 2022

@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
Copy link

@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
Copy link

@imaegoo

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

@maiixu
Copy link

maiixu commented Aug 16, 2022

@imaegoo

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

Anne416wu's answer above solves the problem.

Repository owner locked as resolved and limited conversation to collaborators Aug 16, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
tutorial:v2 Helpful tips and tuturials.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@ppoffice @removeif @imaegoo @punksinatra @GanZhiXiong @krisnaxda @Anne416wu @nameussi @maiixu