Last active
August 2, 2025 01:04
-
-
Save mustafaturksavas/4104098f1975924da34494d5bc2c0267 to your computer and use it in GitHub Desktop.
Susam Admin Theme
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --primary-bg: hsl(210, 5%, 16%); | |
| --submenu-bg: hsl(210, 5%, 9%); | |
| --text-light: hsl(0, 0%, 98%); | |
| --text-dark: hsl(210, 5%, 16%); | |
| --accent-color: hsl(214, 100%, 63%); | |
| --hover-color: hsl(214, 98%, 69%); | |
| --transition: background-color 0.3s, color 0.3s, border-color 0.3s; | |
| } | |
| /* Admin Menu Styling */ | |
| #wpadminbar span, | |
| #adminmenu a, | |
| #adminmenu span, | |
| #adminmenu > li .wp-menu-name, | |
| div.wp-menu-image:before { | |
| color: var(--text-light); | |
| } | |
| #adminmenu, | |
| #adminmenu .wp-submenu, | |
| #adminmenuback, | |
| #adminmenuwrap { | |
| background-color: var(--primary-bg); | |
| } | |
| #adminmenu .wp-submenu, | |
| .components-modal__content { | |
| background-color: var(--submenu-bg); | |
| } | |
| /* Remove Background and Box Shadow on Hover, Focus, and Active States */ | |
| #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, | |
| #adminmenu li.current a.menu-top, | |
| #adminmenu li.menu-top:hover, | |
| #adminmenu .wp-submenu li:hover, | |
| a.wp-menu-open, | |
| #collapse-menu:hover, | |
| #collapse-menu:hover button, | |
| #collapse-button:focus, | |
| #adminmenu li.menu-top:hover .wp-menu-name, | |
| #adminmenu li.opensub > a.menu-top, | |
| #adminmenu li > a.menu-top:focus, | |
| #adminmenu li.menu-top:hover div.wp-menu-image:before, | |
| #adminmenu > li .wp-has-current-submenu .wp-menu-name, | |
| #adminmenu > li .current .wp-menu-name, | |
| #adminmenu .wp-submenu li:hover a, | |
| #adminmenu a.wp-menu-open .wp-menu-name, | |
| #adminmenu a:hover, | |
| #adminmenu a.wp-menu-open div.wp-menu-image:before, | |
| #adminmenu a.current div.wp-menu-image:before { | |
| background: none; | |
| box-shadow: none; | |
| color: var(--hover-color); | |
| } | |
| #adminmenu li.opensub > a.menu-top { | |
| background: transparent; | |
| } | |
| /* Content Area */ | |
| body { | |
| background-color: var(--text-light); | |
| color: var(--text-dark); | |
| } | |
| /* Global Text Colors for regular admin pages */ | |
| h1, h2, h3, h4, h5, h6, | |
| p, td, th, tr, li, | |
| label, legend, | |
| .media-menu-item, | |
| .wp-core-ui .attachment .filename, | |
| #plugin-information .fyi strong, | |
| #plugin-information-tabs a.current, | |
| .wp-core-ui .button.disabled, | |
| .edit-attachment-frame .attachment-info, | |
| .components-notice, | |
| .block-editor-inserter__block-list * { | |
| color: var(--text-dark); | |
| } | |
| /* Buttons */ | |
| .wp-core-ui .button.button-primary, | |
| .wp-core-ui .wrap .page-title-action, | |
| .wp-core-ui button.is-primary, | |
| #wpcontent button.button-primary { | |
| background-color: var(--accent-color); | |
| color: var(--text-light); | |
| border: 1px solid var(--accent-color); | |
| transition: var(--transition); | |
| } | |
| .wp-core-ui .button.button-primary:hover, | |
| .wp-core-ui button.is-primary:hover, | |
| .wp-core-ui .wrap .page-title-action:hover { | |
| background-color: var(--text-light); | |
| color: var(--accent-color); | |
| border-color: var(--accent-color); | |
| } | |
| .components-button.is-primary:hover:not(:disabled) { | |
| background-color: var(--text-light); | |
| color: var(--accent-color) !important; | |
| border-color: var(--accent-color); | |
| } | |
| .wp-core-ui .button, | |
| button.is-tertiary, | |
| button.components-button, | |
| .media-router .active, | |
| .media-router .active:focus, | |
| .media-router .media-menu-item.active:last-child { | |
| background-color: var(--text-dark); | |
| color: var(--text-light); | |
| border-color: var(--text-dark); | |
| } | |
| .wp-core-ui .button-secondary:hover, | |
| .wp-core-ui .button.hover, | |
| .wp-core-ui .button:hover, | |
| .components-font-size-picker button[data-active-item="true"], | |
| .components-font-size-picker button[data-active-item="true"] div { | |
| background-color: var(--text-light); | |
| color: var(--text-dark); | |
| border-color: var(--text-dark); | |
| } | |
| /* Tables */ | |
| .wp-list-table tr, | |
| .wp-list-table th, | |
| .wp-list-table td, | |
| table.striped tr, | |
| .striped > tbody > :nth-child(odd), | |
| ul.striped > :nth-child(odd), | |
| .wp-list-table tr.active { | |
| background-color: var(--text-light); | |
| } | |
| /* Gutenberg Editor Background Colors */ | |
| .interface-interface-skeleton__sidebar, | |
| .interface-complementary-area, | |
| .edit-post-sidebar, | |
| .edit-post-header, | |
| .interface-interface-skeleton__header, | |
| .components-popover__content, | |
| .components-panel__header, | |
| .block-editor-block-inspector, | |
| .interface-interface-skeleton__sidebar > div, | |
| .edit-post-sidebar > div, | |
| .components-panel, | |
| .components-panel__body, | |
| .edit-post-text-editor__toolbar, | |
| .block-editor-block-navigation, | |
| .edit-post-header__toolbar, | |
| .edit-post-visual-editor__content-area, | |
| .interface-interface-skeleton__footer, | |
| .interface-interface-skeleton__footer .block-editor-block-breadcrumb, | |
| .block-editor-block-breadcrumb__current, | |
| .block-editor-block-breadcrumb__button.block-editor-block-breadcrumb__button, | |
| .block-editor-block-contextual-toolbar, | |
| .edit-post-layout__footer, | |
| .editor-post-publish-panel, | |
| .editor-post-publish-panel__content, | |
| .editor-post-publish-panel__header, | |
| .editor-post-publish-panel__prepublish, | |
| .edit-post-publish-panel, | |
| .components-notice, | |
| .components-panel__body.is-opened, | |
| .components-modal__content, | |
| .components-modal__header { | |
| background-color: var(--primary-bg); | |
| border-color: var(--submenu-bg); | |
| color: var(--text-light); | |
| } | |
| /* Input and Form Controls */ | |
| .components-toggle-group-control, | |
| .components-base-control__field .components-toggle-group-control, | |
| .block-editor-block-inspector__no-blocks, | |
| input.components-text-control__input, | |
| input.components-input-control__input, | |
| select.components-select-control__input, | |
| .components-input-control__suffix, | |
| .components-input-control__container, | |
| .components-form-token-field__input, | |
| .components-text-control__input, | |
| .components-number-control__input, | |
| .components-input-control__input, | |
| .editor-document-bar .components-button:hover, | |
| .editor-post-parent input, | |
| .commands-command-menu__container [cmdk-input], | |
| .components-input-base .components-input-control__container input[type=number], | |
| .editor-post-publish-panel input[type=color], | |
| .editor-post-publish-panel input[type=date], | |
| .editor-post-publish-panel input[type=datetime-local], | |
| .editor-post-publish-panel input[type=datetime], | |
| .editor-post-publish-panel input[type=email], | |
| .editor-post-publish-panel input[type=month], | |
| .editor-post-publish-panel input[type=number], | |
| .editor-post-publish-panel input[type=password], | |
| .editor-post-publish-panel input[type=search], | |
| .editor-post-publish-panel input[type=tel], | |
| .editor-post-publish-panel input[type=text], | |
| .editor-post-publish-panel input[type=time], | |
| .editor-post-publish-panel input[type=url], | |
| .editor-post-publish-panel input[type=week], | |
| .editor-post-publish-panel select, | |
| .editor-post-publish-panel textarea, | |
| .editor-post-excerpt textarea { | |
| background-color: var(--submenu-bg); | |
| border-color: var(--submenu-bg); | |
| color: var(--text-light); | |
| } | |
| .components-popover__content select { | |
| background-color: var(--submenu-bg) !important; | |
| } | |
| /* SVG elements */ | |
| .editor-post-publish-panel svg, | |
| .edit-post-publish-panel svg, | |
| .components-panel__body.is-opened svg, | |
| .editor-sidebar__panel.components-panel svg { | |
| fill: var(--text-light); | |
| } | |
| /* Text styling in editor components */ | |
| .interface-complementary-area *, | |
| .interface-complementary-area button, | |
| .interface-complementary-area h2, | |
| .interface-complementary-area span, | |
| .edit-post-sidebar *, | |
| .components-panel__body-title, | |
| .components-panel__body-toggle.components-button, | |
| .edit-post-header *, | |
| .interface-interface-skeleton__header *, | |
| .components-popover__content *, | |
| .block-editor-block-contextual-toolbar *, | |
| .components-base-control__label, | |
| .block-editor-block-card__title, | |
| .block-editor-block-card__description, | |
| .components-form-token-field__input, | |
| .components-color-picker__inputs-wrapper label, | |
| .components-input-control__label, | |
| .components-input-control__input, | |
| .components-modal__header h1, | |
| .components-popover__content h2, | |
| .components-popover__content h3, | |
| .components-popover__content label, | |
| .components-popover__content p, | |
| .components-popover__content button, | |
| .editor-post-publish-panel__prepublish-title, | |
| .editor-post-publish-panel__prepublish-heading, | |
| .editor-post-publish-panel__prepublish-subheading, | |
| .editor-post-publish-panel__header-title, | |
| .editor-post-publish-panel__prepublish strong, | |
| .components-notice__content, | |
| .components-panel__body.is-opened *, | |
| .editor-post-publish-panel__checklist-item, | |
| .editor-post-publish-panel label, | |
| .editor-post-publish-panel h1, | |
| .editor-post-publish-panel h2, | |
| .editor-post-publish-panel h3, | |
| .editor-post-publish-panel h4, | |
| .editor-post-publish-panel h5, | |
| .editor-post-publish-panel h6, | |
| .editor-post-publish-panel p, | |
| .editor-post-publish-panel td, | |
| .editor-post-publish-panel th, | |
| .editor-post-publish-panel tr, | |
| .editor-post-publish-panel li, | |
| .editor-post-publish-panel legend, | |
| .editor-post-publish-panel .media-menu-item, | |
| .editor-post-publish-panel .wp-core-ui .attachment .filename, | |
| .editor-post-publish-panel #plugin-information .fyi strong, | |
| .editor-post-publish-panel #plugin-information-tabs a.current, | |
| .editor-post-publish-panel .wp-core-ui .button.disabled, | |
| .editor-post-publish-panel .edit-attachment-frame .attachment-info, | |
| .editor-post-publish-panel .components-notice, | |
| .editor-post-publish-panel .block-editor-inserter__block-list *, | |
| .components-modal__content, | |
| .components-modal__content h1, | |
| .components-modal__content h2, | |
| .components-modal__content h3, | |
| .components-modal__content h4, | |
| .components-modal__content h5, | |
| .components-modal__content h6, | |
| .components-modal__content p, | |
| .components-modal__content td, | |
| .components-modal__content th, | |
| .components-modal__content tr, | |
| .components-modal__content li, | |
| .components-modal__content label, | |
| .components-modal__content legend, | |
| .components-modal__content .media-menu-item, | |
| .components-modal__content .wp-core-ui .attachment .filename, | |
| .components-modal__content #plugin-information .fyi strong, | |
| .components-modal__content #plugin-information-tabs a.current, | |
| .components-modal__content .wp-core-ui .button.disabled, | |
| .components-modal__content .edit-attachment-frame .attachment-info, | |
| .components-modal__content .components-notice, | |
| .components-modal__content .block-editor-inserter__block-list * { | |
| color: var(--text-light); | |
| } | |
| /* Gutenberg Hover States */ | |
| .block-editor-block-list__block:hover, | |
| .wp-block:hover { | |
| outline: 1px solid var(--accent-color); | |
| } | |
| .components-button:hover, | |
| .block-editor-block-contextual-toolbar .components-button:hover, | |
| .components-panel__body-toggle.components-button:hover, | |
| .block-editor-inserter__quick-inserter-results .block-editor-block-types-list__item:hover, | |
| .components-dropdown-menu__menu .components-menu-item:hover:not(:disabled):not([aria-disabled=true]), | |
| .block-editor-list-view-block__menu-cell:hover, | |
| .block-editor-block-mover__control:hover, | |
| .block-editor-block-patterns-list__list-item:hover, | |
| .components-panel__row:hover, | |
| .wp-block-navigation-item:hover, | |
| .edit-post-header-toolbar__inserter-toggle.components-button:hover, | |
| .edit-post-sidebar__panel-tab:hover, | |
| .block-editor-tools-panel-color-gradient-settings__dropdown>button.is-open { | |
| background-color: var(--submenu-bg); | |
| color: var(--hover-color); | |
| } | |
| /* Miscellaneous */ | |
| .edit-post-fullscreen-mode-close.components-button { | |
| height: 59px; | |
| } | |
| input[type=checkbox]:checked::before { | |
| filter: grayscale(1); | |
| } | |
| .health-check-accordion-trigger:focus, | |
| .privacy-settings-accordion-trigger:focus { | |
| outline: none; | |
| } | |
| .wp-submenu, | |
| #list-table-wrapper, | |
| table.widefat, | |
| .edit-media-header button { | |
| border: 0; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * susam Admin Theme | |
| */ | |
| class SusamAdminTheme { | |
| private $gist_css_url = 'https://gist.githubusercontent.com/mustafaturksavas/4104098f1975924da34494d5bc2c0267/raw/susam-admin-theme.css'; | |
| public function __construct() { | |
| wp_admin_css_color( | |
| 'susam', | |
| __('susam'), | |
| '', | |
| array('#1a1a1a', '#2c2c2c', '#4f94d4', '#5ba3e0') | |
| ); | |
| $this->apply_to_all_users(); | |
| add_action('admin_head', array($this, 'inject_gist_css')); | |
| add_action('enqueue_block_editor_assets', array($this, 'inject_gist_css')); | |
| } | |
| public function inject_gist_css() { | |
| if (get_user_option('admin_color') === 'susam') { | |
| $css = $this->get_gist_css(); | |
| if ($css) { | |
| $css = preg_replace('/[\x{2060}-\x{206F}]/u', '', $css); | |
| echo '<style type="text/css">' . trim($css) . '</style>'; | |
| } | |
| } | |
| } | |
| private function get_gist_css() { | |
| $response = wp_remote_get($this->gist_css_url, array('timeout' => 10)); | |
| if (!is_wp_error($response) && wp_remote_retrieve_response_code($response) === 200) { | |
| return wp_remote_retrieve_body($response); | |
| } | |
| return ''; | |
| } | |
| private function apply_to_all_users() { | |
| $users = get_users(array('fields' => 'ID')); | |
| foreach ($users as $user_id) { | |
| update_user_meta($user_id, 'admin_color', 'susam'); | |
| } | |
| update_option('_admin_color_fresh', 'susam'); | |
| } | |
| } | |
| new SusamAdminTheme(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment