Casper - The dark mode enabled version - Free

Marketplace
1

Hello :slight_smile:

Few people within the forum and outside have been asking me to develop a dark mode to the Ghost theme after taking a look at my website.

2019-04-05_11-05-55
2019-04-05_11-05-551210Ă—969 1.5 MB

I know there is already a dark version of Casper theme available in the forum but this is just the vanilla version of the Casper theme with minimal changes to the source.

The source may help you to see the difference between files and you might be able to adopt the changes to your Ghost site.

Important:
After uploading the theme, you must copy and paste the script below into Code injection -> Site Footer in Ghost Admin.

<script>
    document.onkeyup = function(e) {
        if (e.altKey && e.which == 78) {
            localStorage.setItem('mode', (localStorage.getItem('mode') || 'dark') === 'dark' ? 'light' : 'dark');
            localStorage.getItem('mode') === 'dark' ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark');
        }
    };
</script>

Enable Dark Theme
Pressing Alt + N keys together will toggle the dark mode.

You can download the theme from the link below:

Download Theme.zip file

The source is available on the link below

Few screenshots of the theme:

Home
Home1349Ă—2213 537 KB

Author
Author1348Ă—2026 467 KB

Tag
Tag1348Ă—1927 475 KB

Page
Page1349Ă—1421 313 KB

Post
Post1349Ă—5111 1.22 MB

Well, I understand that you may have questions and please feel free to ask me anytime. Also, I do not hold any copyrights to the changes and you are free to do whatever you want to do with the source. :slight_smile:

bear with me for the CSS variable names. I could not think of any better names… :neutral_face:

3 Likes
2

I downloaded the theme straight from the github and uploaded it.
Then pasted the code into my {{ghost_foot}}, but it does not seem to work when I press ALT + N.

I also removed all the other scripts, so nothing is interfering with it. Don’t know how to proceed from here.

image
image.png1076Ă—93 3.21 KB

image
image.png710Ă—391 12 KB

3

May I know if you pressed Left Alt or the right one? I just read that right Alt (Alt Graph) key is not catch by e.altKey. :neutral_face:

4

I did press the left alt key.
As you can see from the screenshot, I put in a console.log line of code.

It correctly registers that i press ALT + N, and it prints it in the console. But the dark mode is not applied. I tried it in both chrome and firefox.

5

Can you send me a link of the website to check?

6

Sure, let me revert it. 2 minutes

I only tested it briefly, because I don’t want it interfering with users :smiley:

EDIT: Its running now

mlfromscratch.com

7

I can see you haven’t installed my version of the theme… from the source I can see the original Casper theme.
If you correctly installed the theme, it should be looks like this.

image
image969Ă—229 6.06 KB

I hope you have downloaded the this file.
https://github.com/truekasun/Casper/releases/download/2.9.7-D/casper-dark.zip

8

Ohh I must have clicked away from the github, I thought I just needed to download the github.

EDIT: Thanks it works now.

9

Great! I have modified the original post with the zip file link to avoid other users from misconception.
Please be aware that right Alt key is not working with this script.

You can change the shortcut key combination with the help of following website:

10

@truekasun is there any Way to make this „Dark Mode“ as a permanent Solution, without activation beforehand? Just load the Webseite and there it is, always on!?!

Thank you so much for sharing this Piece of Work, i like „Dark Mode“ more then anything else on Websites but that’s just me. :wink:

11

I think you would just have to add a body class “dark” to make the dark mode work by default.

12

Hello @KranzKrone,

@harishchouhan is right. This can be done in a few ways but the best way to do this is by adding the dark class into the body tag.

I will add another compiled version of the theme that has been set the dark mode by default.
You will be able to download in in the release page on the repository in a few minutes.

1 Like
13

@truekasun thank you so much for that. :wink: I will try it out next time I log in to my Ghost Instance.

1 Like
14

I also made a button for it. It’s pretty nice having a button instead of a key combination :slight_smile:

image
image.jpg1126Ă—733 198 KB

1 Like
15

How can I insert this Button?

16

You have to make an svg file for it and make a button, then make a function which your button calls. This function should do the same as the key combination.

1 Like
17

@MLFromScratch I already thought that it would be a Coding thingy. Nothing for me, anymore.

@truekasun another idea would be to make the switch between Bright/Dark automatic, every 12 hours or so, if it’s possible at least.

Thank you again for the updated Theme.

18

I will add a button to the next version. The reason I didn’t add another button is I didn’t want to touch the layout you already love.

But I feel it’s essential to have a button. Also I’ll try to automate the process.

Thanks for the ideas!

1 Like
19

Here is how I did it. You might want to do it some other way, but this is the most convenient way, that I thought of.

1. Make a new file in /icons called night.hbs. Copy paste this into the new file

.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="48 58 400 400"><path d="M216.529,93.2c-61.2,0-111.2,50-111.2,111.2c0,32,14,62.8,37.6,83.6c17.6,17.6,16,55.2,15.6,55.6
				c0,2,0.4,3.6,2,5.2c1.2,1.2,3.2,2,4.8,2h102c2,0,3.6-0.8,4.8-2c1.2-1.2,2-3.2,2-5.2c0-0.4-2-38,15.6-55.6
				c0.4-0.4,0.8-0.8,1.2-1.2c23.2-21.2,36.8-51.2,36.8-82.4C327.729,143.2,277.729,93.2,216.529,93.2z M280.529,277.6
				c-0.4,0.4-1.2,1.2-1.2,1.6c-15.6,16.8-18.4,44.4-18.8,57.6h-88.4c-0.4-13.2-3.2-42-20-59.2c-21.2-18.4-33.6-45.2-33.6-73.6
				c0-54,43.6-97.6,97.6-97.6s97.6,43.6,97.6,97.6C313.729,232.4,301.729,259.2,280.529,277.6z"/>
			<path d="M216.129,121.6c-3.6,0-6.8,3.2-6.8,6.8c0,3.6,3.2,6.8,6.8,6.8c40.4,0,72.8,32.8,72.8,72.8
				c0,3.6,3.2,6.8,6.8,6.8c3.6,0,6.8-3.2,6.8-6.8C302.929,160.4,264.129,121.6,216.129,121.6z"/>
			<path d="M260.529,358.4h-88.8c-9.2,0-16.8,7.6-16.8,16.8s7.6,16.8,16.8,16.8h88.4
				c9.6-0.4,17.2-7.6,17.2-16.8C277.329,366,269.729,358.4,260.529,358.4z M260.529,378h-88.8c-1.6,0-3.2-1.2-3.2-3.2
				s1.2-3.2,3.2-3.2h88.4c1.6,0,3.2,1.2,3.2,3.2S262.129,378,260.529,378z"/>
			<path d="M247.329,398.8h-62.4c-9.2,0-16.8,7.6-16.8,16.8s7.6,16.8,16.8,16.8h62.4
				c9.2,0,16.8-7.6,16.8-16.8C264.129,406,256.529,398.8,247.329,398.8z M247.329,418.4h-62.4c-1.6,0-3.2-1.2-3.2-3.2
				s1.2-3.2,3.2-3.2h62.4c1.6,0,3.2,1.2,3.2,3.2S248.929,418.4,247.329,418.4z"/>
			<path d="M216.129,60c4,0,6.8-3.2,6.8-6.8V6.8c0-3.6-3.2-6.8-6.8-6.8c-3.6,0-6.8,3.2-6.8,6.8v46.4
				C209.329,56.8,212.529,60,216.129,60z"/>
			<path d="M329.329,34.4c-3.2-2.4-7.2-1.2-9.2,1.6l-25.6,38.4c-2.4,3.2-1.6,7.6,1.6,9.6
				c1.2,0.8,2.4,1.2,3.6,1.2c2.4,0,4.4-1.2,5.6-3.2l25.6-38.4C333.329,40.8,332.529,36.4,329.329,34.4z"/>
			<path d="M134.929,83.6c1.2,0,2.4-0.4,3.6-1.2c3.2-2,4-6.4,2-9.6l-24.8-38.8c-2-3.2-6.4-4-9.6-2
				s-4,6.4-2,9.6l24.8,38.8C130.529,82.8,132.529,83.6,134.929,83.6z"/>
			<path d="M86.529,126l-40.4-22c-3.2-1.6-7.6-0.4-9.2,2.8c-2,3.2-0.8,7.6,2.8,9.2l40.4,22
				c1.2,0.4,2,0.8,3.2,0.8c2.4,0,4.8-1.2,6-3.6C90.929,132,89.729,127.6,86.529,126z"/>
			<path d="M395.729,106.8c-1.6-3.2-6-4.4-9.2-2.8l-40.8,22c-3.2,1.6-4.4,6-2.8,9.2c1.2,2.4,3.6,3.6,6,3.6
				c1.2,0,2.4-0.4,3.2-0.8l40.8-22C396.129,114.4,397.329,110,395.729,106.8z"/></svg>

2. Insert this code in /partials/site-nav.hbs just before {{#if @labs.subscribers}}, it’s at about line 20-23

.

<a class="social-link social-link-tw" href="#" style="padding-left: 10px;" title="Night Mode" target="_blank" rel="noopener" onclick="ActivateDeactiveNightMode();return false;">{{> "icons/night"}}</a>

3. In default.hbs insert this script at the bottom, just before the </body>

.

<script>
    function ActivateDeactiveNightMode(){
        localStorage.setItem('mode', (localStorage.getItem('mode') || 'dark') === 'dark' ? 'light' : 'dark');
        localStorage.getItem('mode') === 'dark' ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark');
    }
</script>
2 Likes
20

Could it be, this aint working anymore?