Merge pull request #445 from material-components/fix/443

Move dark mode to plugin; init dark mode early

Author: Mario Aguiar

plugin/assets/src/customizer/customize-preview.js

@@ -40,7 +40,7 @@ import {
  */
 import { STYLES } from './components/google-fonts-control/styles';
 import { setConfig } from '../block-editor/utils/get-config';
-import { applyRgbValue } from '../../../../theme/assets/src/helper/apply-rgb-value';
+import { applyRgbValue } from '../helper/apply-rgb-value';
 
 const getIconFontName = iconStyle => {
 	return iconStyle === 'filled'

…front-end/components/dark-mode-switch.js …assets/src/front-end/dark-mode-switch.jstheme/assets/src/front-end/components/dark-mode-switch.js renamed to plugin/assets/src/front-end/dark-mode-switch.js theme/assets/src/front-end/components/dark-mode-switch.js renamed to plugin/assets/src/front-end/dark-mode-switch.js

@@ -23,7 +23,7 @@ import {
 	themeFromSourceColor,
 	applyTheme,
 } from '@material/material-color-utilities';
-import { applyRgbValue } from '../../helper/apply-rgb-value';
+import { applyRgbValue } from '../helper/apply-rgb-value';
 
 const body = document.body;
 export const ICONS = {

plugin/assets/src/front-end/index.js

@@ -28,6 +28,7 @@ import {
 } from '../common/mdc-components-init';
 import { initContactForm } from './contact-form';
 import { masonryInit } from './masonry';
+import { initDarkModeSwitch } from './dark-mode-switch';
 
 addEventListener( 'DOMContentLoaded', () => {
 	initButtons();
@@ -45,3 +46,5 @@ addEventListener( 'DOMContentLoaded', () => {
 		initTextFields();
 	}
 } );
+
+initDarkModeSwitch();

…eme/assets/src/helper/apply-rgb-value.js …gin/assets/src/helper/apply-rgb-value.jstheme/assets/src/helper/apply-rgb-value.js renamed to plugin/assets/src/helper/apply-rgb-value.js theme/assets/src/helper/apply-rgb-value.js renamed to plugin/assets/src/helper/apply-rgb-value.js

@@ -33,7 +33,8 @@ import { debounce } from 'lodash';
  * Internal dependencies
  */
 import { masonryInit } from '../front-end/components/masonry';
-import { ICONS as SWITCHER_ICONS } from '../front-end/components/dark-mode-switch';
+
+import { ICONS as SWITCHER_ICONS } from '../../../../plugin/assets/src/front-end/dark-mode-switch';
 
 export const COLOR_MODES = {
 	default: 'default',

theme/assets/src/customizer/customize-preview.js

@@ -25,7 +25,6 @@ import { tabBarInit } from './components/tab-bar';
 import { embedsInit } from './components/embeds';
 import { widgetsInit } from './components/widgets';
 import { masonryInit } from './components/masonry';
-import { initDarkModeSwitch } from './components/dark-mode-switch';
 import './components/navigation';
 import './components/skip-link-focus-fix';
 
@@ -46,5 +45,4 @@ document.addEventListener( 'DOMContentLoaded', () => {
 	embedsInit();
 	widgetsInit();
 	masonryInit();
-	initDarkModeSwitch();
 } );