| 210 | } |
| 211 | |
| 212 | private createColorTransition() { |
| 213 | if (typeof document === 'undefined') { |
| 214 | return; |
| 215 | } |
| 216 | this.colorTransitionElement = document.createElement('style'); |
| 217 | this.darkChangeHiddenElement = document.createElement('style'); |
| 218 | this.darkChangeShowElement = document.createElement('style');; |
| 219 | this.colorTransitionElement.id = THEME_KEY.transitionStyleElementId; |
| 220 | this.darkChangeHiddenElement.id = THEME_KEY.transitionStyleElementId; |
| 221 | this.darkChangeShowElement.id = THEME_KEY.transitionStyleElementId; |
| 222 | this.colorTransitionElement.innerText = ` |
| 223 | * { transition: background .3s ease-out, background-color .3s ease-out, |
| 224 | border .3s ease-out, border-color .3s ease-out, |
| 225 | box-shadow .3s ease-out, box-shadow-color .3s ease-out} |
| 226 | `; |
| 227 | |
| 228 | this.darkChangeHiddenElement.innerText = ` |
| 229 | * { |
| 230 | transition: background .3s ease-out, background-color .3s ease-out, |
| 231 | border .3s ease-out, border-color .3s ease-out, |
| 232 | box-shadow .3s ease-out, box-shadow-color .3s ease-out |
| 233 | } |
| 234 | body { |
| 235 | animation-duration: 400ms; |
| 236 | animation-name: hidden; |
| 237 | animation-iteration-count: 1; |
| 238 | } |
| 239 | @keyframes hidden { |
| 240 | from { |
| 241 | opacity: 1; |
| 242 | } |
| 243 | |
| 244 | to { |
| 245 | opacity: 0.1; |
| 246 | } |
| 247 | } |
| 248 | `; |
| 249 | |
| 250 | this.darkChangeShowElement.innerText = ` |
| 251 | body { |
| 252 | animation-duration: 400ms; |
| 253 | animation-name: show; |
| 254 | animation-iteration-count: 1; |
| 255 | } |
| 256 | @keyframes show { |
| 257 | from { |
| 258 | opacity: 0.1; |
| 259 | } |
| 260 | |
| 261 | to { |
| 262 | opacity: 1; |
| 263 | } |
| 264 | } |
| 265 | `; |
| 266 | } |
| 267 | |
| 268 | private themeHidden() { |
| 269 | if (typeof document === 'undefined') { |