Demo: https://clarity-astro-theme.netlify.app/
- ✅ Masonry layout (lightweight version)
- ✅ 3 card types (default, text only, image only)
- ✅ 3 card sizes (small, medium, large)
- ✅ Customizable accent colors (see configuration)
- ✅ Image fade in animation (with. noscript fallback)
- ✅ Good Lighthouse performance
- ✅ SEO-friendly
- ✅ Sitemap support
- ✅ RSS Feed support
- ✅ Markdown & MDX support
- ✅ View transitions support (see configuration)
Lighthouse performance
git clone git@github.com:nice/clarity.git
cd clarity/
npm install
npm run dev
npm run build
Theme configuration can be found inside src/consts.ts
!!! Important !!! Please make sure to update the default email ids, site title and descriptions.
You can also change the theme accent colors, menu items and posts per page from the src/consts.ts file.
Enable view transitions for Clarity theme with the below few steps
- Import
ViewTransitionsinsrc/layouts/Layout.astro
---
import { ViewTransitions } from 'astro:transitions';
---
- Add the
<ViewTransitions />tag inside<head>of the same file
<head>
<ViewTransitions />
</head>
- Add
transition:animateattribute to opening<html>tag in the same file.
<html transition:animate="fade">
</html>
- Add the below Clarity theme specific script just before the closing
</html>tag in the same file.
<!-- other scripts -->
<script>
document.addEventListener("astro:after-swap", initGrid);
document.addEventListener("astro:after-swap", initAppear);
document.addEventListener("astro:after-swap", initMenu);
</script>
If you need any further help:
Please raise an issue or reach out to jayaram@gmx.com
If you want to support development of this and newer themes, you can buy me a coffee.
