Theme colour switcher

Blog Topic: theming

I really appreciate when a website or app offers the choice of dark mode. It makes reading at night much easier on the eyes, and some people prefer it at all times due to vision issues. I'd never implemented a dark mode switch, so one of my goals for my blog redesign was to do so, both for reader convenience and to gain the experience. Here's how I did it. It might seem surprising that I discuss…

Continue reading How to create an accessible dark mode switch for your website

By default you get the following page template suggestions for a Commerce product: page--product--[ID].html.twig page--product--%.html.twig page--product.html.twig page.html.twig Here's a template suggestion for custom page templates per product type: /**  * Add page templates for Commerce product types  * Example: page--product--event.html.twig  *//** * Implements…

Continue reading Drupal 8 theme suggestion for Commerce product page template per product type

I've been working on a site with events, and tearing my hair out over how to print formatted dates with the correct timezone value in Twig templates, specifically node.html.twig and views-view-fields.html.twig. The issue was first, getting the formatted date to display in the template; and secondly, when I managed to get it displaying, it was not in the correct timezone; it was off by several…

Continue reading Print formatted date with correct timezone from datetime or daterange field in node and Views templates - Drupal 8

I'm working on a website which has icons on file upload links, like so: This works for people who can see the icons, but what about those who can't? Accessibility means giving all users an equivalent experience, regardless of how they're accessing the site. If the icons were inline images, we could add alt text with the filetype. However, in this case, they're background images. So, we want to…

Continue reading Add file type indicator to file field links for accessibility - Drupal 8

By default, the label for the core Search module text input in Drupal 8 is invisible, that is, it's present but visually hidden so users of assistive technology can read it. But what if you want to display it visually? There's no way to do it through configuration, and little to no information about how to do it with code. I found where the visibility was being set, in SearchBlockForm.php in the…

Continue reading How to make core search block form label visible - Drupal 8

I've been working on a website with the requirement to truncate certain text fields—display the first several words of the text, with a "show more" link which on click, expands the rest of the text. I had to dig a bit into the Twig documentation to figure it out, but it's easily done with Twig filters and a bit of JavaScript. (Note that this method will strip any HTML in the text fields. It…

Continue reading Truncated expanding text field with "show more" link in Drupal 8 & Twig