Contrib.social

Stylings per used theme

Open on Drupal.org →
Created on 20 December 2024, 1 day ago

Problem/Motivation

Currently, the Klaro consent window/content blocker lacks Drupal-specific HTML and CSS, as it uses the default styles provided by the upstream library. Consequently, the checkboxes, colors, and other elements do not align with the styling of the surrounding Drupal theme.

For example, themes like Olivero, Claro, and Gin have distinct ways of styling checkboxes and other UI components, which are not reflected in the Klaro-related elements.

This raises the question of whether we should implement theme-specific styling to ensure that the content blocker window matches the look and feel of the surrounding theme. For instance:

  • In the Gin backend theme, the content blocker should look native to Gin.
  • Similarly, when used in the Olivero theme, the content blocker should reflect the frontend theme’s styling.

Proposed resolution

Introduce a “custom CSS file” for each Drupal theme and load it "dynamically" based on the active theme.
This could be achieved by querying the currently active theme and loading the corresponding Klaro styles specific to that theme.

Remaining tasks

  1. Initiate a discussion to determine if this approach is necessary.
  2. Consider the effort required versus the benefits gained.
  • In my opinion, this may involve significant effort.
  • A better solution might be to address the issue upstream by aligning the Klaro markup with Drupal’s default markup standards. This would reduce the need for theme-specific adjustments.
✨ Feature request
Status

Active

Version

3.0

Component

Code

Created by

🇦🇹Austria Grienauer Vienna

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @Grienauer
  • Comment 1 day ago →
    🇩🇪Germany jan kellermann

    jan kellermann → made their first commit to this issue’s fork.

  • Merge request !65Add active theme as class to klaro-element. → (Open) created by jan kellermann
  • Comment 1 day ago →
    🇩🇪Germany jan kellermann

    We have no frontender at hand in the moment.

    I opened a MR which will add klaro-theme-
    to every klaro-element.

    Here is the Klaro-SCSS with all defined vars you can easyly override:
    https://github.com/klaro-org/klaro-js/blob/master/src/scss/vars.scss

    And I uploaded our SCSS-file which we use for customizing (renamed to TXT).

  • Comment about 15 hours ago →
    🇩🇪Germany jurgenhaas Gottmadingen

    I don't think Klaro should be responsible to style for any number of themes. At most, it should provide an infrastructure so that themes can make the Klaro visuals look nice. Therefore, extra classes like in the MR should not be necessary, the currently active theme would style the available components and there shouldn't be any CSS that needs the context of different themes.

    The only exception should be Claro, Gin and Olivero as they are Drupal Core or Drupal CMS defaults.

    For those themes, I wonder if the Klaro CSS could just leverage the CSS variables to define the Klaro styling. I would assume, that those 3 themes use the same, or very similar variable names and hierarchies.

  • Comment about 5 hours ago →
    🇩🇪Germany jan kellermann

    They are using similar classes - but klaro not.

    The variables are quite different - because of this I would just add the theme as class and then write custom css for these three theme which uses the variables and adjust the klaro-classes with their theme equivalents.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024