theme.scss 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. body {
  2. --neutral-color: #ffffff;
  3. --primary-color-alt: #fef3ce;
  4. --on-neutral-color: #000000;
  5. --on-neutral-color-light: #888888;
  6. --on-neutral-color-extra-light: #d9d9d9;
  7. --primary-color: #0e2d32;
  8. --on-primary-color: #ffffff;
  9. --on-primary-color-alt: #caf5f4;
  10. --secondary-color: #9edbdd;
  11. --secondary-color-light: #c6eaeb;
  12. --on-secondary-color: #262626;
  13. --neutral-color-alt: #dbdbdb;
  14. --neutral-color-alt-light: #f2f2f2;
  15. --neutral-color-alt-strong: #999999;
  16. --on-neutral-color-alt: #000000;
  17. --standard-theme: #ffffff;
  18. --on-standard-theme: #000000;
  19. --alt-theme: #0e2d32;
  20. --on-alt-theme: #ffffff;
  21. --artist-color: #fac20a;
  22. --school-color: #2093be;
  23. --manager-color: #d8050b;
  24. --action-menu-primary-color: #0e2d32;
  25. --action-menu-on-primary-color: #ffffff;
  26. --action-menu-secondary-color: #9edbdd;
  27. --action-menu-on-secondary-color: #262626;
  28. --scroll-menu-primary-color: #0e2d32;
  29. --scroll-menu-on-primary-color: #ffffff;
  30. --artist-color-light: #fef3ce;
  31. --school-color-light: #a5d4e5;
  32. --manager-color-light: #f7cdce;
  33. --warning-color: #d8050b;
  34. }
  35. body {
  36. // Le thème inversé dans le thème standard est équivalent au thème alternatif
  37. .inv-theme {
  38. background-color: var(--alt-theme);
  39. color: var(--on-alt-theme) !important;
  40. .v-btn {
  41. border-color: var(--on-alt-theme) !important;
  42. }
  43. }
  44. .inv-theme * {
  45. color: var(--on-alt-theme) !important;
  46. }
  47. // Thème alternatif
  48. .alt-theme {
  49. background-color: var(--alt-theme);
  50. color: var(--on-alt-theme) !important;
  51. .v-btn {
  52. border-color: var(--on-alt-theme) !important;
  53. }
  54. }
  55. .alt-theme * {
  56. color: var(--on-alt-theme) !important;
  57. }
  58. // Thème inversé
  59. .alt-theme .inv-theme {
  60. background-color: var(--standard-theme);
  61. color: var(--on-standard-theme) !important;
  62. }
  63. .alt-theme .inv-theme * {
  64. color: var(--on-standard-theme) !important;
  65. }
  66. }