FossilRepo

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

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button