Skip to content

Theming

Jump to bottom
Ktarnaj edited this page Mar 28, 2022 · 8 revisions

Adjust the theme through the _theme.scss file.

THIS IS STILL GETTING UPDATED WITH BETTER VARIABLES

Additional notes for the themes:

Primary : The color that is used for most components on your site

  • Theme : The theme color
  • Primary : High contrast color - Used for text or active content
  • Secondary : Mid contrast color - Used mostly for hoverable content
  • Tertiary : Low contrast color - Used for borders or disabled content

Accent : The color that is used to compliment your primary color

  • Theme : The theme color
  • Primary : High contrast color - Used for text or active content
  • Secondary : Mid contrast color - Used mostly for hoverable content
  • Tertiary : Low contrast color - Used for borders or disabled content

Backdrop : The color of the background

  • Theme : The theme color
  • Primary : High contrast color - Used for text or active content
  • Secondary : Mid contrast color - Used mostly for hoverable content
  • Tertiary : Low contrast color - Used for borders or disabled content

Sidebar :

  • width : the width of the sidebar on desktop monitors
  • width-mob : the width of the sidebar on mobile
  • scaling : content is scaled based on the number that you set here, calculations are done automatically without needing to adjust css
  • theme : background color of the sidebar
  • contrast : contrast color for the sidebar, this is the color of the text
  • accent : this color accentuates the icons
  • active : the color of active links, also the background color of icons which allows for a slick and modern design
  • hover : the color used for the hover effect when you mouse over links in the sidebar
  • position : adjusts the position of the sidebar using calculations (0 = left, 1 = right)

Panel : Most content's color is based on this property, e.g. form fields, cards, panels, dialogs...

  • Theme : The theme color
  • Primary : High contrast color - Used for text or active content
  • Secondary : Mid contrast color - Used mostly for hoverable content
  • Tertiary : Low contrast color - Used for borders or disabled content
Clone this wiki locally