How to enable dark mode in Casper 3.0 theme!? 
I’m new to Ghost, I was using old modified theme by a Github user.
But in new update Ghost officially announced there is dark mode availe on Casper 3.0 theme!
But I didn’t know how to enable it.
PLEASE SOMEONE HELP ME!!!
Hey there @helpme 
. The latest version of Casper listens to the light and dark mode in your operating system settings. Dark mode for Casper will be active whenever someone is viewing the site with their dark mode turned on. I’ve attacked a gif to show this in action:
Thanks 
But sadly I’m not a Mac user so I can’t view this features. 
I want all users to enjoy the dark mode! How to edit the theme and make it as same like this?
Example: mlfromscratch.com
Check this website!
You’ll need to be familiar with CSS and comfortable with editing your own version of the theme. You’’ need to remove the line @media (prefers-color-scheme: dark) { as well as the closing bracket for this line (the last } in the file) from /assets/css/screen.css.
If you get stuck then please refer to our Casper theme docs on GitHub: GitHub - TryGhost/Casper: The default theme for Ghost
Thanks again,
I followed your instructions on it, removed the whole line from /assets/css/screen.css
I tested that on Ghost developer mode but it doesn’t worked for me.
If you don’t mind can you please make a screenshot or gif about that.
I’m still a beginner
Did you
I removed this entire line…
/* 12. Dark Mode
/* ---------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
body {
color: rgba(255, 255, 255, 0.75);
background: var(--darkmode);
}
img {
opacity: 0.9;
}
.site-header-background:before {
background: rgba(0,0,0,0.6);
}
.post-feed {
background: var(--darkmode);
}
.post-card,
.post-card:hover {
border-bottom-color: color(var(--darkmode) l(+8%));
}
.author-profile-image {
background: var(--darkmode);
}
.post-card-byline-content a {
color: rgba(255, 255, 255, 0.75);
}
.post-card-byline-content a:hover {
color: #fff;
}
.post-card-image {
background: var(--darkmode);
}
.post-card-title {
color: rgba(255, 255, 255, 0.85);
}
.post-card-excerpt {
color: color(var(--midgrey) l(+10%));
}
.author-avatar,
.static-avatar {
border-color: color(var(--darkgrey) l(+2%));
}
.site-main,
.post-template .site-main {
background: var(--darkmode);
}
.post-full-content {
background: var(--darkmode);
}
.post-full-title {
color: rgba(255, 255, 255, 0.9);
}
.post-full-custom-excerpt {
color: color(var(--midgrey) l(+10%));
}
.post-full-image {
background-color: color(var(--darkmode) l(+8%));
}
.post-full-byline {
border-top-color: color(var(--darkmode) l(+15%));
}
.post-full-byline-meta h4 a {
color: rgba(255, 255, 255, 0.75);
}
.post-full-byline-meta h4 a:hover {
color: #fff;
}
.author-list-item .author-card {
background: color(var(--darkmode) l(+4%));
box-shadow: 0 12px 26px rgba(0,0,0,0.4);
}
.author-list-item .author-card:before {
border-top-color: color(var(--darkmode) l(+4%));
}
.post-full-content h1,
.post-full-content h2,
.post-full-content h3,
.post-full-content h4,
.post-full-content h6 {
color: rgba(255, 255, 255, 0.9);
}
.post-full-content a {
color: #fff;
box-shadow: inset 0 -1px 0 #fff;
}
.post-full-content strong {
color: #fff;
}
.post-full-content em {
color: #fff;
}
.post-full-content code {
color: #fff;
background: #000;
}
hr {
border-top-color: color(var(--darkmode) l(+8%));
}
.post-full-content figcaption {
color: rgba(255, 255, 255, 0.6);
}
.post-full-content .kg-bookmark-container {
color: rgba(255, 255, 255, 0.75);
box-shadow: 0 0 1px rgba(255,255,255,0.9);
}
.kg-bookmark-title {
color: #fff;
}
.kg-bookmark-description {
color: rgba(255, 255, 255, 0.75);
}
.kg-bookmark-metadata {
color: rgba(255, 255, 255, 0.75);
}
.site-archive-header .no-image {
color: rgba(255, 255, 255, 0.9);
background: var(--darkmode);
}
.site-archive-header .no-image .site-header-content {
border-bottom-color: color(var(--darkmode) l(+15%));
}
.site-header-content .author-profile-image {
box-shadow: 0 0 0 6px hsla(0,0%,100%,0.04);
}
.subscribe-form {
border: none;
background: linear-gradient(color(var(--darkmode) l(-6%)), color(var(--darkmode) l(-3%)));
}
.subscribe-form-title {
color: rgba(255, 255, 255, 0.9);
}
.subscribe-form p {
color: rgba(255, 255, 255, 0.7);
}
.subscribe-email {
border-color: color(var(--darkmode) l(+6%));
color: rgba(255, 255, 255, 0.9);
background: color(var(--darkmode) l(+3%));
}
.subscribe-email:focus {
border-color: color(var(--darkmode) l(+25%));
}
.subscribe-form button {
opacity: 0.9;
}
.subscribe-form .invalid .message-error,
.subscribe-form .error .message-error {
color: color(var(--red) l(+5%) s(-5%));
}
.subscribe-form .success .message-success {
color: color(var(--green) l(+5%) s(-5%));
}
}
And created as a zip file and uploaded to the themes and activated but it’s still same
If you don’t mind can you send me your modified theme zip file via mail or Github repo?
I’ll try to understand the structure.
When I have to modify the CSS I work directly in this path
/assets/built/screen.css
and not in this
/assets/css/screen.css
and I’ve never had any problems
About the color switch, I tested on the mac works correctly, how to do the same thing from windows and from ubuntu? it’s possible?
If you enable system-wide dark theme in settings and have a newer version of chrome, it will work. I’m not sure what the minimum version of chrome you need is
Yeah! as @MLFromScratch and @DavidDarnes said we have to modify the CSS file,
Now it’s working fine for me. 
My bad! I was misunderstood. we don’t need to remove everything.
Just remove @media (prefers-color-scheme: dark) and { } that’s it.
I edited css from both paths /assets/built/screen.css & /assets/css/screen.css
Thanks again ,
@DavidDarnes
@MLFromScratch
@vikaspotluri123
@giacomosilli
This also same solution for this topic
From windows I managed to solve, I had too much modified some tags of the css.
The linux problem remains, I haven’t found a solution yet.
I would rather have a switch / button where users can choose themselves. Like in this thread. Bu that does not seem to work no more.
What browser are you testing with on Linux? When Chromium is using the GTK Dark Mode them, there is a known bug (open for multiple years!) about it not picking up the dark mode preference for websites. Firefox doesn’t have that problem.
https://bugs.chromium.org/p/chromium/issues/detail?id=998903
I want this theme like I have the casper theme but that ghost title at the top is not there in my theme so could you please send me the XML file
I’ve written an auto add dark mode toggle on Casper theme here The dark mode toggle for Casper theme without modifying it