_variables.scss 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. // The main color of the theme
  2. $main-first: #36c; // main color
  3. $main-first-alt: #25c; // var for hovers
  4. $main-first-light: #effcfd; // var light 1
  5. $main-first-lighter: #f7fdfe; // var light 2
  6. $main-first-dark: #35363c; // var for hovers
  7. $main-first-darker: #1d1e22; // var for hovers
  8. // linked font colors
  9. $main-font-color: #303136;
  10. $light-font-color: #5b6871;
  11. $white: #fff; // white (sometimes we would like to tint it a little)
  12. // the whole palette of grays, very useful
  13. // we will try to tint these grays according to the main color
  14. $grey-darker: #3b3f4d;
  15. $grey-dark: #5b6871;
  16. $grey-medium-dark: #a6a7ae;
  17. $grey-medium: #c5ced3;
  18. $grey-medium-light: #d5d8db;
  19. $grey-light: #eff0f2;
  20. $grey-lighter: #f9fafb;
  21. $unread-font-color: $main-first;
  22. $unread-bg: #f2f6f8;
  23. $unread-bg-light: #fdfdfe;
  24. // alert colors (red, yellow, green)
  25. $alert-bg: #f5633e; // the base
  26. $alert-light: #fde0d8; // +light
  27. $alert-text: #73341f; // +dark
  28. $code-text: #e41212;
  29. $code-bg: #fde3e3;
  30. $warning-bg: #f4f762;
  31. $warning-light: #fdfde0;
  32. $warning-text: #73762f;
  33. $success-bg: #10f587;
  34. $success-light: #cffde7;
  35. $success-text: #0c7540;
  36. // favourites
  37. $fav-bg: #ffc300;
  38. $fav-light: #fff6da;
  39. // the sidebar color, useful if you want a theme that would have a dark sidebar, e.g.
  40. // stylelint-disable-next-line color-hex-length
  41. $sid-font-color: #ffffff; // the background color of the left bar and the header
  42. $sid-bg: #303136; // the general background of the left bar, and of the header
  43. $sid-bg-alt: #26272a; // background inside groups
  44. $sid-bg-dark: #17181a; // the hover
  45. $sid-sep: #3f3f3f; // the separators
  46. $sid-active: $main-first; // the active color
  47. // stylelint-disable-next-line color-hex-length
  48. $sid-active-font: #ffffff; // the active color
  49. $sid-pills: rgba(0,0,0, 0.25); // capsules