Hide details button style

Customization Theme component

AI-generated summary

The “Hide Details Button Style” theme component makes the headline of [details] more apparent as a clickable button. It achieves this by adding more intense colors for each nested level and clarifying where each element ends. The component offers several features, including clear start and end points for [details], visual highlighting on keyboard navigation, and support for edge cases like nesting and multiple successive [details]. It is compatible with various themes and has been tested by the creator. However, it may not work correctly on old browsers due to its use of recent CSS features. Moin notes that the Discourse meta formatting of hide details is an ongoing design experiment, and Dotila_Li suggests adding a setting for background color.

1
: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

Description

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.

Screenshots

With the Hide Details Button Style theme-component

With button style enabled
With button style enabled612×429 11.1 KB

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

Without the component
Without the component463×280 4.45 KB

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

Text

[details=Additional details]
Even more Content
[/details]

(↑ 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.)

Features

  • 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

Remarks

  • 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.
5 Likes
Do we need a help button on the composer?
2

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

3 Likes
4

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