# Alto theme, can you help me set dark mode as default?

**URL:** <https://forum.ghost.org/t/alto-theme-can-you-help-me-set-dark-mode-as-default/20122>\
**Category:** Themes\
**Created:** [February 11, 2021, 6:26am UTC](https://forum.ghost.org/t/alto-theme-can-you-help-me-set-dark-mode-as-default/20122 "2021-02-11T06:26:13Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![shodandad](https://avatars.discourse-cdn.com/v4/letter/s/9dc877/32.png) [@shodandad](https://forum.ghost.org/u/shodandad)\
**Post date:** [February 11, 2021, 6:26am UTC](https://forum.ghost.org/t/alto-theme-can-you-help-me-set-dark-mode-as-default/20122/1 "2021-02-11T06:26:13Z")

</div>

> **[GitHub - TryGhost/Alto: A clean, minimalist theme featuring a light and dark...](https://github.com/TryGhost/Alto)**
>
> A clean, minimalist theme featuring a light and dark mode for Ghost - GitHub - TryGhost/Alto: A clean, minimalist theme featuring a light and dark mode for Ghost

I like this theme a lot, but I would like dark mode to be the default.

Not sure how to do that.

Any help would be greatly appreciated.

---

<div class="post-metadata">

**Author:** ![elijahsgh](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/elijahsgh/32/6949_2.png) [@elijahsgh](https://forum.ghost.org/u/elijahsgh)\
**Post date:** [February 11, 2021, 6:52am UTC](https://forum.ghost.org/t/alto-theme-can-you-help-me-set-dark-mode-as-default/20122/2 "2021-02-11T06:52:03Z")

</div>

You might like this solution: [Disable Dark Mode completely in Casper with code injection - #16 by minimaluminium](https://forum.ghost.org/t/disable-dark-mode-completely-in-casper-with-code-injection/14791/16)

---

<div class="post-metadata">

**Author:** ![minimaluminium](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/minimaluminium/32/2652_2.png) [@minimaluminium](https://forum.ghost.org/u/minimaluminium)\
**Post date:** [February 11, 2021, 8:22am UTC](https://forum.ghost.org/t/alto-theme-can-you-help-me-set-dark-mode-as-default/20122/3 "2021-02-11T08:22:05Z")

</div>

Hey @shodandad, you can add this script in `Code injection > Site Header` to make the dark theme default. Alto uses a localStorage item with the key `alto_dark` to toggle the dark mode, and this script sets the value `true` by default.

```auto
<script>
    localStorage.setItem('alto_dark', 'true');
</script>

```

---

<div class="post-metadata">

**Author:** ![sfkpmr](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/sfkpmr/32/13340_2.png) [@sfkpmr](https://forum.ghost.org/u/sfkpmr)\
**Post date:** [May 23, 2021, 8:33pm UTC](https://forum.ghost.org/t/alto-theme-can-you-help-me-set-dark-mode-as-default/20122/4 "2021-05-23T20:33:27Z")

</div>

Thanks, seems to be a bit hit and miss on whether or not it applies on first page load though.

Always applies on a reload.

---

<div class="post-metadata">

**Author:** ![Zihao](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/zihao/32/13976_2.png) [@Zihao](https://forum.ghost.org/u/Zihao)\
**Post date:** [July 6, 2021, 9:08pm UTC](https://forum.ghost.org/t/alto-theme-can-you-help-me-set-dark-mode-as-default/20122/5 "2021-07-06T21:08:57Z")

</div>

@sfkpmr

the script @minimaluminium provided has problems with the first load and reload. Here is a better solution that works on the first load and will not interfere with the theme toggle.

```auto
<script>
var html = document.querySelector("html");
if (localStorage.getItem('alto_dark') === null) {
    localStorage.setItem('alto_dark', true);
    html.classList.add('dark-mode');
}
</script>

```

---

<div class="post-metadata">

**Author:** ![sfkpmr](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/sfkpmr/32/13340_2.png) [@sfkpmr](https://forum.ghost.org/u/sfkpmr)\
**Post date:** [July 8, 2021, 6:46pm UTC](https://forum.ghost.org/t/alto-theme-can-you-help-me-set-dark-mode-as-default/20122/6 "2021-07-08T18:46:20Z")

</div>

Excellent, thanks a lot!