Drupal Planet

Promet Source: Advantages of Component-Based Web Design Systems

19 hours 53 minutes ago
In the evolving world of web design and development, component-based design systems represent a revolutionary leap -- a previously missing link that replaces an environment of siloed functions and time-consuming complexities with high velocity capabilities that fuel flexibility, consistency, and collaboration.

Drupal.org blog: What’s new on Drupal.org - August 2020

1 day 9 hours ago

Read our roadmap to understand how this work falls into priorities set by the Drupal Association with direction and collaboration from the Board and community. You can also review the Drupal project roadmap.

Drupal.org Updates GitLab Merge Request beta

Back in July we kicked off the GitLab merge request beta, and over the course of August more and more project maintainers opted-in. The merge request workflow is available on more than 150 projects, and in several core issues. This is a *dramatic* improvement in the contribution workflow, especially for newer contributors or contributors making 'drive-by' contribution - and makes the lives of our existing long-term contributors much easier.

We're getting ever closer to enabling this workflow on every project across Drupal.org - but we still need your help! You can try out the contribution workflow on any of the projects that have opted in, opt-in your own projects, or check out the workflow in the core issues trying the beta.

Check out these issues to opt-in your project or core issue.  We anticipate general availability across all projects within just a few more weeks as we gather the final feedback from our beta contributors.

Auto Updates contribution week(s)!

During the week of August 3rd, 2020, representatives from three of the most successful open source content management systems came together to collaborate on a mechanism for securing software updates. Each of these open source projects is based on PHP, with similar use-cases, users, and update delivery architecture. By teaming up across these three projects, and any others who choose to join, we hope to standardize on a secure update delivery and validation mechanism. With this mechanism in place, each project can then build on top of it for additional features for our respective communities, such as providing secure automatic updates in Drupal.

      

Drupal, Typo3, and Joomla spent the week evaluating The Update Framework (aka TUF), an initiative of the Cloud Native Computing Foundation to provide a standardized framework or managing secure updates, minimize the impact of any potential compromises, and to be flexible enough to be used across different software systems.

Over the course of the week we made significant progress by replicating the reference implementation and its test fixtures in php, hosting the work in a shared repository: https://github.com/php-tuf/php-tuf. As we left the contribution we agreed to regroup in September for an additional collaboration. (That second contribution week has now happened, so look for an update in our September blog post!)

How can you get involved?

If you're interested in contributing to the PHP-TUF effort, you can take a look at the GitHub repository for the project: https://github.com/php-tuf/php-tuf

If you're connected to the Drupal community and are interested in PHP-TUF, or the larger initiative to work towards automatic updates, you can join us in Drupal Slack in the #autoupdates channel.

Per-project issue summary templates

Contributing to Drupal can be intimidating for a newcomer. One of the first barriers is just knowing 'how do I file a bug or feature request?'

Drupal core has a project issue summary template that is predefined to ask the right questions to help build a useful, actionable issue report.

And now, thanks to community contributors, each project hosted on Drupal.org can now define its own issue summary template - extending this great contributor onboarding feature to all projects in the Drupal ecosystem.

Launched the Lazy Load initiative

An increasing goal of the Drupal Association is to foster and onboard more major contributors to the Drupal project. One of the organizations we've been talking to recently is Google. Google has a vested interest in the performance of the open web, and over the course of the past several years has begun hosting a CMS leadership summit, to bring representatives from many CMS projects together.

As part of this growing collaboration, the Drupal Association has helped to coordinate is the Lazy-Load initiative, which seeks to load all images lazily in Drupal core by default. Google has generously sponsored this work, and we hope to see it included in Drupal 9.1.

Supporting DrupalCon Europe - now virtual!

DrupalCon Europe has gone virtual! Early in the year, many of us hoped that we might be able to come together in person in Barcelona this fall. Unfortunately, this was not to be. But the European community is not letting that stop them from having a great event - online!

The Drupal Association spent some time in August working with the DrupalCon Europe team to integrate their chosen virtual event platform with the events.drupal.org schedule!

Registration is open now: https://events.drupal.org/europe2020 

And you can browse the program here: https://events.drupal.org/europe2020/schedule/2020-12-08

———

As always, we’d like to say thanks to all the volunteers who work with us, and to the Drupal Association Supporters, who make it possible for us to work on these projects. In particular, we want to thank:

If you would like to support our work as an individual or an organization, consider becoming a member of the Drupal Association.

Follow us on Twitter for regular updates: @drupal_org, @drupal_infra

BADCamp News: Earn Drupal contribution credit while upping your professional development at BADCamp

1 day 13 hours ago
Earn Drupal contribution credit while upping your professional development at BADCamp Fri, 09/18/2020 - 12:00 volkswagenchick Fri, 09/18/2020 - 04:38

BADCamp is understanding that there are many different ways that folks can contribute back to Drupal. Not a coder!? Not a problem! We have plenty of opportunities for people to earn contribution credits while working on their professional development. 

Drupal Planet

Dries Buytaert: How governments can help sustain Open Source

1 day 13 hours ago

Yesterday I wrote about why software funded with tax dollars should be Open Source. Based on the feedback in email and social media, lots of people seem to agree.

Today, I want to highlight how this could be a game changer for Open Source sustainability.

Using Drupal as an example, let's do some quick math. Imagine if:

  • 1,000 government agencies around the world (federal, state, or local) spend an average of $300,000 a year on their Drupal sites.
  • 5% of that investment results in Open Source contributions.

Even if these numbers are conservative, it would lead to $15 million in annual contributions to Drupal: 1,000 x $300,000 x 0.05 = $15,000,000. That could be 150 full-time contributors each year.

In other words, requiring public code in government could be Open Source's best funding mechanism.

Promet Source: What is Atomic Design?

1 day 21 hours ago
Often, the most effective means of managing complexity is a laser-sharp focus on simplification -- breaking down a project into its smallest component parts and visualizing incremental  steps toward completion beginning with the smallest building blocks.   

Chapter Three: Drupal Backender Learns Gatsby: Speed up Gatsby Builds With Drupal Image Processing

3 days 6 hours ago

Gatsby Image, along with gatsby-transformer-sharp and gatsby-plugin-sharp, is a common way to handle images in a Gatsby project.  It gives us the power to process source images at build time to create a 'srcSet' for  '' or '' tags, or create versions in grayscale, duotone, cropped, rotated, etc.

When Gatsby builds from a Drupal source, it downloads the source images and processes them to create these image variations which are stored in the public directory. The ability to optimize and art-direct images at build time is great, but build performance suffers while these assets are generated. As a site grows in images, the time it takes to build grows as well. Image processing can take hours, while the rest of the build takes mere minutes.

myDropWizard.com: Drupal 6 core and CTools security update for SA-CORE-2020-007

3 days 7 hours ago

As you may know, Drupal 6 has reached End-of-Life (EOL) which means the Drupal Security Team is no longer doing Security Advisories or working on security patches for Drupal 6 core or contrib modules - but the Drupal 6 LTS vendors are and we're one of them!

Today, there is a Moderately Critical security release for Drupal core and CTools to fix a Cross-Site Scripting (XSS) vulnerability. You can learn more in the security advisory:

Drupal core - Moderately critical - Cross-site scripting - SA-CORE-2020-007

Here you can download:

If you have a Drupal 6 site, we recommend you update immediately! We have already deployed the patch for all of our Drupal 6 Long-Term Support clients. :-)

FYI, there were other Drupal core security advisories made today, but those don't affect Drupal 6.

If you'd like all your Drupal 6 modules to receive security updates and have the fixes deployed the same day they're released, please check out our D6LTS plans.

Note: if you use the myDropWizard module (totally free!), you'll be alerted to these and any future security updates, and will be able to use drush to install them (even though they won't necessarily have a release on Drupal.org).

Nonprofit Drupal posts: September Drupal for Nonprofits Chat

3 days 8 hours ago

Our normally scheduled call to chat about all things Drupal and nonprofits will happen TOMORROW, Thursday, September 16, at 1pm ET / 10am PT. (Convert to your local time zone.)

Alberto Rojas from Manati will be giving an update about Layout Builder. We will also discuss whatever Drupal related thoughts are on your mind. If you would like to contribute to the conversation, please join us.  

All nonprofit Drupal devs and users, regardless of experience level, are always welcome on this call.

Feel free to share your thoughts and discussion points ahead of time in our collaborative Google doc: https://nten.org/drupal/notes

This free call is sponsored by NTEN.org and open to everyone.

View notes of previous months' calls.

Security advisories: Drupal core - Moderately critical - Information disclosure - SA-CORE-2020-011

3 days 8 hours ago
Project: Drupal coreDate: 2020-September-16Security risk: Moderately critical 12∕25 AC:None/A:User/CI:Some/II:None/E:Theoretical/TD:DefaultVulnerability: Information disclosureCVE IDs: CVE-2020-13670Description: 

A vulnerability exists in the File module which allows an attacker to gain access to the file metadata of a permanent private file that they do not have access to by guessing the ID of the file.

Solution: 

Install the latest version:

Versions of Drupal 8 prior to 8.8.x are end-of-life and do not receive security coverage. Sites on 8.7.x or earlier should update to 8.8.10.

Reported By: Fixed By: 

Security advisories: Drupal core - Moderately critical - Access bypass - SA-CORE-2020-008

3 days 9 hours ago
Project: Drupal coreDate: 2020-September-16Security risk: Moderately critical 12∕25 AC:Basic/A:None/CI:Some/II:None/E:Theoretical/TD:DefaultVulnerability: Access bypassCVE IDs: CVE-2020-13667Description: 

The experimental Workspaces module allows you to create multiple workspaces on your site in which draft content can be edited before being published to the live workspace.

The Workspaces module doesn't sufficiently check access permissions when switching workspaces, leading to an access bypass vulnerability. An attacker might be able to see content before the site owner intends people to see the content.

This vulnerability is mitigated by the fact that sites are only vulnerable if they have installed the experimental Workspaces module.

Solution: 

Install the latest version:

Versions of Drupal 8 prior to 8.8.x are end-of-life and do not receive security coverage. Sites on 8.7.x or earlier should update to 8.8.10.

Once a site running Workspaces is upgraded, authenticated users may continue to see unauthorized workspace content that they accessed previously until they are logged out.

If it is important for the unintended access to stop immediately, you may wish to end all active user sessions on your site (for example, by truncating the sessions table). Be aware that this will immediately log all users out and can cause side effects like lost user input.

Reported By: Fixed By: 

Security advisories: Drupal core - Moderately critical - Cross-site scripting - SA-CORE-2020-010

3 days 9 hours ago
Project: Drupal coreDate: 2020-September-16Security risk: Moderately critical 13∕25 AC:Basic/A:User/CI:Some/II:Some/E:Theoretical/TD:DefaultVulnerability: Cross-site scriptingCVE IDs: CVE-2020-13669Description: 

Drupal core's built-in CKEditor image caption functionality is vulnerable to XSS.

Solution: 

Install the latest version:

Versions of Drupal 8 prior to 8.8.x are end-of-life and do not receive security coverage. Sites on 8.7.x or earlier should update to 8.8.10.

Reported By: Fixed By: 

Security advisories: Drupal core - Critical - Cross-site scripting - SA-CORE-2020-009

3 days 9 hours ago
Project: Drupal coreDate: 2020-September-16Security risk: Critical 15∕25 AC:Basic/A:None/CI:Some/II:Some/E:Theoretical/TD:DefaultVulnerability: Cross-site scriptingCVE IDs: CVE-2020-13668Description: 

Drupal 8 and 9 have a reflected cross-site scripting (XSS) vulnerability under certain circumstances.

An attacker could leverage the way that HTML is rendered for affected forms in order to exploit the vulnerability.

Solution: 

Install the latest version:

Versions of Drupal 8 prior to 8.8.x are end-of-life and do not receive security coverage. Sites on 8.7.x or earlier should update to 8.8.10.

In addition to updating Drupal core, sites that override \Drupal\Core\Form\FormBuilder's renderPlaceholderFormAction() and/or buildFormAction() methods in contrib and/or custom code should ensure that appropriate sanitization is applied for URLs.

Reported By: Fixed By: 

Security advisories: Drupal core - Moderately critical - Cross-site scripting - SA-CORE-2020-007

3 days 9 hours ago
Project: Drupal coreDate: 2020-September-16Security risk: Moderately critical 14∕25 AC:Basic/A:User/CI:Some/II:Some/E:Theoretical/TD:AllVulnerability: Cross-site scriptingCVE IDs: CVE-2020-13666Description: 

The Drupal AJAX API does not disable JSONP by default, which can lead to cross-site scripting.

Solution: 

Install the latest version:

Versions of Drupal 8 prior to 8.8.x are end-of-life and do not receive security coverage. Sites on 8.7.x or earlier should update to 8.8.10.

If you were previously relying on Drupal's AJAX API to perform trusted JSONP requests, you'll either need to override the AJAX options to set "jsonp: true", or you'll need to use the jQuery AJAX API directly.

If you are using jQuery's AJAX API for user-provided URLs in a contrib or custom module, you should review your code and set "jsonp: false" where this is appropriate.

Reported By: Fixed By: 

Drupal Association blog: Time to Vote!

4 days 8 hours ago

Elections for the next At-Large member of the Drupal Association Board have now reached the voting phase. Voting will take place from now, 15 September, until 30 September at 10 am PDT.

Drupal Association Individual members should check their email inboxes over the next couple of days for their voting slip arriving.

In the meantime, voters should read the candidate’s info pages and watch the “Candidate Chat” videos and consider which of the candidates will help the Drupal Association most effectively fulfill its mission.

Voting

As detailed previously, we will be using Helios Voting this year and the voting process looks like this:

  1. Open the voting slip email that was sent to the primary email address defined in your drupal.org profile
    The email will arrive from [email protected] -- check your spam folder if you cannot see it, though it will take some hours to send voting slips to each of the 3200+ eligible voters!
  2. Read the instructions there to register your vote
  3. Again, you should receive an email from Helios Voting, confirming the correct registration of your vote
  4. Await the results!

We would like to thank all of our candidates this year for their participation and wish them all the very best of luck!

Have questions? Please contact me: Rachel Lawson.

Evolving Web: Drupal 8/9 Migration: Migrating Media Items and Their Relationships

4 days 10 hours ago

Since Drupal 8.5, the Media module in core has been a reality and the recommended way to handle media content in Drupal.

If you're migrating from Drupal 7 to Drupal 8 or Drupal 9, this is something you need to take into consideration.

👩‍💻 Get up to speed on the latest version of Drupal! Join us on September 24 for a free webinar on Drupal 9.

In this blog post, we'll go through a migration example where you'll learn how to migrate media items and their relationships in Drupal.

The Drupal 8/9 Migration Tutorial Series

Before We Start The Problem

We have received a database dump and files backup from our imaginary client.

We need to:

  • Migrate files from articles into Drupal 8 files
  • Create media items for each migrated file
  • Migrate articles to Drupal 8 and add the related media items.
Setting up the Migration Create the migration module

We first need to create a module for our migrations. In this example, we're naming it migrate_example_media. 

We then need to add the following modules as dependencies in the module declaration:

Create a migration group

To group the migrations, we also need to create a migration group. To do so, we’ll create a fairly simple configuration file so that the group gets created when the module is installed. The file’s contents should be as follows:

id: media label: Media Group source_type: Drupal 7 shared_configuration: source: key: migrate_d7Define a new database connection

Next, you need to load the Drupal 7 database into your Drupal 8 installation. To do so, you need to define a new database connection in your settings.php file like this:

$databases['migrate_d7']['default'] = array( 'driver' => 'mysql', 'database' => 'migrate_d7', 'username' => 'user', 'password' => 'password', 'host' => 'db', 'prefix' => '', );

And then you can import the database dump into this new database connection using your preferred method.

Writing the Migrations

Next thing to do is to write the actual migrations. Per our requirements, we need to write three different migrations: one for files, one for media and one for articles.

Since Drupal 8.1.x, migrations are plugins that should be stored in a migrations folder inside any module. You can still make them configuration entities as part of the migrate_plus module, but I personally prefer to follow the core recommendation because it's easier to develop (you can make an edit and just rebuild cache to update it).

Write the file migration

The first migration to write is the file migration. To speed things up, we're placing the files backup into a migratefiles folder in sites/default/files and we'll copy the files from there to the right folder during the migration.

The source section of the migrate plugin looks like this:

source: plugin: d7_file scheme: public constants: migrate_files_path: 'sites/default/files/migratefiles'

We're setting migrate_files_path to be the base path where we put the backup files. This will be used later to copy the files to the right location.

The process section of the migrate file looks like this:

process: filename: filename replaced_filepath: - plugin: str_replace source: filepath search: "sites/default/files/" replace: "" source_full_path: - plugin: concat delimiter: / source: - constants/migrate_files_path - '@replaced_filepath' - plugin: urlencode uri: plugin: file_copy source: - '@source_full_path' - uri filemime: filemime status: status created: timestamp changed: timestamp uid: uid

First, we create a temporary replaced_filepath to remove the path prefix. Then, we'll use the concat plugin to create the source_full_path based on the migrate_files_path constant and the replaced_filepath. Then, for the uri, we use file_copy to copy from this source_full_path to the destination URI. The remaining fields are directly mapped from Drupal 7 values.

You can look at the full migration file in the code samples repo.

Write the media migration

The media migration also uses d7_file as the source. We use the skip_on_value plugin in a temporary temp1 field to skip files that are not images:

temp1: - plugin: skip_on_value method: row not_equals: true value: - image/png - image/jpg - image/jpeg source: filemime

We use migration_lookup plugin to add the actual image files like this:

field_media_image/target_id: - plugin: migration_lookup migration: file source: fid

You can look at the full migration file in the code samples repo.

Write the article migration 

The article migration is pretty similar to any other entity migrations. To set the image, we're using the sub_process and migration_lookup plugins like this:

field_image: plugin: sub_process source: field_image process: target_id: plugin: migration_lookup source: fid migration: media_image

So that it looks for the right items in the media_image migration. You can look at the full migration file in the code samples repo.

Running the Migrations

Since we have set dependencies, we can instruct Drupal to run the migration group and it will run the migrations in the right order.

To do so, execute drush mim --group=media and the output will look like this:

[notice] Processed 3 items (3 created, 0 updated, 0 failed, 0 ignored) - done with 'file' [notice] Processed 3 items (3 created, 0 updated, 0 failed, 0 ignored) - done with 'media_image' [notice] Processed 3 items (3 created, 0 updated, 0 failed, 0 ignored) - done with 'article'

You can also run drush ms to see current migration status:

--------------------- ----------------------------------- -------- ------- ---------- ------------- --------------------- Group Migration ID Status Total Imported Unprocessed Last Imported --------------------- ----------------------------------- -------- ------- ---------- ------------- --------------------- Media Group (media) file Idle 3 3 0 2020-08-24 16:06:10 Media Group (media) media_image Idle 3 3 0 2020-08-24 16:06:10 Media Group (media) article Idle 3 3 0 2020-08-24 16:06:10Next Steps + more awesome articles by Evolving Web

Manifesto: Assessing your Drupal 9 Readiness, Part II: Who is afraid of contrib modules updates?

4 days 14 hours ago

In this series of blog posts, we want to help tech leads and project managers assess how ready their projects are for Drupal 9. In Part 1, we estimated the possible amount of work it takes to make  custom modules compatible with the new major release. If you’ve already done this, then congratulations! …If you. Continue reading...

The post Assessing your Drupal 9 Readiness, Part II: Who is afraid of contrib modules updates? appeared first on Manifesto.

Specbee: How to toggle between Dark and Light Mode in Drupal 8 (or 9) based on user preference

4 days 15 hours ago
How to toggle between Dark and Light Mode in Drupal 8 (or 9) based on user preference Varun Rao 15 Sep, 2020 Top 10 best practices for designing a perfect UX for your mobile app

How awesome would it be to give your users the freedom to customize their interface to as per their preference? While many users prefer a light interface (light background with dark text), some users choose a dark interface (dark background with light text). Darker interfaces are perceived as cool and trendy while some also believe it reduces strain on the eyes especially for developers who spend a lot of time in front of the screen. I believe that providing an option to your users is a tremendous win in terms of accessibility and user experience. There are a couple of ways with which one can accomplish this. In this article, we will discuss on how to toggle between dark/light web design modes and implement this in Drupal 8 or Drupal 9.


We will be focusing on two methods to implement this -
1.    Using only CSS.
2.    Implementing the CSS & JS toggle switch

Using only CSS

To achieve Dark mode on any website with only CSS, one must keep in mind some of the system requirements.

One such important requirement is the system-wide dark mode. If a user prefers to use dark mode on his PC, then the user is served with a website which shows a dark-colored background with light text on it.

The prefers-color-scheme (media query) is used to identify if the user has requested the system to use a light or dark color theme.

Implementation:

1.    Declare the CSS variables.
2.    Use the variables wherever it is necessary.

The result:
See the Pen Prefers-color-scheme (Auto dark/light mode) by Varun Rao (@varoonrao) on CodePen.

Note: To emulate the result on some unsupported devices, just enter DevTool by pressing F12. Next, press CTRL+SHIFT+P, then search for prefers-color-scheme: dark and press enter.  

Implementing the CSS and JS toggle switch

If we are going with this approach, then we don’t need to bother about the system requirements. Just write couple of lines of CSS and JS and you should be ready.

Once we have initialized the variables, we can reference these variables in our stylesheets.

This will be the HTML structure to toggle between dark and light mode.

                                                       HTML Structure


And some lines of CSS should result in this switch.

The Switch

The final part is to add a bit of JavaScript to tie it all together.
●    Store the user preference for future visits
●    Check for saved user preference, if any, on load of the website

That's it! Check out the full demo below.


See the Pen DARK/LIGHT with js toggle switch by Varun Rao (@varoonrao) on CodePen.

Or click here to view the demo.

Implementing the Dark / Light Toggle in Drupal 8 (or Drupal 9)

To start with creating a custom Drupal 8 theme, please refer the awesome article here. Let us now start creating a theme to show how to use dark theme/ light theme in Drupal 8 or Drupal 9.
 
The file structure will look like this: 

 

Now, update the header section inside the page.html.twig with the following code.
page.html.twig

   
     
        {{ page.branding }}
        {{ page.navigation }}
       
         
           
           
         
       
     
   
 
The rest of the HTML structure will be dependent on your design or requirements.
Once you are done with the HTML structure, it is time to make them look nice by styling the elements in CSS.
First, you have to create all the default variables which will be responsible for the colors on Light/ Dark mode.

style.css

:root {
  --color-background: #f0f0f0;
  --color-header: rgb(14, 33, 141);
  --color-header-text: #aecafa;
  --color-text: #2c0000;
  --color-card-bg: #fff;
  --color-link: rgb(255, 0, 0);
}
/* Variable decleration for dark mode */
[data-theme="dark"] {
  --color-background: #1a1a1a;
  --color-header: #aecafa;
  --color-header-text: 0e218d;
  --color-text: #d3d3d3;
  --color-card-bg: #435561;
  --color-link: #24ce24;
}

Now that you are done defining the variables, it is time to add style to the Header section to get the required result.
style.css
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  background-color: var(--color-header);
}

.header a {
  color: var(--color-header-text);
  text-decoration: none;
  font-weight: bold;
}

.region-navigation {
  display: flex;
  justify-content: center;
}

ul.menu {
  display: flex;
  justify-content: center;
}

ul.menu li {
  margin-right: 30px;
}

.switch-wrapper {
  display: flex;
  align-items: center;
}

.switch {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px;
}

.switch input {
  display: none;
}

.slider {
  background-color: white;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.4s;
}

.slider:before {
  background-color: rgb(255, 196, 0);
  bottom: 4px;
  content: url("../assets/sunny-day.svg");
  height: 26px;
  left: 4px;
  position: absolute;
  transition: 0.4s;
  width: 26px;
}

input:checked + .slider {
  background-color: rgb(36, 36, 36);
}

input:checked + .slider:before {
  transform: translateX(26px);
  content: url("../assets/night.svg");
  background-color: rgb(59, 116, 223);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
Please note that the styling may vary according to your requirements.
After all the styling, it is now time to write some functionality in Jquery code.
The Jquery code will look something like this (script.js in our case)

script.js

(($, Drupal) => {
  Drupal.behaviors.mainMenu = {
    attach(context) {
      const toggleSwitch = document.querySelector(
        '.switch input[type="checkbox"]'
      );
      const currentTheme = localStorage.getItem("theme");

      if (currentTheme) {
        document.documentElement.setAttribute("data-theme", currentTheme);

        if (currentTheme === "dark") {
          toggleSwitch.checked = true;
        }
      }

      function switchTheme(e) {
        if (e.target.checked) {
          document.documentElement.setAttribute("data-theme", "dark");
          localStorage.setItem("theme", "dark");
        } else {
          document.documentElement.setAttribute("data-theme", "light");
          localStorage.setItem("theme", "light");
        }
      }

      toggleSwitch.addEventListener("change", switchTheme, false);
    },
  };
})(jQuery, Drupal);

And don’t forget to include your JS and CSS files inside your theme_name.libraries.yml file.

global-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
  js:
    js/script.js: {}
  dependencies:
    - core/jquery
- core/drupal
Now clear the site cache to see the result. Your end result should look like this :

 

 

UI/UX developers sometimes prefer creating two separate themes for light and dark themes. However, an easier and more time-saving option would be to design the theme in a way where the user can toggle between light and dark modes easily. I hope you have found this article on implementing the toggle in Drupal 8 (or 9) helpful. Contact us to know more about our Drupal development services and how we can help you.

Drupal Planet Drupal Development Drupal Drupal 9 Shefali ShettyApr 05, 2017 Subscribe For Our Newsletter And Stay Updated Subscribe

Leave us a Comment

  Shefali ShettyApr 05, 2017 Recent Posts Image How to toggle between Dark and Light Mode in Drupal 8 (or 9) based on user preference Image Testing Your Drupal Website just got easier with Behat (A comprehensive tutorial) Image Design VS Code – Why should they go hand-in-hand? Want to extract the maximum out of Drupal? TALK TO US Featured Success Stories

Know more about our technology driven approach to recreate the content management workflow for [24]7.ai

link

Find out how we transformed the digital image of world’s largest healthcare provider, an attribute that defined their global presence in the medical world.

link

Discover how a Drupal powered internal portal encouraged the sellers at Flipkart to obtain the latest insights with respect to a particular domain.

link

Debug Academy: Why you should focus on learning HTML and CSS

5 days 8 hours ago
Why you should focus on learning HTML and CSS

You’ve probably noticed we have a course called “HTML/CSS Ramp-Up” and are wondering if this is the right place for you to start on your journey to learning how to build websites. You could be looking to do front-end development, you could be looking to do site-building in Drupal or Acquia’s Site Factory, or you could still be wayfinding and trying to figure out if front-end or back-end is the right path for you. No matter the case, the HTML/CSS ramp-up course Debug Academy has put together will give you an introduction to the essential components of every website.

lindsey.gemmil… Mon, 09/14/2020
Checked
1 hour 27 minutes ago
Drupal.org - aggregated feeds in category Planet Drupal
Subscribe to Drupal Planet feed