style-dark-mode.css (2739B)
1 /* OS dark theme preference */ 2 @media only screen { 3 4 .is-dark-theme.is-dark-theme { 5 --global--color-background: var(--global--color-dark-gray); 6 --global--color-primary: var(--global--color-light-gray); 7 --global--color-secondary: var(--global--color-light-gray); 8 --button--color-text: var(--global--color-background); 9 --button--color-text-hover: var(--global--color-secondary); 10 --button--color-text-active: var(--global--color-secondary); 11 --button--color-background: var(--global--color-secondary); 12 --button--color-background-active: var(--global--color-background); 13 --global--color-border: #9ea1a7; 14 15 /* Block: Table */ 16 --table--stripes-border-color: rgba(240, 240, 240, 0.15); 17 --table--stripes-background-color: rgba(240, 240, 240, 0.15); 18 } 19 20 .is-dark-theme img { 21 filter: brightness(0.85) contrast(1.1); 22 } 23 24 .respect-color-scheme-preference.is-dark-theme body { 25 background-color: var(--global--color-background); 26 } 27 28 #dark-mode-toggler { 29 cursor: pointer; 30 display: flex; 31 align-items: center; 32 justify-content: center; 33 font-size: var(--global--font-size-xs); 34 padding: 0.5em; 35 min-height: 44px; 36 min-width: max-content; 37 border: 2px solid currentColor; 38 box-shadow: none; 39 background: var(--button--color-text); 40 color: var(--button--color-background); 41 z-index: 9998; 42 } 43 44 .no-js #dark-mode-toggler { 45 display: none; 46 } 47 48 #dark-mode-toggler.fixed-bottom { 49 position: fixed; 50 bottom: 5px; 51 right: 5px; 52 transition: bottom 0.5s; 53 } 54 55 #dark-mode-toggler.fixed-bottom.hide:not(:focus) { 56 bottom: -80px; 57 } 58 59 #dark-mode-toggler.relative { 60 position: absolute; 61 height: 44px; 62 top: calc(2.4 * var(--global--spacing-vertical) - 44px); 63 right: calc(50vw - var(--responsive--alignwide-width) / 2 - 0.5em); 64 } 65 66 .admin-bar #dark-mode-toggler.relative { 67 top: calc(2.4 * var(--global--spacing-vertical) - 44px + 32px); 68 } 69 } 70 @media only screen and (max-width: 782px) { 71 72 .admin-bar #dark-mode-toggler.relative { 73 top: calc(2.4 * var(--global--spacing-vertical) - 44px + 46px); 74 } 75 } 76 @media only screen and (max-width: 481px) { 77 78 .admin-bar #dark-mode-toggler.relative { 79 top: calc(2.4 * var(--global--spacing-vertical) - 44px + 26px); 80 } 81 } 82 @media only screen and (max-width: 481px) { 83 84 body:not(.primary-navigation-open) #dark-mode-toggler.relative ~ nav { 85 top: calc(44px + 44px); 86 } 87 } 88 @media only screen { 89 90 .primary-navigation-open #dark-mode-toggler { 91 display: none; 92 } 93 } 94 @media only screen { 95 96 #dark-mode-toggler:hover, 97 #dark-mode-toggler:focus { 98 color: var(--button--color-background-active); 99 border: 2px solid var(--button--color-text-active); 100 background-color: var(--button--color-text-active); 101 } 102 } 103 @media only screen { 104 105 .is-IE #dark-mode-toggler { 106 display: none; 107 } 108 }