Suchi comes with some basic styling to quickly setup an article or page. However, you can easily style the Index according to your design.

The fastest way to style the article according to your sites brand color is by using the accentColor prop in Index. The accentColor is applied to the active Indicator and active Index Item.

You can also target the accentColor using CSS variables as show below:

[data-suchi-root] {
  --suchi-accentColor: purple !important;
}
 
//For dark mode
.dark [data-suchi-root] {
  --suchi-accentColor: yellow !important;
}

Colors

Suchi uses some CSS Variables to apply colors to various Suchi elements.

You can use a custom color palette for your page by replacing these CSS Variables.

Example:

[data-suchi-root] {
  --suchi-background-color: #111827 !important;
}

Styling Elements

Learn about the various Suchi Elements here.

Indicators

Indicators are organized within a <ul> tag.

To style or target the indicators, use the attribute selector [data-suchi-indicators]. Each indicator, represented by an <li> element, can be targeted using [data-suchi-indicator].

The indicator corresponding to the section currently in view will have an "active" state: [data-suchi-indicator="active"]. All other indicators will default to the "inactive" state: [data-suchi-indicator="inactive"].

The active indicator takes the --suchi-accentColor CSS Variable while the inactive indicators take the --suchi-inactive-indicator CSS Variable.

Sample styling

For example, lets add variable thickness to the indicators.

[data-suchi-indicator="active"] {
  height: 5px !important;
}
 
[data-suchi-indicator="inactive"] {
  height: 2px !important;
}

Index and Index Items

There are two types of Index - MobileIndex and DesktopIndex. Only one of these Index are rendered based on the toggleWidth prop passed to the Root. See more details here.

Desktop Index

All items in the desktop index are wrapped inside a <div> element that can be targeted using the attributes [data-suchi-desktop-items].

Each item in a <button> element that can be targeted using the attributes [data-suchi-desktop-item].

The item corresponding to the section currently in view will have an "active" state: [data-suchi-desktop-item="active"]. All other items will default to the "inactive" state: [data-suchi-desktop-item="inactive"].

By default, the active item takes the --suchi-accentColor CSS Variable while the inactive items take the --suchi-inactive-item CSS Variable.

Sample Styling

For example, lets add some styles to the active index item.

[data-suchi-desktop-item="active"] {
  background-color: #3f3f46 !important;
}
 
[data-suchi-desktop-item]:focus-visible {
  background-color: #52525b !important;
  outline: none;
}

Mobile Index

The mobile index is wrapped within a <div> element that can be targeted using [data-suchi-mobile]. This element is used to position the mobile index as fixed at the bottom of the screen.

The index items are wrapped in a <div> element that can be targeted using [data-suchi-mobile-items]. Each item in a <button> element that can be targeted using the attributes [data-suchi-mobile-item].

Sample Styling

For example, lets add some styles to the active index item.

[data-suchi-mobile-item="active"] {
  background-color: #3f3f46 !important;
  font-weight: 500;
}

Overlay

The Mobile Index has an overlay above Index Tray to give the idea of depth for the underlying content.

You can target the overlay by using [data-suchi-mobile]::before.