About this set
Numbered pagination built for dark interfaces such as dashboards, developer tools and media sites. Bordered gives every page a dark tile with a slightly lighter border and a deep blue current page. Accent glow keeps the same tiles and adds a soft blue glow around the current page so it stands out on very dark backgrounds. Ghost removes the tiles altogether, shows a border only on hover and marks the current page with a cyan outline and cyan number, the lightest option when the page is already visually busy. The greys were chosen for contrast on a near-black #0b0f16 background: page numbers, the ellipsis and the demo captions all reach 4.5:1, and the focus outline switches to a lighter blue that stays visible on dark surfaces. Every row is a set of links inside a nav labelled Pagination and wraps on narrow screens. The Bootstrap version sets data-bs-theme=”dark” and restyles the native .pagination component through its –bs-pagination variables; the Tailwind version uses utility classes with arbitrary colour values.
What’s included
- Bordered, accent glow and ghost variants
- Colours checked for 4.5:1 contrast on a near-black background
- Light-blue focus outline that shows on dark surfaces
- Ghost variant shows a border only on hover
- Bootstrap version uses data-bs-theme="dark" and .pagination
Accessibility
Each row is a nav labelled Pagination; the active page has aria-current="page" and the arrows are named Previous page and Next page. Keyboard focus shows a 2px #60a5fa outline with an offset, visible against both the tiles and the background. Numbers, the ellipsis and captions meet 4.5:1 contrast, and hover transitions stop under prefers-reduced-motion.
Customise it
In plain CSS change the #161b23 tile, #232a36 border and #1d4ed8 current colours on .pg a, or #22d3ee on .ghost. In Bootstrap edit --bs-pagination-bg, --bs-pagination-border-color and --bs-pagination-active-bg on .pagination-dark. In Tailwind replace the bg-[#161b23], border-[#232a36] and bg-[#1d4ed8] values.
