0

For my site I want to be able to set custom css variables to the sites head. I don't want to add css files just inline css code. In the end I want users to be able to set colors using a color picker. These colors should be translated to the css variables added to the sites head.

For this I looked at the code in the css vars module this brought me a long way. But i'm not able to add css variables in the body of the page.

For this I use hook_page_top. But my code now is ending up in the top of the <body> and I want it to be in the <head>. Strange enough...when I look at the screencast (min 7:35) of the creator of the css vars module I see that his code does get in to the <head>.

I simplified the code in my theme_color module to figure out how it works. So maybe that's the problem? How can I get my css variables in the head of the page?

I have a theme_color.module:

<?php
/**
 * @file
 *   CSS Variables module.
 */

use Drupal\theme_color\Hooks;

/**
 * Implements hook_page_top().
 */
function theme_color_page_top(array &$page_top) {
  Hooks::hookPageTop($page_top);
}

I have a Hooks.php just like the example module:

<?php

namespace Drupal\theme_color;

class Hooks
{

  public static function hookPageTop(array &$pageTop)
  {
    if ($build = self::makeThemeColorBuild()) {
      $pageTop['theme_color'] = $build;
    }
  }

  private static function makeThemeColorBuild()
  {
    $build = [
      '#type' => 'html_tag',
      '#tag' => 'style',
      '#value' => "html:root {\n--test-var: yellow;\n}",
    ];
    return $build;
  }
}

Update:

I tried earlier, and again after get the suggestions in comments to use hook_preprocess_html

function theme_color_preprocess_html(&$variables)
{
  $build = [
    '#tag' => 'style',
    '#value' => "html:root {\n--test-var: pink;\n}",
  ];
  $variables['page']['#attached']['html_head'][] = [$build, '?tag?'];
}

This is working but what kind of tag do I need to put after the $build in the $variables line of code??

Improve this question
4
  • Does this answer your question? How do I add a meta tag in inside the <head> tag?
    – leymannx
    Apr 15, 2021 at 15:59
  • Implement hook_preprocess_html as in the accepted answer to the duplicate question.
    – leymannx
    Apr 15, 2021 at 16:02
  • And doesn't this simply happen in your CSS like :root { --primary-color: red; }?
    – leymannx
    Apr 15, 2021 at 17:28
  • I don't know what you mean with the last comment. Can you explain a bit more? I'm trying to get the hook_preprocess_html to work but I think I'm missing something. I've edited the original question.
    – Joost
    Apr 15, 2021 at 17:46

2 Answers 2

Reset to default
2

To do this from hook_preprocess_html like in accepted answer to the duplicate question it works like in the snippet below.

/**
 * Implements hook_preprocess_HOOK().
 */
function MYMODULE_preprocess_html(&$variables) {
  $style = [
    '#tag' => 'style',
    '#value' => ":root {\n  --test-var: pink;\n}",
  ];
  $variables['page']['#attached']['html_head'][] = [$style, 'foobar-my-id'];
}
Improve this answer
0

There is a module for COLOR variables on Drupal. It uses the core color module and has a UI if you need it. https://www.drupal.org/project/css_color_variables

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.