Return accent colour to the editor's dark mode links

Using Ghost
1

So apparently the accent colour has been removed from links in the editor’s dark mode (but not light mode) in the new editor “due to issues with some site’s accent colours being unreadable in either light/dark mode”. Which is understandable. However, if your site’s accent colour didn’t actually interfere with your dark mode usage in the old editor, and you’d like it to return, and you use uBlock Origin, here’s how you can add it back in.

Open up uBlock Origin and proceed to the My Filters tab. Add in the following ten lines, then replace yoursite.ghost.io with whatever your site’s domain is. Click on Apply Changes, reload the editor (while in dark mode), and you should see the changes.

yoursite.ghost.io##.koenig-lexical > .dark .kg-prose p a span:style(color: var(--kg-accent-color) !important)
yoursite.ghost.io##.koenig-lexical > .dark .kg-prose p a em:style(color: var(--kg-accent-color) !important)
yoursite.ghost.io##.koenig-lexical > .dark .kg-prose p a strong:style(color: var(--kg-accent-color) !important)
yoursite.ghost.io##.koenig-lexical > .dark .kg-prose p a strong:style(color: var(--kg-accent-color) !important)
yoursite.ghost.io##.koenig-lexical > .dark .kg-prose p a:style(text-decoration-color: var(--kg-accent-color) !important)
yoursite.ghost.io##.koenig-lexical > .dark .kg-prose blockquote > span a:style(color: var(--kg-accent-color) !important)
yoursite.ghost.io##.koenig-lexical > .dark .kg-prose blockquote > span a:style(text-decoration-color: var(--kg-accent-color) !important)
yoursite.ghost.io##.koenig-lexical > .dark .kg-prose ul a:style(color: var(--kg-accent-color) !important)
yoursite.ghost.io##.koenig-lexical > .dark .kg-prose ul a:style(text-decoration-color: var(--kg-accent-color) !important)
yoursite.ghost.io##.koenig-lexical > .dark .kg-prose h2 a:style(color: var(--kg-accent-color) !important)
yoursite.ghost.io##.koenig-lexical > .dark .kg-prose h3 a:style(color: var(--kg-accent-color) !important)
yoursite.ghost.io##.koenig-lexical .kg-prose :where(.dark a):not(:where(.not-kg-prose,[class~="not-kg-prose"] *)):style(font-weight:400 !important)

I’ve only been using this for two minutes, but that seems to have done the trick and I don’t think it’ll cause any conflicts elsewhere. If it does, or if I’ve missed something, let me know and I’ll amend it.

EDIT 23/10/23: Slight adjustment to reduce conflicts.

EDIT 24/10/23: I added in the .koenig-lexical > .dark selector so the changes only take effect on the editor’s dark mode, and I also switched the default HEX text colour to var(--kg-accent-color) as apparently it’s able to be recognised through uBlock Origin.

EDIT 8/11/23: Added in the 12th line for removal of the bolding of links (which isn’t needed in this case if you’re using your site’s brand colour).

2

Quick addition: if you want to apply this style for everybody visiting your site, and not just your own client, you could add this code injection directly through Ghost:

<style>
    .kg-prose a {
        color: #DDE1E5 !important;
        text-decoration-color: #DDE1E5 !important;
    }
</style>

Using .kg-prose a instead of defining all these styles individually takes care of all <a>-tags within the class – so it should also be a bit more universal.

3

I think you may have misunderstood what I’m doing here. I’m not trying to change the colour of links in published posts (which is what your code and code injection aim to affect), I’m trying to change the colour of links in the editor itself. Hence usage of the kg-prose class (for Koenig, I presume), and the fact that I did it with uBlock Origin (since I’m not about to try and change – and then keep updated – the core). Moreover, my theme, and I don’t think anybody else’s theme, uses the class kg-prose.

Yes, that would be correct, but just in case there were some things in the editor whose links I didn’t want to have their colour changed I thought I’d individually target classes first. Nonetheless, once I take a bit of a closer look at things I may very well end up switching over to the simplified code you provided, thanks.

4

Haha got it – completely misunderstood what you were trying to do, sorry :smiley: