윅스 (Wix) 코딩 강의 중급 (Intermediate) - 다크 모드, 나이트 모드 만들기 (Dark Mode) - 상호작용 (Interactions)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 다크 모드, 나이트 모드 만들기 (Dark Mode) - 상호작용 (Interactions)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 다크 모드, 나이트 모드 만들기 (Dark Mode) - 상호작용 (Interactions)

강의 내용 요약

다음의 예제는 Wix 윅스 무료 홈페이지 만들기의 자바스크립트 (Javascript) 코딩 기능을 활용할 수 있는 Corvid by Wix (윅스 코딩 - 콜비드) 를 활용하여 만듭니다.

 

웹사이트를 눈의 피로도를 떨어트릴 수 있는 야간 모드 혹은 다크 모드로 적용시키는 기능을 만듭니다.

 

예제 보러가기 (View Example)

Home | Dark Mode

 

예제 에디터 확인하기 (Edit Now)

Log In | Wix

 

 

강의 내용 만드는법

만들고자 하는 윅스 사이트에 다음과 같은 구성 요소들이 필요합니다.

• 스위치 입력란
• 컨테이너 상자
• 메뉴
• 텍스트

 

 

코드 (Code)

Home

// Core code is in the 'Site' Tab.
// Open the template and navigate in the code panel
// at the bottom of the editor

 

Site Code

import { local } from 'wix-storage';

const pageElements = { //Will hold all the elements in the page as arrays
	textElements: [],
	boxContainers: [],
	buttons: []
}

let darkMode = { //Define the color scheme of the dark mode
	textElementFontColor: "white",
	boxContainersBackgroundColor: "#323232",
	buttonsColor: "white"
}

let defaultScheme = { //Will hold the default color scheme without the need to set it manually
	defaultTextElementsHtml: [],
	boxContainersBackgroundColor: [],
	buttonsColor: []
}

$w.onReady(function () {
	saveDefaultColorScheme(); //Save default color scheme
	checkDarkMode(); //Check local whether dark mode is enabled
	addEventListenerToDarkmodeSwitch() //Add the onChange event to the darkmode switch
});

function saveDefaultColorScheme() {
	pageElements.textElements = $w("Text");
	pageElements.boxContainers = $w("Box");
	pageElements.buttons = $w("Button");

	pageElements.textElements.forEach(textElement => {
		defaultScheme.defaultTextElementsHtml.push(textElement.html);
	});
	pageElements.boxContainers.forEach(boxContainer => {
		defaultScheme.boxContainersBackgroundColor.push(boxContainer.style.backgroundColor);
	});
	pageElements.buttons.forEach(button => {
		defaultScheme.buttonsColor.push(button.style.color)
	});
}

function checkDarkMode() {
	darkMode.enabled = JSON.parse(local.getItem('darkmodeEnabled'));
	if (darkMode.enabled === true) {
		switchToDarkMode();
		$w("#darkModeSwitch").checked = true;
	} else {
		switchToDefault();
		$w("#darkModeSwitch").checked = false;
	}
}

function addEventListenerToDarkmodeSwitch() {
	$w("#darkModeSwitch").onChange((event) => {
		if (darkMode.enabled) {
			switchToDefault();
		} else {
			switchToDarkMode();
		}
	})
}

function switchToDarkMode() {
	darkMode.enabled = true;
	local.setItem('darkmodeEnabled', true);
	$w("#swithTooltip").text = "Click to disable dark mode";
	const htmlTagCleanerRegex = /<[^>]*>?/gm; //Regular expression to clean the html tags from the text element.
	pageElements.textElements.forEach(textElement => {
		let text = textElement.html.replace(htmlTagCleanerRegex, '')
		$w(`#${textElement.id}`).html = textElement.html.replace(text, `<span style=color:${darkMode.textElementFontColor}>${text}</span>`)
	});
	pageElements.boxContainers.forEach(boxElement => {
		$w(`#${boxElement.id}`).style.backgroundColor = darkMode.boxContainersBackgroundColor
	});
	pageElements.buttons.forEach(buttonElement => {
		$w(`#${buttonElement.id}`).style.color = darkMode.buttonsColor;
	});
}

function switchToDefault() {
	darkMode.enabled = false;
	local.setItem('darkmodeEnabled', false);
	$w("#swithTooltip").text = "Click to enable dark mode";
	pageElements.textElements.forEach((textElement, index) => {
		$w(`#${textElement.id}`).html = textElement.html.replace(textElement.html, defaultScheme.defaultTextElementsHtml[index])
	});
	pageElements.boxContainers.forEach((boxElement, index) => {
		$w(`#${boxElement.id}`).style.backgroundColor = defaultScheme.boxContainersBackgroundColor[index];
	});
	pageElements.buttons.forEach((buttonElement, index) => {
		$w(`#${buttonElement.id}`).style.color = defaultScheme.buttonsColor[index];
	});
}

 

API

$w.HtmlComponent API

Wix Storage API

 

Corvid by Wix (윅스 코딩 - 콜비드) 개발자 모드/도구 활성화하는 방법

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

 

 

연관된 토픽)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 기프트 선물 퀴즈 만들기 (Gift Quiz) - 윅스 쇼핑몰, 스토어 (Wix Stores)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 기프트 선물 퀴즈 만들기 (Gift Quiz) - 윅스 쇼핑몰, 스토어 (

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

콜비드 - 윅스 코딩 (Corvid - Wix coding)

Dark Mode | Corvid by Wix Examples | Wix.com