highlight.css 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. :root {
  2. --light-hl-0: #795E26;
  3. --dark-hl-0: #DCDCAA;
  4. --light-hl-1: #000000;
  5. --dark-hl-1: #D4D4D4;
  6. --light-hl-2: #A31515;
  7. --dark-hl-2: #CE9178;
  8. --light-hl-3: #AF00DB;
  9. --dark-hl-3: #C586C0;
  10. --light-hl-4: #001080;
  11. --dark-hl-4: #9CDCFE;
  12. --light-hl-5: #008000;
  13. --dark-hl-5: #6A9955;
  14. --light-hl-6: #0000FF;
  15. --dark-hl-6: #569CD6;
  16. --light-hl-7: #0070C1;
  17. --dark-hl-7: #4FC1FF;
  18. --light-hl-8: #098658;
  19. --dark-hl-8: #B5CEA8;
  20. --light-hl-9: #000000;
  21. --dark-hl-9: #C8C8C8;
  22. --light-hl-10: #CD3131;
  23. --dark-hl-10: #F44747;
  24. --light-code-background: #FFFFFF;
  25. --dark-code-background: #1E1E1E;
  26. }
  27. @media (prefers-color-scheme: light) { :root {
  28. --hl-0: var(--light-hl-0);
  29. --hl-1: var(--light-hl-1);
  30. --hl-2: var(--light-hl-2);
  31. --hl-3: var(--light-hl-3);
  32. --hl-4: var(--light-hl-4);
  33. --hl-5: var(--light-hl-5);
  34. --hl-6: var(--light-hl-6);
  35. --hl-7: var(--light-hl-7);
  36. --hl-8: var(--light-hl-8);
  37. --hl-9: var(--light-hl-9);
  38. --hl-10: var(--light-hl-10);
  39. --code-background: var(--light-code-background);
  40. } }
  41. @media (prefers-color-scheme: dark) { :root {
  42. --hl-0: var(--dark-hl-0);
  43. --hl-1: var(--dark-hl-1);
  44. --hl-2: var(--dark-hl-2);
  45. --hl-3: var(--dark-hl-3);
  46. --hl-4: var(--dark-hl-4);
  47. --hl-5: var(--dark-hl-5);
  48. --hl-6: var(--dark-hl-6);
  49. --hl-7: var(--dark-hl-7);
  50. --hl-8: var(--dark-hl-8);
  51. --hl-9: var(--dark-hl-9);
  52. --hl-10: var(--dark-hl-10);
  53. --code-background: var(--dark-code-background);
  54. } }
  55. :root[data-theme='light'] {
  56. --hl-0: var(--light-hl-0);
  57. --hl-1: var(--light-hl-1);
  58. --hl-2: var(--light-hl-2);
  59. --hl-3: var(--light-hl-3);
  60. --hl-4: var(--light-hl-4);
  61. --hl-5: var(--light-hl-5);
  62. --hl-6: var(--light-hl-6);
  63. --hl-7: var(--light-hl-7);
  64. --hl-8: var(--light-hl-8);
  65. --hl-9: var(--light-hl-9);
  66. --hl-10: var(--light-hl-10);
  67. --code-background: var(--light-code-background);
  68. }
  69. :root[data-theme='dark'] {
  70. --hl-0: var(--dark-hl-0);
  71. --hl-1: var(--dark-hl-1);
  72. --hl-2: var(--dark-hl-2);
  73. --hl-3: var(--dark-hl-3);
  74. --hl-4: var(--dark-hl-4);
  75. --hl-5: var(--dark-hl-5);
  76. --hl-6: var(--dark-hl-6);
  77. --hl-7: var(--dark-hl-7);
  78. --hl-8: var(--dark-hl-8);
  79. --hl-9: var(--dark-hl-9);
  80. --hl-10: var(--dark-hl-10);
  81. --code-background: var(--dark-code-background);
  82. }
  83. .hl-0 { color: var(--hl-0); }
  84. .hl-1 { color: var(--hl-1); }
  85. .hl-2 { color: var(--hl-2); }
  86. .hl-3 { color: var(--hl-3); }
  87. .hl-4 { color: var(--hl-4); }
  88. .hl-5 { color: var(--hl-5); }
  89. .hl-6 { color: var(--hl-6); }
  90. .hl-7 { color: var(--hl-7); }
  91. .hl-8 { color: var(--hl-8); }
  92. .hl-9 { color: var(--hl-9); }
  93. .hl-10 { color: var(--hl-10); }
  94. pre, code { background: var(--code-background); }