Common Selectors for Custom CSS

Share & showcase
2

Workspace

Selectors

  • .workspace { ... } --> selects the entire workspace
  • .theme-light { ... }–> use to control elements just in the light theme, can add this to the front of any selector (example - .theme-light .side-dock-ribbon)
  • .theme-dark { ... }
  • html, body, h5, h6 { ... }
  • html, body { ... }
  • body { ... }

Workspace CSS

  • display: flex;
  • flex-grow: 1;
  • transition: padding-left 100ms ease-in;
  • overflow: hidden;
  • height: 100%;
  • background-color: var(--background-secondary);

Theme CSS

  • --background-primary: #
  • --background-primary-alt: #
  • --background-secondary: #
  • --background-secondary-alt: #
  • --background-accent: #
  • --background-modifier-border: #
  • --background-modifier-form-field: #
  • --background-modifier-form-field-highlighted: #
  • --background-modifier-box-shadow: rgba(
  • --background-modifier-success: #
  • --background-modifier-error: #
  • --background-modifier-error-rgb:
  • --background-modifier-error-hover: #
  • --background-modifier-cover: rgba(
  • --text-accent: #
  • --text-accent-hover: #
  • --text-normal: #
  • --text-muted: #
  • --text-faint: #
  • --text-error: #
  • --text-error-hover: #
  • --text-highlight-bg: rgba(
  • --text-selection: rgba(
  • --text-on-accent: #
  • --interactive-normal: #
  • --interactive-hover: #
  • --interactive-accent: #
  • --interactive-accent-rgb:
  • --interactive-accent-hover: #
  • --scrollbar-active-thumb-bg: rgba(
  • --scrollbar-bg: rgba(
  • --scrollbar-thumb-bg: rgba(
12 Likes