theme.css (1590B)
1 :root { 2 --theme-light-bg: #eeeeee; 3 --theme-light-fg: grey; 4 --theme-light-text: #111111; 5 --theme-light-link: darkslateblue; 6 --theme-light-h1: #111111; 7 --theme-light-h2: darkgoldenrod; 8 --theme-light-h3: darkcyan; 9 --theme-light-switch-shadow: #373d4e; 10 --theme-light-toggle-text: 'light'; 11 12 --theme-dark-bg: #111111; 13 --theme-dark-fg: grey; 14 --theme-dark-text: #eeeeee; 15 --theme-dark-link: slateblue; 16 --theme-dark-h1: #eeeeee; 17 --theme-dark-h2: goldenrod; 18 --theme-dark-h3: cyan; 19 --theme-dark-switch-shadow: #fce477; 20 --theme-dark-toggle-text: 'dark'; 21 } 22 23 @media (prefers-color-scheme: dark) { 24 :root { 25 --theme-bg: var(--theme-dark-bg); 26 --theme-fg: var(--theme-dark-fg); 27 --theme-text: var(--theme-dark-text); 28 --theme-link: var(--theme-dark-link); 29 --theme-h1: var(--theme-dark-h1); 30 --theme-h2: var(--theme-dark-h2); 31 --theme-h3: var(--theme-dark-h3); 32 } 33 } 34 35 @media (prefers-color-scheme: light) { 36 :root { 37 --theme-bg: var(--theme-light-bg); 38 --theme-fg: var(--theme-light-fg); 39 --theme-text: var(--theme-light-text); 40 --theme-link: var(--theme-light-link); 41 --theme-h1: var(--theme-light-h1); 42 --theme-h2: var(--theme-light-h2); 43 --theme-h3: var(--theme-light-h3); 44 } 45 } 46 47 #themed { 48 background: var(--theme-bg); 49 color: var(--theme-text); 50 min-height: 100%; 51 } 52 53 nav { 54 background: var(--theme-bg); 55 } 56 57 a { 58 color: var(--theme-link); 59 } 60 61 h1 { 62 color: var(--theme-h1); 63 } 64 65 h2 { 66 color: var(--theme-h2); 67 } 68 69 h3, h4, h5, h6 { 70 color: var(--theme-h3); 71 } 72 73 74 .code-title { 75 border-bottom: 1px solid var(--theme-text); 76 }