dark.scss 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. @import '../mixins/create.scss';
  2. @import '../color/colorPalette.scss';
  3. @import '../color/colors.scss';
  4. @import '../mixins/useTheme';
  5. @include theme-dark {
  6. --l-blue-1: #{genColor($blue, 1, dark)};
  7. --l-blue-2: #{genColor($blue, 2, dark)};
  8. --l-blue-3: #{genColor($blue, 3, dark)};
  9. --l-blue-4: #{genColor($blue, 4, dark)};
  10. --l-blue-5: #{genColor($blue, 5, dark)};
  11. --l-blue-6: #{genColor($blue, 6, dark)};
  12. --l-blue-7: #{genColor($blue, 7, dark)};
  13. --l-blue-8: #{genColor($blue, 8, dark)};
  14. --l-blue-9: #{genColor($blue, 9, dark)};
  15. --l-blue-10: #{genColor($blue, 10, dark)};
  16. --l-primary-color-1: #{genColor($primary-color, 1, dark)}; // 浅色/白底悬浮
  17. --l-primary-color-2: #{genColor($primary-color, 2, dark)}; // 文字禁用
  18. --l-primary-color-3: #{genColor($primary-color, 3, dark)}; // 一般禁用
  19. --l-primary-color-4: #{genColor($primary-color, 4, dark)}; // 特殊场景 禁用
  20. --l-primary-color-5: #{genColor($primary-color, 5, dark)}; // 悬浮
  21. --l-primary-color-6: #{genColor($primary-color, 6, dark)}; // 常规
  22. --l-primary-color-7: #{genColor($primary-color, 7, dark)}; // 点击
  23. --l-primary-color-8: #{genColor($primary-color, 8, dark)}; //
  24. --l-primary-color-9: #{genColor($primary-color, 9, dark)};
  25. --l-primary-color-10: #{genColor($primary-color, 10, dark)};
  26. --l-error-color-1: #{genColor($error-color, 1, dark)};
  27. --l-error-color-2: #{genColor($error-color, 2, dark)};
  28. --l-error-color-3: #{genColor($error-color, 3, dark)};
  29. --l-error-color-4: #{genColor($error-color, 4, dark)};
  30. --l-error-color-5: #{genColor($error-color, 5, dark)};
  31. --l-error-color-6: #{genColor($error-color, 6, dark)};
  32. --l-error-color-7: #{genColor($error-color, 7, dark)};
  33. --l-error-color-8: #{genColor($error-color, 8, dark)};
  34. --l-error-color-9: #{genColor($error-color, 9, dark)};
  35. --l-error-color-10: #{genColor($error-color, 10, dark)};
  36. --l-warning-color-1: #{genColor($warning-color, 1, dark)};
  37. --l-warning-color-2: #{genColor($warning-color, 2, dark)};
  38. --l-warning-color-3: #{genColor($warning-color, 3, dark)};
  39. --l-warning-color-4: #{genColor($warning-color, 4, dark)};
  40. --l-warning-color-5: #{genColor($warning-color, 5, dark)};
  41. --l-warning-color-6: #{genColor($warning-color, 6, dark)};
  42. --l-warning-color-7: #{genColor($warning-color, 7, dark)};
  43. --l-warning-color-8: #{genColor($warning-color, 8, dark)};
  44. --l-warning-color-9: #{genColor($warning-color, 9, dark)};
  45. --l-warning-color-10: #{genColor($warning-color, 10, dark)};
  46. --l-success-color-1: #{genColor($success-color, 1, dark)}; // 浅色/白底悬浮
  47. --l-success-color-2: #{genColor($success-color, 2, dark)}; // 文字禁用
  48. --l-success-color-3: #{genColor($success-color, 3, dark)}; // 一般禁用
  49. --l-success-color-4: #{genColor($success-color, 4, dark)}; // 特殊场景
  50. --l-success-color-5: #{genColor($success-color, 5, dark)}; // 悬浮
  51. --l-success-color-6: #{genColor($success-color, 6, dark)}; // 常规
  52. --l-success-color-7: #{genColor($success-color, 7, dark)}; // 点击
  53. --l-success-color-8: #{genColor($success-color, 8, dark)};
  54. --l-success-color-9: #{genColor($success-color, 9, dark)};
  55. --l-success-color-10: #{genColor($success-color, 10, dark)};
  56. --l-gray-1: #f3f3f3;
  57. --l-gray-2: #eeeeee;
  58. --l-gray-3: #e7e7e7;
  59. --l-gray-4: #dcdcdc;
  60. --l-gray-5: #c5c5c5;
  61. --l-gray-6: #a6a6a6;
  62. --l-gray-7: #8b8b8b;
  63. --l-gray-8: #777777;
  64. --l-gray-9: #5e5e5e;
  65. --l-gray-10: #4b4b4b;
  66. --l-gray-11: #383838;
  67. --l-gray-12: #2c2c2c;
  68. --l-gray-13: #242424;
  69. --l-gray-14: #181818;
  70. --l-text-color-1: rgba(255,255,255,0.88); //primary
  71. --l-text-color-2: rgba(255,255,255,0.65); //secondary
  72. --l-text-color-3: rgba(255,255,255,0.45); //placeholder
  73. --l-text-color-4: rgba(255,255,255,0.25); //disabled
  74. // 容器
  75. --l-bg-color-page: #000000; // 整体背景色 布局
  76. --l-bg-color-container: #141414;//#1d1d1d; // 一级容器背景 组件
  77. --l-bg-color-elevated: #1f1f1f; // 二级容器背景 浮层
  78. --l-bg-color-spotlight: #424242; // 引起注意的如 Tooltip
  79. --l-bg-color-mask: rgba(0, 0, 0, 0.45); // 蒙层
  80. // 填充
  81. --l-fill-1: rgba(0, 0, 0, 0.18);
  82. --l-fill-2: rgba(0, 0, 0, 0.12);
  83. --l-fill-3: rgba(0, 0, 0, 0.08);
  84. --l-fill-4: rgba(0, 0, 0, 0.04);
  85. // 描边
  86. --l-border-color-1: #{getSolidColor(#000, 26%)}; //#424242; // 浅色
  87. --l-border-color-2: #{getSolidColor(#000, 19%)}; //#303030; // 一般
  88. --l-border-color-3: #{getSolidColor(#000, 15%)}; //$gray-4; // 深/悬浮
  89. --l-border-color-4: #{getSolidColor(#000, 12%)}; //$gray-6; // 重/按钮描边
  90. }