Add Setting to Accent Color for Links and Headings

Ideas
1

By adding an option to the Brand settings page for the Accent color, we can control the text- and background color for links, buttons and headings.

Why? For many of us, it is very hard to find a color that matches the brand (what the website is about, the logo etc.) that works for both Light and Dark theme.

2

Hey, if you want you could use a little javascript to change the accent color when in dark mode. I used this:

document.documentElement.style.setProperty('--ghost-accent-color', '#cccccc');

And paired with this script so it’ll automatically change for people with darkmode on their computer turned on. And seems like you need to inject it into the footer to make it work right.

<script>
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    document.documentElement.classList.add('dark-mode');
    document.documentElement.style.setProperty('--ghost-accent-color', '#cccccc');
}
</script>
3

One hiccup is getting to make it change the portal accent color… that I havn’t figured out yet

4

Change the location of from where the portal.min.js is loaded from and change it however you see fit. You can do this by editing your config.environment.json file.

5

I’ll review that and modify it later. As of now, with Dawn, it sets the color you choose no matter dark or light.

6

Ah okay, i’m using the default Casper theme, so it could be more easily changeable by calling css for this particular theme. Maybe for your dark theme you’ll need a different variable?

7

Most likely, yes. I am trying to understand how to enforce dark mode whereof the tables are turned as in; instead of dark mode being the option to turn on, light mode is.

8

You could try something like this, but just reverse it so darkmode is on by default and people click the button to turn it off. Like before you’ll probably need to find the variables that work for your theme, but the concept should be the same:

<script type="text/javascript">
// check for saved 'darkMode' in localStorage
let darkMode = localStorage.getItem('darkMode'); 

const darkModeToggle = document.querySelector('#dark-mode-toggle');

const enableDarkMode = () => {
  // 1. Add the class to the body
  document.body.classList.add('global-hash-dark-version');
  // 2. Update darkMode in localStorage
  localStorage.setItem('darkMode', 'enabled');
}

const disableDarkMode = () => {
  // 1. Remove the class from the body
  document.body.classList.remove('global-hash-dark-version');
  // 2. Update darkMode in localStorage 
  localStorage.setItem('darkMode', null);
}
 
// If the user already visited and enabled darkMode
// start things off with it on
if (darkMode === 'enabled') {
  enableDarkMode();
}

// When someone clicks the button
darkModeToggle.addEventListener('click', () => {
  // get their darkMode setting
  darkMode = localStorage.getItem('darkMode'); 
  
  // if it not current enabled, enable it
  if (darkMode !== 'enabled') {
    enableDarkMode();
  // if it has been enabled, turn it off  
  } else {  
    disableDarkMode(); 
  }
});
</script>
9

Thank you! And thanks for taking the time to help out. I really need to brush up on my overall JS skills (not to mention handlebars) :slight_smile: Especially since I’m planning a article series on “getting started with Ghost, coming from WordPress”.

There are a lot of ground to cover.