✨ Added accent color CSS variable to {{ghost_head}} (#12717)

closes https://github.com/TryGhost/Team/issues/508

- if an accent colour is set in site settings, output a `--accent-color` CSS variable in a `<style>` tag through `{{ghost_head}}`
- allows themes to use the accent colour without adding an additional conditional with CSS variable declaration to their default template

core/frontend/helpers/ghost_head.js

@@ -173,6 +173,18 @@ module.exports = function ghost_head(options) { // eslint-disable-line camelcase
                 }
             }
 
+            if (settingsCache.get('accent_color')) {
+                const accentColor = escapeExpression(settingsCache.get('accent_color'));
+                const styleTag = `<style>:root {--accent-color: ${accentColor};}</style>`;
+                const existingScriptIndex = _.findLastIndex(head, str => str.match(/<\/(style|script)>/));
+
+                if (existingScriptIndex) {
+                    head[existingScriptIndex] = head[existingScriptIndex] + styleTag;
+                } else {
+                    head.push(styleTag);
+                }
+            }
+
             head.push('<meta name="generator" content="Ghost ' +
                 escapeExpression(safeVersion) + '" />');
 

test/unit/helpers/ghost_head_spec.js

@@ -1552,4 +1552,69 @@ describe('{{ghost_head}} helper', function () {
             }).catch(done);
         });
     });
+
+    describe('accent_color', function () {
+        it('includes style tag when set', function (done) {
+            settingsCache.get.withArgs('accent_color').returns('#123456');
+
+            const renderObject = {
+                post: posts[1]
+            };
+
+            helpers.ghost_head(testUtils.createHbsResponse({
+                renderObject: renderObject,
+                locals: {
+                    relativeUrl: '/post/',
+                    context: ['post'],
+                    safeVersion: '0.3'
+                }
+            })).then(function (rendered) {
+                should.exist(rendered);
+                rendered.string.should.containEql('<style>:root {--accent-color: #123456;}</style>');
+                done();
+            }).catch(done);
+        });
+
+        it('does not include style tag when not set', function (done) {
+            settingsCache.get.withArgs('accent_color').returns(null);
+
+            const renderObject = {
+                post: posts[1]
+            };
+
+            helpers.ghost_head(testUtils.createHbsResponse({
+                renderObject: renderObject,
+                locals: {
+                    relativeUrl: '/post/',
+                    context: ['post'],
+                    safeVersion: '0.3'
+                }
+            })).then(function (rendered) {
+                should.exist(rendered);
+                rendered.string.should.not.containEql('--accent-color');
+                done();
+            }).catch(done);
+        });
+
+        it('attaches style tag to existing script/style tag', function (done) {
+            settingsCache.get.withArgs('accent_color').returns('#123456');
+
+            const renderObject = {
+                post: posts[1]
+            };
+
+            helpers.ghost_head(testUtils.createHbsResponse({
+                renderObject: renderObject,
+                locals: {
+                    relativeUrl: '/post/',
+                    context: ['post'],
+                    safeVersion: '0.3'
+                }
+            })).then(function (rendered) {
+                should.exist(rendered);
+                rendered.string.should.match(/[^\s]<style>:root/);
+                done();
+            }).catch(done);
+        });
+    });
 });