Create and apply your dark palette in an accessibility-friendly manner using the new Interactivity API.
This plugin provides the following features:
- A Gutenberg block for the navigation menu, serving as a dropdown switcher that enables you to select the desired color mode using custom labels.
- A color picker for seamlessly remapping your color palette.
- Dark palette block for the block navigation menu
- Utilize all your custom colors and custom labels
- Accessibility-ready
- No cookies used (GDPR-friendly)
- Performance-optimized and lightweight
- No block library required
- Primarily built with native WordPress components
- Developer-friendly and easy to customize
- You have a couple of options:
- Go to Plugins → Add New and search for "Dark Palette". Once found, click "Install".
- Download the Dark Palette from wordpress.org and make sure the folder is zipped. Then upload via Plugins → Add New → Upload.
- Activate the plugin through the 'Plugins' screen in WordPress.
- Search for the "Dark Palette Switcher" block within the Block Editor (Gutenberg) and add it to a block navigation.
You can change the desired behavior using CSS in your theme or in the customizer.
body[data-theme="dark"] {
/* your CSS here */
}
You can go in the style editor (Appearance > Editor > Styles) and add color to your custom palette.
You can change the icons using CSS in your theme or in the customizer.
.wp-block-mosne-dark-palette.has-icon button.has-icon {
mask: url("[your svg path]") no-repeat;
}
.wp-block-mosne-dark-palette.has-icon button.has-icon--dark {
mask: url("[your svg path]") no-repeat;
}
.wp-block-mosne-dark-palette.has-icon button.has-icon--light {
mask: url("[your svg path]") no-repeat;
}
- Fix escaping via wp_kses_data and changelogs
- Fix escaping and changelogs
- Fix security (disallow direct access to files)
- Initial release