PHPackages palcera/palcera\_theme - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. palcera/palcera\_theme ActiveDrupal-theme[Templating & Views](/categories/templating) palcera/palcera\_theme ====================== Base theme for Palcera CMS templates. Generated from Mercury, provides breakpoints, image styles, and core SDC components. 1.0.0-beta2(2mo ago)081GPL-2.0-or-laterTwig Since Feb 7Pushed 2mo agoCompare [ Source](https://github.com/palcera/palcera_theme)[ Packagist](https://packagist.org/packages/palcera/palcera_theme)[ RSS](/packages/palcera-palcera-theme/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (2)Versions (6)Used By (1) Palcera Theme ============= [](#palcera-theme) A component-based Drupal theme for [Palcera CMS](https://github.com/palcera/palcera_cms), built on [Drupal Canvas](https://www.drupal.org/project/canvas) with Tailwind CSS. Getting started --------------- [](#getting-started) Palcera Theme is installed automatically when you use the Palcera Base site template. It can also be installed via Composer: ``` composer require palcera/palcera_theme ``` ### Don't sub-theme Palcera Theme [](#dont-sub-theme-palcera-theme) Palcera Theme does not provide backward compatibility guarantees between releases. If you need to customize beyond fonts and colors, use Drupal's starter kit tool to create your own copy: ``` cd drupal/web php core/scripts/drupal generate-theme my_theme --name="My Custom Theme" --starterkit=palcera_theme ``` This creates an independent copy at `themes/my_theme` that you fully control. You can then remove the original: ``` composer remove palcera/palcera_theme ``` Customizing ----------- [](#customizing) There are three levels of customization, from simplest to most flexible: ### 1. Fonts & colors (no build required) [](#1-fonts--colors-no-build-required) Edit `theme.css` in your theme directory. This file controls CSS custom properties (design tokens) for colors, fonts, spacing, and border radius. Changes take effect after clearing Drupal's cache — no CSS rebuild needed. Key sections in `theme.css`: SectionWhat it controls`@theme`Tailwind design tokens (colors, fonts, radius)`:root`CSS custom properties for light mode`.dark`CSS custom properties for dark mode`@font-face`Font files and weights### 2. Components & templates (build required) [](#2-components--templates-build-required) Palcera Theme uses [single-directory components](https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components). Each component lives in its own folder under `components/` with a Twig template, YAML definition, and optional JS. You can modify existing components or add new ones. Since the theme uses Tailwind, any changes to Twig templates or CSS files require a rebuild (see Building CSS below). ### 3. Full theme conversion (starter kit) [](#3-full-theme-conversion-starter-kit) For deep customization, generate a starter kit copy (see "Don't sub-theme" above). This gives you full ownership of all templates, components, and build configuration. Building CSS ------------ [](#building-css) The theme uses [Tailwind CSS](https://tailwindcss.com) for utility-first styling. Install dependencies and build: ``` npm install npm run build ``` For development with auto-rebuild on file changes: ``` npm run dev ``` Code Formatting --------------- [](#code-formatting) The theme uses [Prettier](https://prettier.io) with plugins for Tailwind CSS and Twig templates. ``` npm run format # Format all files npm run format:check # Check without changing ``` For the best experience, [set up Prettier in your editor](https://prettier.io/docs/editors) to format on save. **Note**: Some files are excluded via `.prettierignore`, such as `html.html.twig` which contains Drupal placeholder tokens that break Prettier's parser. Component JavaScript -------------------- [](#component-javascript) `lib/component.js` provides `ComponentType` and `ComponentInstance` classes that encapsulate Drupal behavior boilerplate: ``` import { ComponentType, ComponentInstance } from "../../lib/component.js"; class Accordion extends ComponentInstance { init() { this.el.querySelector(".accordion--content").classList.toggle("visible"); this.el.addClass("js"); } } new ComponentType(Accordion, "accordion", ".accordion"); ``` Each matching element gets its own `ComponentInstance` with `this.el` pointing to it. The `ComponentType` handles `Drupal.behaviors`, `once()`, and element discovery. Component instances are accessible at `window.palcera_themeComponents.`. Known issues ------------ [](#known-issues) ### Canvas code components + Tailwind [](#canvas-code-components--tailwind) Canvas code components are not compatible with Tailwind-based themes (including Palcera Theme). Creating a code component will break the theme styling. Workaround: 1. Open Canvas's in-browser code editor, Global CSS tab. 2. Paste `theme.css` contents at the top. 3. Paste `main.css` contents below it (remove `@import` statements first). 4. Save. This is tracked in the Canvas issue queue and applies to all Tailwind-based Canvas themes. Getting help ------------ [](#getting-help) - [GitHub Issues](https://github.com/palcera/palcera_theme/issues) — bug reports and feature requests - [Palcera CMS](https://github.com/palcera/palcera_cms) — main project ### Health Score 30 — LowBetter than 65% of packages Maintenance83 Actively maintained with recent releases Popularity4 Limited adoption so far Community8 Small or concentrated contributor base Maturity24 Early-stage or recently created project Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~1 days Total 5 Last Release 85d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/f79f2ebe0cad62e5037f9c6a72c3176348f076fbe7a9f318c515f155e3bcfc9c?d=identicon)[camoa](/maintainers/camoa) --- Top Contributors [![camoa](https://avatars.githubusercontent.com/u/4201618?v=4)](https://github.com/camoa "camoa (7 commits)") ### Embed Badge ![Health badge](/badges/palcera-palcera-theme/health.svg) ``` [![Health](https://phpackages.com/badges/palcera-palcera-theme/health.svg)](https://phpackages.com/packages/palcera-palcera-theme) ``` ### Alternatives [mustache/mustache A Mustache implementation in PHP. 3.3k44.6M291](/packages/mustache-mustache)[roots/acorn Framework for Roots WordPress projects built with Laravel components. 9682.1M97](/packages/roots-acorn)[whitecube/nova-flexible-content Flexible Content & Repeater Fields for Laravel Nova. 8053.0M25](/packages/whitecube-nova-flexible-content)[mopa/bootstrap-bundle Easy integration of twitters bootstrap into symfony2 7042.9M33](/packages/mopa-bootstrap-bundle)[limenius/react-bundle Client and Server-side react rendering in a Symfony Bundle 3871.2M](/packages/limenius-react-bundle)[symfony/ux-icons Renders local and remote SVG icons in your Twig templates. 545.8M69](/packages/symfony-ux-icons) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)