1
0

dark_mode.css 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. @media (prefers-color-scheme: dark) {
  2. :root {
  3. --primary: #264b5d;
  4. --primary-fg: #f7f7f7;
  5. --body-fg: #eeeeee;
  6. --body-bg: #121212;
  7. --body-quiet-color: #d0d0d0;
  8. --body-medium-color: #e0e0e0;
  9. --body-loud-color: #ffffff;
  10. --breadcrumbs-link-fg: #e0e0e0;
  11. --breadcrumbs-bg: var(--primary);
  12. --link-fg: #81d4fa;
  13. --link-hover-color: #4ac1f7;
  14. --link-selected-fg: #6f94c6;
  15. --hairline-color: #272727;
  16. --border-color: #353535;
  17. --error-fg: #e35f5f;
  18. --message-success-bg: #006b1b;
  19. --message-warning-bg: #583305;
  20. --message-error-bg: #570808;
  21. --darkened-bg: #212121;
  22. --selected-bg: #1b1b1b;
  23. --selected-row: #00363a;
  24. --close-button-bg: #333333;
  25. --close-button-hover-bg: #666666;
  26. color-scheme: dark;
  27. }
  28. }
  29. html[data-theme="dark"] {
  30. --primary: #264b5d;
  31. --primary-fg: #f7f7f7;
  32. --body-fg: #eeeeee;
  33. --body-bg: #121212;
  34. --body-quiet-color: #d0d0d0;
  35. --body-medium-color: #e0e0e0;
  36. --body-loud-color: #ffffff;
  37. --breadcrumbs-link-fg: #e0e0e0;
  38. --breadcrumbs-bg: var(--primary);
  39. --link-fg: #81d4fa;
  40. --link-hover-color: #4ac1f7;
  41. --link-selected-fg: #6f94c6;
  42. --hairline-color: #272727;
  43. --border-color: #353535;
  44. --error-fg: #e35f5f;
  45. --message-success-bg: #006b1b;
  46. --message-warning-bg: #583305;
  47. --message-error-bg: #570808;
  48. --darkened-bg: #212121;
  49. --selected-bg: #1b1b1b;
  50. --selected-row: #00363a;
  51. --close-button-bg: #333333;
  52. --close-button-hover-bg: #666666;
  53. color-scheme: dark;
  54. }
  55. /* THEME SWITCH */
  56. .theme-toggle {
  57. cursor: pointer;
  58. border: none;
  59. padding: 0;
  60. background: transparent;
  61. vertical-align: middle;
  62. margin-inline-start: 5px;
  63. margin-top: -1px;
  64. }
  65. .theme-toggle svg {
  66. vertical-align: middle;
  67. height: 1rem;
  68. width: 1rem;
  69. display: none;
  70. }
  71. /*
  72. Fully hide screen reader text so we only show the one matching the current
  73. theme.
  74. */
  75. .theme-toggle .visually-hidden {
  76. display: none;
  77. }
  78. html[data-theme="auto"] .theme-toggle .theme-label-when-auto {
  79. display: block;
  80. }
  81. html[data-theme="dark"] .theme-toggle .theme-label-when-dark {
  82. display: block;
  83. }
  84. html[data-theme="light"] .theme-toggle .theme-label-when-light {
  85. display: block;
  86. }
  87. /* ICONS */
  88. .theme-toggle svg.theme-icon-when-auto,
  89. .theme-toggle svg.theme-icon-when-dark,
  90. .theme-toggle svg.theme-icon-when-light {
  91. fill: var(--header-link-color);
  92. color: var(--header-bg);
  93. }
  94. html[data-theme="auto"] .theme-toggle svg.theme-icon-when-auto {
  95. display: block;
  96. }
  97. html[data-theme="dark"] .theme-toggle svg.theme-icon-when-dark {
  98. display: block;
  99. }
  100. html[data-theme="light"] .theme-toggle svg.theme-icon-when-light {
  101. display: block;
  102. }