Custom styles

How to apply your own styles

As a lot of things are automated, there may be some specific elements that are impossible to change when creating your own theme.

To remedy this problem, there is a tab in settings allowing you to override any simple-bar style you want.

You can simply add your styles there. As it is loaded after all the other styles this will naturally override the default styles.

You can use the Übersicht debug console in order to inspect the widgets composing simple-bar and get the class names you need to override.

Examples

Change only the bar background

css
.simple-bar {
  background-color: rgba(0, 0, 0, 0.5);
}

Increase border radiuses and spacing inside and between widgets

css
:root {
  --bar-height: 40px;
  --bar-radius: 12px;
  --item-radius: 8px;
  --bar-inner-margin: 6px ;
  --item-inner-margin: 3px 12px;
  --item-outer-margin: 0 0 0 6px;  
}

Personalize all simple-bar variables

css
:root {
  --main: #1b222d;
  --main-alt: #98a8c5;
  --minor: #39465e;
  --accent: var(--yellow);
  --red: #e78482;
  --green: #8fc8BB;
  --yellow: #ffd484;
  --orange: #ffb374;
  --blue: #6db3cE;
  --magenta: #ad82cB;
  --cyan: #7eddde;
  --black: #1b222d;
  --white: #fff;
  --foreground: var(--white);
  --background: var(--main);
  --transparent-dark: rgba(0, 0, 0, 0.05);
  --font: "JetBrains Mono", Monaco, Menlo, monospace;
  --font-size: 11px;
  --bar-height: 34px;
  --bar-radius: 6px;
  --bar-border: 0px solid transparent;
  --bar-inner-margin: 3px;
  --item-max-width: 160px;
  --item-radius: 5px;
  --item-inner-margin: 3px 7px;
  --item-outer-margin: 0 0 0 5px;
  --hover-ring: 0 0 0 2px rgba(255, 255, 255, 0.75);
  --focus-ring: 0 0 0 2px rgb(255, 255, 255);
  --light-shadow:0 5px 10px rgba(0, 0, 0, 0.24);
  --foreground-shadow: 0 0 0 1px var(--foreground);
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --click-effect: rgba(255, 255, 255, 0.3);
}