Hide details button style

:information_source: Summary Styles [details] to make it more obvious they are clickable
:eyeglasses: Preview via Theme Creator
:hammer_and_wrench: Repository Ger / Component - Better Hide Details · GitLab
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component


This component makes it more apparent that the headline of [details] functions like a button. Nested details have more intense colour for every level and it is clear where each element ends.


With the Hide Details Button Style theme-component

With button style enabled

Without the Hide Details Button Style theme-component
This is the same without the component being active on a regular install:
Without the component

Source used in the example
[details=Title line]
[details=Closed nested title]
Nested Content
[details=Nested title]
More nested Content
[details=Second details]
More Content


[details=Additional details]
Even more Content

(↑ Regarding the Discourse meta formatting of hide details, I am not entirely sure what affects theming on this install or if that might be an upcoming feature.)


  • Makes clear where a [details] starts/ends and that it can be clicked
  • The currently selected [details] is visually highlighted on TAB.
  • Several edge cases such as nesting, multiple successive [details] are handled
  • Appears live in editor preview
  • Basic display in the “Recent replies” etc. streams
  • Uses the Tertiary colour of the colour scheme
  • Separate arrow for multi-line summary titles


  • I have tested it with all themes of the Discourse instance I am a participant of and it worked there
  • It partially uses more recent CSS features, so colors might not work correctly on old browsers
  • If Discourse changes how [details] are structured or styled in the future, this theme-component will probably break.

It is one of the Design experiments
You can read more about it in Details in topic styling changes - Feedback


:heartpulse: It would be better if there’s setting to backgroud color.