Neonbyte Theme

Thanks for choosing Neonbyte — a commercial premium Drupal theme developed by experienced Drupal core contributors. This theme reflects hundreds of hours of development and is designed to look beautiful out of the box while providing extensibility through best practices, WCAG 2.2 AA accessibility compliance, minimal technical debt, high performance, and flexible component-driven architecture.

Table of Contents

Key Features

  • Out-of-the-box modern design
  • Fully translatable including RTL language support
  • Component-driven architecture using Single Directory Components (SDC)
  • WCAG 2.2 AA accessibility compliance including forced colors mode, focus management, and reduced motion support
  • Dynamic color and component-based theming system
  • No front-end build tools required
  • No module dependencies on Drupal 11+
  • Core-only APIs with no opinionated content model
  • Performance-optimized asset loading
  • Basic usage if JavaScript is unavailable

Quick Start

Install Neonbyte at Appearance > Add Theme with no license keys or remote callbacks required.

Theme Configuration

Configure your brand at /admin/appearance/settings/neonbyte:
  • Theme Colors: Set primary color and color scheme (see Color System)
  • Logo & Branding: Upload logo and favicon
  • Header Settings: Configure header width, stickiness, transparency, and color theme
  • Footer Settings: Select footer color theme (Primary, White, Light, Dark, Black)
  • Social Media: Add links to your social media profiles
  • Recipe Installation: Apply optional DripYard recipes for content types and demo content

How to use this theme

This theme is meant to get you 90-99% of the way there. It has best practices and opinionated logical defaults baked in, but does not dictate your content architecture. This means that you will need to map data to your components. This is most frequently done within the component's template file, but can also be done within PHP, or a contributed module such as SDC Display or (coming soon) Drupal Canvas.

Theme Architecture

Neonbyte follows a sophisticated multi-layer architecture designed for maintainability and upgrades:

Base Theme (dripyard_base)

  • Foundation Layer: Provides core functionality, base styles, and shared utilities
  • Component Library: Houses the complete Single Directory Components library shared across all DripYard themes
  • Framework: Contains preprocessing system, theme settings infrastructure, and accessibility features
  • Bundled: Included with Neonbyte installation, no separate download required

Neonbyte Theme

  • Style Layer: Applies Neonbyte-specific design tokens, colors, and visual treatments
  • Configuration: Extends base theme settings with Neonbyte-specific options
  • Component Overrides: Customizes base components for the Neonbyte aesthetic

Subtheme (Recommended)

  • Customization Layer: For all site-specific modifications and extensions
  • Future-Proof: Protects customizations during theme updates
  • Override Capability: Can override any component, style, or functionality from parent themes
  • Best Practice: Always make changes in a subtheme rather than modifying Neonbyte directly
This architecture ensures clean separation of concerns while maintaining upgrade compatibility.

Layout Builder Integration

Landing page recipe utilizes Layout Builder for content construction. Compatible with other page builders (Paragraphs, UI Suite), but Layout Builder is chosen for core inclusion.

Layout Sections

Neonbyte includes a Dynamic Layout component that enables flexible grid layouts with 1-4 columns and 1-4 rows. This component supports:
  • Flexible Grid System: Create 1, 2, 3, or 4 column layouts with configurable rows
  • Content Width Control: Choose from edge-to-edge, max-width, or narrow content widths
  • Column Proportions: Customize 2-column (50/50, 25/75, 33/67, 75/25, 67/33) and 3-column ratios (33/33/33, 50/25/25, 25/50/25, 25/25/50)
  • Advanced Spacing: Control margins, padding, and gutters with options for zero, small, medium, large, or default spacing
  • Alignment Options: Set horizontal (start, center, end) and vertical (top, center, bottom) content alignment
  • Theme Integration: All five theme variants (white, light, primary, dark, black) supported
The layout uses CSS Grid for responsive behavior and provides up to 16 content slots (cells) based on your column × row configuration.

Version Support

Drupal 11.2+

No dependencies required.

Component Architecture

Components reside in components/ directory with logical groupings.
  • Most components define schema in *.component.yml
  • Non-reusable components omit schemas
  • Each component includes comprehensive documentation
Built using Drupal’s Single Directory Components (SDC) framework. Components are highly configurable through two mechanisms:

Component Props

Each component defines configurable properties in its *.component.yml schema file, allowing you to:
  • Modify appearance and behavior through standardized interfaces
  • Configure layout options, spacing, alignment, and themes
  • Control content display and functionality
  • Ensure type safety and validation

CSS Variables

Components expose extensive CSS custom properties for fine-grained control:
  • Override colors, spacing, typography, and effects
  • Maintain consistency with design system tokens
  • Customize within your subtheme for upgrade safety
  • Enable component-level theming and variations
This dual approach provides both user-friendly configuration options and deep customization capabilities for developers.

Reducing unneeded markup

Drupal is notoriously markup heavy. We reduce Drupal's markup overhead by using field--bare.html.twig via the core |add_suggestion() Twig filter. Alternative solutions include Fences and No Markup modules.

Accessibility

Neonbyte is fully WCAG 2.2 AA compliant. Most components' documentation includes an Accessibility section. However, site authors should still test their sites and apply best practices to maintain accessibility.

Color System

Neonbyte's color system uses a sophisticated 4-layer architecture that provides flexibility while maintaining WCAG 2.2 AA accessibility compliance:

Theme Settings Layer

Configure your primary brand color through your theme's settings page. This creates a --theme-setting-base-primary-color CSS variable and applies either primary-color-is-dark or primary-color-is-light CSS classes to guide text contrast.

Semantic Layer

Using the native CSS OKLCH() function, the system generates primary and neutral color palettes with ten variations each (100-800), stored in /css/_variables/variables-colors-semantic.css.

Theme Layer

Five built-in themes (White, Light, Primary, Dark, Black) located in /css/themes/ organize semantic colors into working color schemes with variables for:
  • Surfaces: --theme-surface, --theme-surface-alt, --theme-surface-primary
  • Text: --theme-text-color-soft/medium/loud/primary, --theme-link-color/hover
  • Borders/Icons: --theme-border-color/alt/soft
  • Focus: --theme-focus-ring-color
  • Status: --theme-color-error/warning/success/info
  • Buttons: Various surface and text color combinations

Component Layer

Each component defines its own CSS variables that map exclusively to theme layer variables, ensuring consistent theming. Apply theme classes (.theme--dark, .theme--light, etc.) to any component or ancestor element to switch themes while maintaining accessibility contrast ratios.

CSS Architecture

  • CSS classes are loosely named based on the BEM CSS naming methodology. This aligns with Drupal core's coding standards.
  • CSS is scoped to components whenever possible
  • No global build system or dependency tree
  • CSS loads only when needed (performance-first philosophy)
  • CSS logical properties are used for right and left properties. This lets the theme easily adapt to RTL languages. Note that we do not use CSS logical properties for top and bottom properties, as the theme does not support flipping the X and Y axis.
  • Neonbyte heavily utilizes progressive enhancement, which is the concept that we should support features in more modern browsers as long as it does not degrade the usability in older browsers. An example of this is the new interpolate-size property (currently only supported by Chromium at the time of this writing). If the browser supports this, various disclosures (e.g. accordions) will animate on open/close if the users' preference permits.

Layout & Container System

Neonbyte’s layout system uses a combination of query-container, region-container, and full-width wrappers to:
  • Prevent horizontal scrollbars
  • Support responsive breakout elements
  • Handle off-canvas admin UI

CSS Utility Classes:

  • .component-spacer: Wraps landing page components ensuring equal spacing between each. This class is added to the wrapper around the dripyard_landing_page node template. Note that we do apply spacing at the component level in order to make the components more modular. An example of this would be injecting an accordion group into a hero (we wouldn't want component spacing there).
  • .query-container: Wraps non-fixed Drupal regions and enables cqw unit calculations.
  • .region-container: Max-width container within query-container.
  • .full-width: Expands to full page width, even with off-canvas UI.
  • .full-height: Tells .component-spacer to not apply vertical spacing.
  • .container: Used for nested layout inside full-width elements.
  • .visibility-hidden: Hides elements using visibility: hidden
Layout Utilities:
  • Gutters: .gutter-column--0/s/m/l and .gutter-row--0/s/m/l for controlling grid spacing
  • Margins: .margin-top--0/s/m/l and .margin-bottom--0/s/m/l with :first-child and :last-child overrides
  • Padding: .padding-top--0/s/m/l and .padding-bottom--0/s/m/l for internal spacing
Typography Utilities:
  • Heading Styles: .heading-title, .h1 through .h6 apply semantic heading typography
  • Body Text: .body-l, .body-m, .body-s for different body text sizes
  • Color Classes: .color--soft/medium/loud/primary for text color variations mapped to theme variables

Theme Regions

Neonbyte defines strategic regions for flexible content placement throughout your site. Each region is optimized for specific content types and use cases. Verified regions from neonbyte.info.yml:

Header Regions

  • header_first - Header first (logo)
    • Primary location for site branding and logo
    • Typically contains the site logo or title
    • Left-aligned on desktop layouts
  • header_second - Header second (center)
    • Central header area for primary navigation
    • Main menu placement (any menus will automatically inherit the primary-menu component)
    • Search functionality (optional)
  • header_third - Header third (right)
    • Right-aligned header content
    • Secondary navigation (any menus will automatically inherit the secondary-menu component)
    • Language switchers
    • CTAs

Content Regions

  • highlighted - Highlighted
    • Above main content area
    • Site-wide announcements or alerts
    • Featured promotions or important notices
    • This region features styling that creates a light background from to the top of the viewport.
  • content - Content
    • Primary content area
    • Main page content, articles, landing pages
    • Layout Builder content when using landing pages

Fixed Regions

  • fixed_middle_right - Fixed middle right (local actions tabs)
    • Local action buttons and tabs
    • Positioned on right side of viewport
    • Primarily for authenticated users with appropriate permissions
  • fixed_bottom_right - Fixed bottom right (messages)
    • System status messages (success, error, warning notifications)
    • Fixed positioning for consistent visibility

Footer Regions

  • footer_top - Footer top
    • Primary footer content area
    • Main footer navigation, site information
    • Can accommodate multiple columns of content
  • footer_left - Footer left
    • Left column of footer content
    • Company information, contact details
    • Secondary navigation menus
  • footer_right - Footer right
    • Right column of footer content
    • Social media links, newsletter signup
    • Additional contact information or links
  • footer_bottom - Footer bottom
    • Copyright notices, legal information
    • Final footer content, typically minimal
    • Terms of service, privacy policy links

Preprocess System

Neonbyte and all DripYard themes use an object oriented class for preprocessing to keep things clean, legible, reusable and out of the .theme file. The files are in ./src/Preprocess and should all implement the PreprocessInterface which has methods to determine when and how to apply preprocess routines. Some DripYard fields have special logic to generate props from field data. For example, dripyard_link field is preprocessed into props.dripyard_link which only contains the raw HTML props that a <a> would expect. The preprocessors mostly run on blocks as this is where we convert block render data into SDCs with simple props instead of using the field rendering api. Views are a special case because they don't invoke the block theme and preprocessors when rendering block content directly in a view. See the Drupal core issue for more info.

Recommended Modules

  • UI Icons: Icon picker support
  • Core Navigation Module: Replaces tabs with a flexible top bar

Components

All components are located in components/dripyard/ and include comprehensive documentation in their respective .md files.