BooDark

Bootstrap Dark theme for phpMyAdmin

• Supported versions: 5.2
• Bootstrap v5.3.8

Changes

• Background color changed: shades of gray & black
• Fonts color changed: shades of white & light gray
• Default SQL Query editor color theme changed
• jQuery UI improved: ui-darkness
• Designer adjusted for dark theme
• Console adjusted for dark theme
• Inline SVG using escape-svg function
• Color Schemes: cyan (main), teal, nord and orange

Demo

The best way to see BooDark in action is to try it on phpMyAdmin demo server.

• Navigate to phpMyAdmin demo server
• Login is root with empty password
• Go to Appearance settings > Themes and choose BooDark.

Installation

1. Download latest release
2. Extract the archive files
3. Go to the phpMyAdmin/themes and add the boodark folder
4. Select BooDark theme on the home page

Building

BooDark theme respects the folders structure of phpMyAdmin.

├── node_modules
├── themes
│   └── boodark
│       ├── css/
│       ├── img/
│       ├── jquery/
│       ├── scss/
│       ├── screen.png
│       └── theme.json
├── package.json
└── yarn.lock

To build the theme or customize it with your preferences you must have Node, Yarn and Git installed. Then follow step by step:

1. Open your command-line and navigate to your projects folder

2. Clone this repo locally: git clone https://github.com/adorade/boodark .

3. Install project dependecies: yarn install

4. Do any modifications you want (eg. change color scheme)

5. Compile scss files to css

   # production, minified files
   yarn run build
   # development
   yarn run build:dev

6. Theme files are in themes/boodark.

Color Schemes

BooDark has several color schemes: cyan (main), teal, nord and orange.
There is currently no way to change the color scheme in GUI.

How to change color scheme?

Option 1. Edit scss/_variables.scss (see Building)

// Theme color scheme
// Values: "cyan", "teal", "nord", "orange"
// Default: "cyan"
// Set this value for the desired color scheme

// --- Change cyan
$color-scheme: cyan !default;

// --- to nord
$color-scheme: nord !default;

// --- then run `yarn run build`

Option 2. Replace the CSS files. For example:

mv themes/boodark/css/theme.css themes/boodark/css/theme-cyan.css
mv themes/boodark/css/theme-nord.css themes/boodark/css/theme.css

Bugs and feature requests

Have a bug or a feature request? Please search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

License

BooDark Theme is licensed under MIT.
Copyright (c) 2022-25 Adorade

Thanks for use

Hopefully, this theme is useful to you.