Added Dark mode phpMyAdmin theme based on pmahomme #115
Conversation
There was a problem hiding this comment.
Pull request overview
This pull request introduces a comprehensive dark mode theme for phpMyAdmin called "pmadarkhomme", based on the default "pmahomme" theme. The theme provides an eye-friendly dark color scheme with modern aesthetics targeting phpMyAdmin versions 5.0-5.2.
Key Changes:
- Complete dark mode color palette implementation with backgrounds (#1a1a1a, #1e1e1e, #2a2a2a) and light text colors
- Comprehensive SCSS styling for all UI components including tables, forms, navigation, buttons, and specialized components
- Print-specific styles that override dark colors for proper printouts
- jQuery UI theme customization and image assets
Reviewed changes
Copilot reviewed 26 out of 288 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
theme.json |
Theme metadata defining name, version, author, and phpMyAdmin version support (5.0-5.2) |
scss/theme.scss |
Main SCSS entry point importing all component stylesheets |
scss/_variables.scss |
Dark theme color palette and Bootstrap variable overrides |
scss/_tables.scss |
Table styling with dark backgrounds and borders, but contains light hover colors |
scss/_reboot.scss |
Base typography and form element dark styling |
scss/_print.scss |
Print media queries to ensure readable output with black-on-white colors |
scss/_pagination.scss |
Dark pagination component styling |
scss/_navigation.scss |
Navigation panel dark theme with gradients |
scss/_navbar.scss |
Navbar dark gradients and borders |
scss/_nav.scss |
Nav pills and tabs dark styling |
scss/_modal.scss |
Modal styling with light gradient header (inconsistent) |
scss/_list-group.scss |
List group dark styling |
scss/_jqplot.scss |
Chart library styling |
scss/_icons.scss |
Icon sprite positioning rules |
scss/_gis.scss |
GIS editor styling with light background (inconsistent) |
scss/_forms.scss |
Form element sizing |
scss/_enum-editor.scss |
ENUM/SET editor styling |
scss/_designer.scss |
Database designer tool styling with mixed light/dark colors |
scss/_common.scss |
Extensive common styles including forms with white hover states (inconsistent) |
scss/_codemirror.scss |
CodeMirror SQL editor dark theme |
scss/_card.scss |
Card component dark styling |
scss/_buttons.scss |
Button dark gradients |
scss/_breadcrumb.scss |
Breadcrumb navigation styling |
scss/_alert.scss |
Alert components with appropriate contrast colors |
jquery/ files |
jQuery UI theme files and icon images for UI widgets |
img/ files |
Theme-specific image assets |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
pmadarkhomme/scss/_modal.scss
Outdated
| @@ -0,0 +1,3 @@ | |||
| .modal-header { | |||
| background-image: linear-gradient(#f8f8f8, #d8d8d8); | |||
There was a problem hiding this comment.
The modal header uses a light gradient linear-gradient(#f8f8f8, #d8d8d8) which is inconsistent with the dark theme. Modal headers should use dark colors consistent with the theme's palette (e.g., colors similar to other components like #2a2a2a or #3a3a3a).
There was a problem hiding this comment.
@copilot open a new pull request to apply changes based on this feedback
pmadarkhomme/scss/_gis.scss
Outdated
| } | ||
|
|
||
| #gis_data_editor { | ||
| background: #d0dce0; |
There was a problem hiding this comment.
The GIS data editor background uses a light color #d0dce0 which is inconsistent with the dark theme. This should be changed to use a dark background color consistent with other components in the theme.
pmadarkhomme/scss/_common.scss
Outdated
| &[type=text] { | ||
| &:hover, | ||
| &:focus { | ||
| border: 1px solid #7c7c7c; | ||
| background: #fff; |
There was a problem hiding this comment.
The input hover/focus states change the background to white (#fff) which creates a jarring light mode experience in the middle of a dark theme. Consider using a slightly lighter dark color (e.g., #3a3a3a or #404040) for better consistency with the dark theme.
pmadarkhomme/scss/_tables.scss
Outdated
| .table-hover { | ||
| tbody tr { | ||
| &:hover { | ||
| background: linear-gradient(#ced6df, #b6c6d7); |
There was a problem hiding this comment.
The hover background for .table-hover tbody tr uses a light gradient that's not suitable for dark mode. The gradient linear-gradient(#ced6df, #b6c6d7) appears to be light colors which will have poor contrast against the dark theme's text colors. Consider using darker colors consistent with the dark theme palette.
Aligns background and hover colors across input fields, modals, GIS editor, tables, and print styles with a darker palette to enhance readability and maintain visual consistency in the dark theme.
1 participant
This pull request introduces a new dark mode theme for phpMyAdmin called "pmadarkhomme." The theme is based on the default "pmahomme" theme and features a modern, eye-friendly dark color scheme. The changes include a comprehensive README with installation and customization instructions, as well as a full set of SCSS files implementing the dark theme across all UI components. The most important changes are summarized below.
Theme Introduction and Documentation
README.mddescribing the "pmadarkhomme" theme, its color palette, features, file structure, build instructions, installation steps, browser compatibility, and contribution guidelines.Core Theme Styles and Color Palette
_reboot.scss, including background, text, heading colors, and form element styles._tables.scss,_nav.scss,_card.scss,_buttons.scss,_alert.scss,_breadcrumb.scss,_navbar.scss,_pagination.scss). [1] [2] [3] [4] [5] [6] [7] [8] [9]Component-Specific Styling
_codemirror.scss), jqPlot charts (_jqplot.scss), GIS data editor (_gis.scss), ENUM/SET editor (_enum-editor.scss), and list groups (_list-group.scss). [1] [2] [3] [4] [5]_forms.scss).Print and Accessibility Support
_print.scssto ensure clear, readable output with high-contrast black-on-white colors and proper table formatting when printing.These changes collectively provide a cohesive, accessible, and visually appealing dark mode experience for phpMyAdmin users.