3. Sidebar

Sidebar Colors

Both hover and static sidebars use the same 14 colors palette for theming and can be generated with flyingfox app.

WIP There is no quick way to enable light theme for TST. You will have to go for each of the color variables and change all the dark colors to light and vice versa. For example, consider this as an excerpt from original state of TST css:

  --dark-base: #192330;
  --dark-1: #233143;
  /* ... */
  --light-base: #afc0d5;
  --light-1: #A1B5CE;

Go over each variable that starts with dark and light and convert it in following manner: --dark-base: #192330; -> --light-base: #192330

After you are done converting it should look like this:

  --light-base: #192330;
  --light-1: #233143;
  /* ... */
  --dark-base: #afc0d5;
  --dark-1: #A1B5CE;

Sidebar Variables

• Active tab border radius: --tab-border-radius
• Animation speed: --animation-duration with unit s(seconds) or ms(milliseconds). Set this to 0s if you want to turn all the animations off.
• Spacing: --spacing controls the spacing between all the tabs.
• Tabs distance from edges: --distance-from-edges controls the distance between the tabs, and the borders of the sidebars. Essentially the padding for sidebar.
• Collapsed sidebar text spacing: --hover-text-spacing You most likely won't need this. In case text is visible for hover sidebars while they are collapsed, set it to something bigger than 0.1. The value is factored in exponentially so a few decimal points should be enough.