├── README.md ├── dracula-custom-admin-color-schemes ├── class-dracula-wordpress-custom-color-schemes.php └── smackdown │ └── colors.css ├── dracula-wordpress.php └── screenshot.png /README.md: -------------------------------------------------------------------------------- 1 | # Dracula for [WordPress](https://wordpress.org/) 2 | 3 | > A dark theme for [WordPress](https://wordpress.org/). 4 | 5 | ![Screenshot](./screenshot.png) 6 | 7 | ## Install 8 | 9 | All instructions can be found at [draculatheme.com/wordpress](https://draculatheme.com/wordpress). 10 | 11 | ## Team 12 | 13 | This theme is maintained by the following person(s) and a bunch of [awesome contributors](https://github.com/dracula/wordpress/graphs/contributors). 14 | 15 | [![oguhpereira](https://avatars3.githubusercontent.com/u/24482087?v=4&s=70)](https://github.com/oguhpereira) 16 | [![rdelbem](https://avatars.githubusercontent.com/u/5652782?v=4&s=70)](https://github.com/rdelbem) 17 | [![AurelienLourot](https://avatars.githubusercontent.com/u/11795312?v=4&s=70)](https://github.com/AurelienLourot) 18 | [![zenorocha](https://avatars.githubusercontent.com/u/398893?v=4&s=70)](https://github.com/zenorocha) 19 | 20 | ## Community 21 | 22 | - [Twitter](https://twitter.com/draculatheme) - Best for getting updates about themes and new stuff. 23 | - [GitHub](https://github.com/dracula/dracula-theme/discussions) - Best for asking questions and discussing issues. 24 | - [Discord](https://draculatheme.com/discord-invite) - Best for hanging out with the community. 25 | 26 | ## License 27 | 28 | [MIT License](./LICENSE) 29 | -------------------------------------------------------------------------------- /dracula-custom-admin-color-schemes/class-dracula-wordpress-custom-color-schemes.php: -------------------------------------------------------------------------------- 1 | '#3299bb', 45 | 'focus' => '#452b72', 46 | 'current' => '#f5f5f5', 47 | ) 48 | ); 49 | 50 | } 51 | 52 | /** 53 | * Make sure core's default `colors.css` gets enqueued, since we can't 54 | * 55 | * @import it from a plugin stylesheet. Also force-load the default colors 56 | * on the profile screens, so the JS preview isn't broken-looking. 57 | */ 58 | public function load_default_css() { 59 | global $wp_styles; 60 | 61 | $color_scheme = get_user_option( 'admin_color' ); 62 | 63 | $scheme_screens = apply_filters( 'acs_picker_allowed_pages', array( 'profile', 'profile-network' ) ); 64 | if ( in_array( $color_scheme, $this->colors, true ) || in_array( get_current_screen()->base, $scheme_screens, true ) ) { 65 | $wp_styles->registered['colors']->deps[] = 'colors-fresh'; 66 | } 67 | 68 | } 69 | 70 | } 71 | -------------------------------------------------------------------------------- /dracula-custom-admin-color-schemes/smackdown/colors.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Dashicons mixin 3 | * use: @include dashicons( '\f140' ); 4 | */ 5 | /* 6 | * Button mixin- creates 3d-ish button effect with correct 7 | * highlights/shadows, based on a base color. 8 | */ 9 | body, html { 10 | background: #f8f8f2; 11 | } 12 | 13 | /* Links */ 14 | a { 15 | color: #44475a; 16 | } 17 | .subsubsub a:hover, a:active, a:focus { 18 | color: #8be9fd; 19 | } 20 | 21 | #rightnow a:hover, 22 | #media-upload a.del-link:hover, 23 | div.dashboard-widget-submit input:hover { 24 | color: #fff; 25 | } 26 | 27 | /* Forms */ 28 | input[type=checkbox]:checked:before { 29 | color: #44475a; 30 | } 31 | 32 | input[type=radio]:checked:before { 33 | background: #44475a; 34 | } 35 | 36 | .wp-core-ui input[type="reset"]:hover, 37 | .wp-core-ui input[type="reset"]:active { 38 | color: #6272a4; 39 | } 40 | 41 | /* Core UI */ 42 | .wp-core-ui .button-primary { 43 | background:#282a36; 44 | border-color: #000; 45 | text-shadow: none; 46 | color: #f8f8f2 ; 47 | -webkit-box-shadow: inset 0 1px 0 #000, 0 1px 0 rgba(0, 0, 0, 0.15); 48 | box-shadow: none!important; 49 | } 50 | .wp-core-ui .button-primary:hover, .wp-core-ui .button-primary:focus { 51 | background: #44475a; 52 | border-color: #000; 53 | color: #f8f8f2 ; 54 | box-shadow: 0 2px 0 #fff; 55 | } 56 | .wp-core-ui .button-primary:active { 57 | background: #44475a; 58 | border-color: #6272a4; 59 | color: #f8f8f2; 60 | -webkit-box-shadow: inset 0 1px 0 #6272a4, 0 1px 0 rgba(0, 0, 0, 0.15); 61 | box-shadow: inset 0 1px 0 #6272a4, 0 1px 0 rgba(0, 0, 0, 0.15); 62 | } 63 | .wp-core-ui .button-primary[disabled], .wp-core-ui .button-primary:disabled, .wp-core-ui .button-primary.button-primary-disabled { 64 | background: #44475a!important; 65 | border-color: #6272a4 !important; 66 | color: #f8f8f2!important; 67 | text-shadow: none !important; 68 | } 69 | .wp-core-ui .wp-ui-primary { 70 | color: #f8f8f2 ; 71 | background-color: #44475a; 72 | } 73 | .wp-core-ui .wp-ui-text-primary { 74 | color: #44475a; 75 | } 76 | .wp-core-ui .wp-ui-highlight { 77 | color: #452b72; 78 | background-color: #44475a; 79 | } 80 | .wp-core-ui .wp-ui-text-highlight { 81 | color: #44475a; 82 | } 83 | .wp-core-ui .wp-ui-notification { 84 | color: #452b72; 85 | background-color: #f8f8f2 ; 86 | } 87 | .wp-core-ui .wp-ui-text-notification { 88 | color: #f8f8f2 ; 89 | } 90 | .wp-core-ui .wp-ui-text-icon { 91 | color: #f8f8f2 ; 92 | } 93 | 94 | /* List tables */ 95 | .wrap .add-new-h2:hover, 96 | #add-new-comment a:hover, 97 | .tablenav .tablenav-pages a:hover, 98 | .tablenav .tablenav-pages a:focus { 99 | color: #f8f8f2 ; 100 | background-color: #44475a; 101 | } 102 | 103 | .view-switch a.current:before { 104 | color: #353535; 105 | } 106 | 107 | .view-switch a:hover:before { 108 | color: #f8f8f2 ; 109 | } 110 | 111 | .post-com-count:hover:after { 112 | border-top-color: #353535; 113 | } 114 | 115 | .post-com-count:hover span { 116 | color: #f8f8f2 ; 117 | background-color: #353535; 118 | } 119 | 120 | strong .post-com-count:after { 121 | border-top-color: #f8f8f2 ; 122 | } 123 | 124 | strong .post-com-count span { 125 | background-color: #f8f8f2 ; 126 | } 127 | 128 | /* Admin Menu */ 129 | #adminmenuback, 130 | #adminmenuwrap, 131 | #adminmenu { 132 | background: #282a36; 133 | } 134 | 135 | #adminmenu a { 136 | color: #f8f8f2 ; 137 | } 138 | 139 | #adminmenu div.wp-menu-image:before { 140 | color: #f8f8f2 ; 141 | } 142 | 143 | #adminmenu a:hover, 144 | #adminmenu li.menu-top:hover, 145 | #adminmenu li.opensub > a.menu-top, 146 | #adminmenu li > a.menu-top:focus { 147 | color: #f8f8f2; 148 | background-color: #44475a; 149 | } 150 | 151 | #adminmenu li.menu-top:hover div.wp-menu-image:before, 152 | #adminmenu li.opensub > a.menu-top div.wp-menu-image:before { 153 | color: #f8f8f2; 154 | } 155 | 156 | /* Active tabs use a bottom border color that matches the page background color. */ 157 | .about-wrap h2 .nav-tab-active, 158 | .nav-tab-active, 159 | .nav-tab-active:hover { 160 | border-bottom-color: #f3f3f3; 161 | } 162 | 163 | /* Admin Menu: submenu */ 164 | #adminmenu .wp-submenu, 165 | #adminmenu .wp-has-current-submenu .wp-submenu, 166 | #adminmenu .wp-has-current-submenu.opensub .wp-submenu, 167 | .folded #adminmenu .wp-has-current-submenu .wp-submenu, 168 | #adminmenu a.wp-has-current-submenu:focus + .wp-submenu { 169 | background: #44475a; 170 | } 171 | 172 | #adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after { 173 | border-right-color: #44475a; 174 | } 175 | 176 | #adminmenu .wp-submenu .wp-submenu-head { 177 | color: #f8f8f2 ; 178 | } 179 | 180 | #adminmenu .wp-submenu a, 181 | #adminmenu .wp-has-current-submenu .wp-submenu a, 182 | .folded #adminmenu .wp-has-current-submenu .wp-submenu a, 183 | #adminmenu a.wp-has-current-submenu:focus + .wp-submenu a, 184 | #adminmenu .wp-has-current-submenu.opensub .wp-submenu a { 185 | color: #f8f8f2 ; 186 | } 187 | #adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover, 188 | #adminmenu .wp-has-current-submenu .wp-submenu a:focus, 189 | #adminmenu .wp-has-current-submenu .wp-submenu a:hover, 190 | .folded #adminmenu .wp-has-current-submenu .wp-submenu a:focus, 191 | .folded #adminmenu .wp-has-current-submenu .wp-submenu a:hover, 192 | #adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:focus, 193 | #adminmenu a.wp-has-current-submenu:focus + .wp-submenu a:hover, 194 | #adminmenu .wp-has-current-submenu.opensub .wp-submenu a:focus, 195 | #adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover { 196 | color:#50fa7b; 197 | } 198 | 199 | /* Admin Menu: current */ 200 | #adminmenu .wp-submenu li.current a, 201 | #adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a, 202 | #adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a { 203 | color: #8be9fd; 204 | 205 | } 206 | #adminmenu .wp-submenu li.current a:hover, #adminmenu .wp-submenu li.current a:focus, 207 | #adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:hover, 208 | #adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a:focus, 209 | #adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover, 210 | #adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus { 211 | color: #8be9fd; 212 | 213 | } 214 | 215 | ul#adminmenu a.wp-has-current-submenu:after, 216 | ul#adminmenu > li.current > a.current:after { 217 | border-right-color: #ff5555; 218 | } 219 | 220 | #adminmenu li.current a.menu-top, 221 | #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, 222 | #adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head, 223 | .folded #adminmenu li.current.menu-top { 224 | color: #8be9fd ; 225 | background: #44475a; 226 | } 227 | 228 | #adminmenu li.wp-has-current-submenu div.wp-menu-image:before { 229 | color: #f8f8f2 ; 230 | } 231 | 232 | /* Admin Menu: bubble */ 233 | #adminmenu .awaiting-mod, 234 | #adminmenu .update-plugins { 235 | color: #50fa7b; 236 | background: #f8f8f2 ; 237 | } 238 | 239 | #adminmenu li.current a .awaiting-mod, 240 | #adminmenu li a.wp-has-current-submenu .update-plugins, 241 | #adminmenu li:hover a .awaiting-mod, 242 | #adminmenu li.menu-top:hover > a .update-plugins { 243 | background: #f8f8f2 ; 244 | } 245 | 246 | ul#adminmenu li.wp-has-submenu .wp-menu-name ul.wp-submenu.wp-submenu-wrap::after { 247 | color: #ff79c6; 248 | } 249 | 250 | /* Admin Menu: collapse button */ 251 | li#collapse-menu, button#collapse-button { 252 | color: #f8f8f2; 253 | } 254 | 255 | #collapse-button:hover, #collapse-button:active, #collapse-button:focus { 256 | color: #ff79c6 ; 257 | } 258 | 259 | #collapse-button div:after { 260 | color: #f8f8f2 ; 261 | } 262 | 263 | #collapse-menu:hover #collapse-button div:after { 264 | color: #452b72; 265 | } 266 | 267 | /* Admin Bar */ 268 | #wpadminbar { 269 | color: #f8f8f2 ; 270 | background: #282a36; 271 | } 272 | 273 | #wpadminbar .ab-item, 274 | #wpadminbar a.ab-item, 275 | #wpadminbar > #wp-toolbar span.ab-label, 276 | #wpadminbar > #wp-toolbar span.noticon{ 277 | color: #f8f8f2; 278 | } 279 | 280 | #wpadminbar .ab-icon, 281 | #wpadminbar .ab-icon:before, 282 | #wpadminbar .ab-item:before, 283 | #wpadminbar .ab-item:after { 284 | color: #f8f8f2 ; 285 | } 286 | 287 | #wpadminbar:not(.mobile)>#wp-toolbar a:focus span.ab-label, 288 | #wpadminbar:not(.mobile)>#wp-toolbar li:hover span.ab-label, 289 | #wpadminbar>#wp-toolbar li.hover span.ab-label { 290 | color: #8be9fd; 291 | } 292 | 293 | #wpadminbar .ab-top-menu>li.hover>.ab-item, 294 | #wpadminbar.nojq .quicklinks.ab-top-menu>li>.ab-item:focus, 295 | #wpadminbar:not(.mobile) .ab-top-menu>li:hover>.ab-item, 296 | #wpadminbar:not(.mobile) .ab-top-menu>li>.ab-item:focus { 297 | color: #8be9fd; 298 | } 299 | 300 | #wpadminbar .ab-top-menu > li:hover > .ab-item, 301 | #wpadminbar .ab-top-menu > li.hover > .ab-item, 302 | #wpadminbar .ab-top-menu > li > .ab-item:focus, 303 | #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, 304 | #wpadminbar .ab-top-menu > li.menupop.hover > .ab-item { 305 | background: #44475a; 306 | color: #8be9fd; 307 | } 308 | 309 | #wpadminbar > #wp-toolbar li:hover span.ab-label, 310 | #wpadminbar > #wp-toolbar li.hover span.ab-label, 311 | #wpadminbar > #wp-toolbar a:focus span.ab-label { 312 | color: #f8f8f2; 313 | } 314 | 315 | #wpadminbar li:hover .ab-icon:before, 316 | #wpadminbar li:hover .ab-item:before, 317 | #wpadminbar li:hover .ab-item:after, 318 | #wpadminbar li:hover #adminbarsearch:before { 319 | color: #f8f8f2; 320 | } 321 | 322 | /* Admin Bar: submenu */ 323 | #wpadminbar .menupop .ab-sub-wrapper { 324 | background: #44475a; 325 | } 326 | 327 | #wpadminbar .quicklinks .menupop ul.ab-sub-secondary, 328 | #wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu { 329 | background: #44475a; 330 | } 331 | 332 | #wpadminbar .ab-submenu .ab-item, 333 | #wpadminbar .quicklinks .menupop ul li a, 334 | #wpadminbar .quicklinks .menupop.hover ul li a, 335 | #wpadminbar-nojs .quicklinks .menupop:hover ul li a { 336 | color: #f8f8f2 ; 337 | } 338 | 339 | #wpadminbar .quicklinks li .blavatar, 340 | #wpadminbar .menupop .menupop > .ab-item:before { 341 | color: #f8f8f2 ; 342 | } 343 | 344 | #wpadminbar li:hover .ab-icon:before, 345 | #wpadminbar li:hover .ab-item:before, 346 | #wpadminbar li a:focus .ab-icon:before, 347 | #wpadminbar li .ab-item:focus:before, 348 | #wpadminbar li.hover .ab-icon:before, 349 | #wpadminbar li.hover .ab-item:before, 350 | #wpadminbar li:hover .ab-item:after, 351 | #wpadminbar li.hover .ab-item:after{ 352 | color: #f8f8f2; 353 | } 354 | 355 | #wpadminbar .quicklinks .menupop ul li a:hover, 356 | #wpadminbar .quicklinks .menupop ul li a:focus, 357 | #wpadminbar .quicklinks .menupop ul li a:hover strong, 358 | #wpadminbar .quicklinks .menupop ul li a:focus strong, 359 | #wpadminbar .quicklinks .menupop.hover ul li a:hover, 360 | #wpadminbar .quicklinks .menupop.hover ul li a:focus, 361 | #wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover, 362 | #wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus, 363 | #wpadminbar li:hover #adminbarsearch:before { 364 | color: #50fa7b; 365 | } 366 | 367 | #wpadminbar .quicklinks li a:hover .blavatar, 368 | #wpadminbar .menupop .menupop > .ab-item:hover:before { 369 | color: #452b72; 370 | } 371 | 372 | /* Admin Bar: search */ 373 | #wpadminbar #adminbarsearch:before { 374 | color: #f8f8f2 ; 375 | } 376 | 377 | #wp-admin-bar-wp-logo > a.ab-item > span.ab-icon::before{ 378 | color: #ff79c6; 379 | } 380 | 381 | #wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus { 382 | color: #f8f8f2 ; 383 | background: #474747; 384 | } 385 | 386 | #wpadminbar #adminbarsearch .adminbar-input::-webkit-input-placeholder { 387 | color: #f8f8f2 ; 388 | opacity: .7; 389 | } 390 | 391 | #wpadminbar #adminbarsearch .adminbar-input:-moz-placeholder { 392 | color: #f8f8f2 ; 393 | opacity: .7; 394 | } 395 | 396 | #wpadminbar #adminbarsearch .adminbar-input::-moz-placeholder { 397 | color: #f8f8f2 ; 398 | opacity: .7; 399 | } 400 | 401 | #wpadminbar #adminbarsearch .adminbar-input:-ms-input-placeholder { 402 | color: #f8f8f2 ; 403 | opacity: .7; 404 | } 405 | 406 | /* Admin Bar: my account */ 407 | #wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img { 408 | border-color: #353535; 409 | background-color: #353535; 410 | } 411 | 412 | #wpadminbar #wp-admin-bar-user-info .display-name { 413 | color: #f8f8f2 ; 414 | } 415 | 416 | #wpadminbar #wp-admin-bar-user-info a:hover .display-name { 417 | color: #50fa7b; 418 | } 419 | 420 | #wpadminbar #wp-admin-bar-user-info .username { 421 | color: #f8f8f2 ; 422 | } 423 | 424 | /* Pointers */ 425 | .wp-pointer .wp-pointer-content h3 { 426 | background-color: #44475a; 427 | } 428 | 429 | .wp-pointer .wp-pointer-content h3:before { 430 | color: #44475a; 431 | } 432 | 433 | .wp-pointer.wp-pointer-top .wp-pointer-arrow, 434 | .wp-pointer.wp-pointer-undefined .wp-pointer-arrow { 435 | border-bottom-color: #44475a; 436 | } 437 | 438 | /* Media Uploader */ 439 | .media-item .bar, 440 | .media-progress-bar div { 441 | background-color: #44475a; 442 | } 443 | 444 | .details.attachment { 445 | box-shadow: 0 0 0 1px #f8f8f2 , 0 0 0 5px #44475a; 446 | } 447 | 448 | .attachment.details .check { 449 | background-color: #44475a; 450 | box-shadow: 0 0 0 1px #f8f8f2 , 0 0 0 2px #44475a; 451 | } 452 | 453 | /* Themes */ 454 | .theme-browser .theme.active .theme-name, 455 | .theme-browser .theme.add-new-theme:hover:after { 456 | background: #44475a; 457 | } 458 | 459 | .theme-browser .theme.add-new-theme:hover span:after { 460 | color: #44475a; 461 | } 462 | 463 | .theme-overlay .theme-header .close:hover, 464 | .theme-overlay .theme-header .right:hover, 465 | .theme-overlay .theme-header .left:hover { 466 | background: #44475a; 467 | } 468 | 469 | /* jQuery UI Slider */ 470 | .wp-slider .ui-slider-handle, 471 | .wp-slider .ui-slider-handle.ui-state-hover, 472 | .wp-slider .ui-slider-handle.focus { 473 | background: #7249ba; 474 | border-color: #5b3997; 475 | -webkit-box-shadow: inset 0 1px 0 #9d80cf, 0 1px 0 rgba(0, 0, 0, 0.15); 476 | box-shadow: inset 0 1px 0 #9d80cf, 0 1px 0 rgba(0, 0, 0, 0.15); 477 | } 478 | 479 | /* Responsive Component */ 480 | div#wp-responsive-toggle a:before { 481 | color: #f8f8f2 ; 482 | } 483 | 484 | .wp-responsive-open div#wp-responsive-toggle a { 485 | border-color: transparent; 486 | background: #44475a; 487 | } 488 | 489 | .star-rating .star { 490 | color: #44475a; 491 | } 492 | 493 | .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { 494 | background: #44475a; 495 | } 496 | -------------------------------------------------------------------------------- /dracula-wordpress.php: -------------------------------------------------------------------------------- 1 |