Secondary color of theme glass effect Discourse

Development

AI-generated summary

The discussion centers around achieving a “glass effect” on a Discourse forum by changing the secondary color of a theme. Ibrahim initially sought to set the secondary color to #22222280 (80% opacity), but was limited by the theme’s 6-character color code field. bryce suggested overriding the secondary color with CSS using :root { --secondary: #22222280; }. Lilly offered an alternative solution by sharing a GitHub repository for a “glass header” theme component that incorporates transparency and blur effects. Ibrahim and Ibrahim successfully implemented the solutions. Lilly clarified that the component was an experimental demonstration, intended to inspire adaptation and incorporation into existing themes.

1

I want to change the secondary color of my theme to #22222280 (80% opacity) so I can have kind of a glass effect on my Discourse forum. How can I do this when the theme doesnt allow you to enter more then 6 characters in the Color code field.

Is there any way to manually edit this? Or any other ideas I can achieve this effect with CSS perhaps? I tried 80% opacity CSS rule but that makes the text also 80% opacity. Thanks :slight_smile:

2

You could try overriding the secondary color with CSS:

:root {
  --secondary: #22222280;
}
3

Hiya @Ibrahim :wave: welcome to Discourse Meta :slight_smile:

You can perhaps have a look at the code for my header glass theme component for some css fun with transparency and blur effect.

4

Perfecto :slight_smile: did just the trick

5

Already installed this, nifty component

6

It was actually just an experiment meant more to demonstrate the glass and blur effects and give people ideas more than be a stand alone component itself. If people can use it that’s great, but it’s probably best suited to be adapted and incorporated into an existing theme.