React 및 Styled Components로 테마 및 테마 전환

최근 웹 사이트에서 테마 기능을 지원 해야하는 프로젝트를 인수했습니다. 이 응용 프로그램은 주로 일부 관리자가 사용하기 때문에 약간 이상한 요구 사항입니다. 더 놀라운 것은 사전 창조 된 주제들 사이에서뿐만 아니라 자신의 것을 만들고 싶어한다는 것입니다. 나는 사람들이 원하는 것을 원한다고 생각합니다!

이것을보다 자세한 요구 사항 목록으로 증류하고 완료합시다!

• 테마 정의 (예 : 배경색, 글꼴 색상, 버튼, 링크 등).
• 여러 주제를 만들고 저장합니다
• 주제를 선택 하고 적용하십시오
• 스위치 테마
• 맞춤 테마

우리는 제품을 고객의 요구 사항과 정확히 전달했으며 내가 아는 한, 지금은 매우 행복하게 사용하고 있습니다!

이 기능을 구축하기 시작합시다. 우리는 React 및 Styled Components를 사용할 것입니다. 이 기사에 사용 된 모든 소스 코드는 Github 저장소에서 찾을 수 있습니다.

데모 ### 설정을 봅니다

React 및 Styled Components가있는 프로젝트를 설정합시다. 이렇게하려면 Create-React-App을 사용합니다. 반응 응용 프로그램을 신속하게 개발하고 테스트하는 데 필요한 운영 환경을 제공합니다.

명령 프롬프트를 열고 다음 명령으로 프로젝트를 만듭니다.

 <code>npx create-react-app theme-builder</code>

마지막 매개 변수 테마 빌더는 프로젝트 이름 (및 폴더 이름)입니다. 좋아하는 이름을 사용할 수 있습니다.

시간이 걸릴 수 있습니다. 완료되면 CD 테마 빌더를 사용하여 명령 줄에서 이동하십시오. SRC/App.js 파일을 열고 내용을 다음으로 바꾸십시오.

 <code>import React from 'react'; function App() { return (</code> 테마 빌더
  );
}

기본 앱 내보내기;

이것은 곧 수정할 기본 반응 구성 요소입니다. 프로젝트 루트 폴더에서 응용 프로그램을 시작하십시오.

 <code># 或npm run start yarn start</code>

이제 URL https://www.php.cn/link/cc685cba3900c73c40533b18e15b66e5 를 사용할 수 있습니다.

Create-React-App에는 앱 구성 요소에 대한 테스트 파일이 제공됩니다. 이 기사에서 구성 요소에 대한 테스트를 작성하지 않으므로 파일을 삭제하는 옵션이 있습니다.

응용 프로그램에 대한 의존성을 설치해야합니다. 그건 그렇고 설치하겠습니다.

 <code># 或npm i ... yarn add styled-components webfontloader lodash</code>

다음은 다음과 같습니다.

• 스타일링 컴포넌트 : CSS를 사용하여 구성 요소를 스타일링하는 유연한 방법. 이름을 사용하여 상자 외부 테마 지원을 제공합니다<themeprovider></themeprovider> 래퍼 구성 요소. 이 구성 요소는 그 안에 포장 된 다른 모든 React 구성 요소에 테마를 제공하는 책임이 있습니다. 우리는 곧 실제 응용 프로그램을 볼 것입니다.
• 웹 글꼴 로더 : 웹 글꼴 로더는 Google 글꼴, Adobe Fonts 등과 같은 다양한 소스의 글꼴을로드하는 데 도움이됩니다.이 라이브러리를 사용하여 테마를 적용 할 때 글꼴을로드합니다.
• Lodash : 이것은 편리한 가제트를 제공하는 JavaScript 유틸리티 라이브러리입니다.

주제를 정의하십시오

이것이 우리의 첫 번째 요구 사항입니다. 테마에는 색상, 글꼴 등을 포함한 모양을 정의하기위한 특정 구조가 있어야합니다. 응용 프로그램의 경우 다음 속성을 사용하여 각 주제를 정의합니다.

• 고유 식별자
• 주제 이름
• 색상 정의
• 세례반

당신은 더 많은 속성 및/또는 다른 구조를 가질 수 있지만, 우리가 예를 들어 우리가 사용할 것입니다.

여러 주제를 만들고 저장합니다

그래서 우리는 주제를 정의하는 방법을 보았습니다. 이제 프로젝트에서 src/테마 폴더와 schema.json이라는 파일을 추가하여 여러 테마를 만들어 봅시다. 다음은이 파일에 넣을 수있는 것입니다. "Light"및 "Wave"테마를 만들 수 있습니다.

 <code>{ "data" : { "light" : { "id": "T_001", "name": "浅色", "colors": { "body": "#FFFFFF", "text": "#000000", "button": { "text": "#FFFFFF", "background": "#000000" }, "link": { "text": "teal", "opacity": 1 } }, "font": "Tinos" }, "seaWave" : { "id": "T_007", "name": "海浪", "colors": { "body": "#9be7ff", "text": "#0d47a1", "button": { "text": "#ffffff", "background": "#0d47a1" }, "link": { "text": "#0d47a1", "opacity": 0.8 } }, "font": "Ubuntu" } } }</code>

schema.json 파일의 내용은 데이터베이스에 저장되어 모든 주제와 주제 선택을 지속 할 수 있습니다. 현재 브라우저의 로컬 스토리지에 저장하면됩니다. 이렇게하려면 src/utils에서 Storage.js라는 새 파일을 만들 것입니다. LocalStorage를 설정하려면 몇 줄의 코드 만 있으면됩니다.

 <code>export const setToLS = (key, value) => { window.localStorage.setItem(key, JSON.stringify(value)); } export const getFromLS = key => { const value = window.localStorage.getItem(key); if (value) { return JSON.parse(value); } }</code>

이들은 데이터를 저장하고 브라우저의 로컬 스토리지에서 데이터를 검색하기위한 간단한 유틸리티 기능입니다. 이제 앱을 처음 시작할 때 주제를 브라우저의 로컬 스토리지에로드합니다. 이렇게하려면 index.js 파일을 열고 내용을 다음으로 바꾸십시오.

 <code>import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import * as themes from './theme/schema.json'; import { setToLS } from './utils/storage'; const Index = () => { setToLS('all-themes', themes.default); return(<app></app> ) } ReactDOM.render(<index></index> , document.getElementById('root'), );</code>

여기서 우리는 schema.json 파일에서 주제 정보를 얻고 주요 모든 주제를 사용하여 LocalStorage에 추가합니다. 응용 프로그램 실행을 중단 한 경우 응용 프로그램을 다시 시작하여 UI에 액세스하십시오. 브라우저에서 DevTools를 사용하여 주제가 LocalStorage에로드되었는지 확인할 수 있습니다.

주제를 선택하고 적용하십시오

이제 테마 구조를 사용하고 테마 개체를 제공 할 수 있습니다.<themeprovider></themeprovider> 싸개.

먼저 사용자 정의 반응 후크를 생성합니다. 선택한 주제를 관리하여 주제가 올바르게로드되었는지 또는 문제가 있는지 확인합니다. SRC/테마 폴더의 usetheme.js라는 새 파일로 시작하겠습니다. 여기에는 다음이 포함되어 있습니다.

 'react'에서 {useeffect, usestate} import;
'../utils/storage'에서 {settols, getfromls};
'lodash'에서 _ 가져 오기;

내보내기 const usetheme = () => {
  const Themes = getfromls ( 'All-Themes');
  const [테마, setTheme] = usestate (eswes.data.light);
  const [temeloaded, setTheMeloaded] = usestate (false);

  const setMode = mode => {
    Settols ( '테마', 모드)
    setTheme (모드);
  };

  const getfonts = () => {
    const allfonts = _.values ​​(_. mapValues ​​(eswes.data, 'font'));
    반환 allfonts;
  }

  useeffect (() => {
    const localtheme = getfromls ( '테마');
    Localtheme? setTheme (LocalTheme) : setTheme (wemes.data.light);
    setTheMeloaded (true);
  }, []);

  return {테마, 테마로드, setMode, getFonts};
};

이 Custom React Hook는 선택한 주제를 LocalStorage와 부울 값을 반환하여 주제가 스토리지에서 올바르게로드되었는지 여부를 나타냅니다. 또한 프로그래밍 방식으로 테마를 적용하기위한 함수 setMode를 노출시킵니다. 나중에 이것으로 돌아갈 것입니다. 이를 통해 우리는 나중에 WebFontloader를 사용하여로드 할 수있는 글꼴 목록을 얻을 수 있습니다.

글로벌 스타일을 사용하여 웹 사이트의 배경색, 글꼴, 버튼 등을 제어하는 ​​것이 좋습니다. Styled-Components는 CreateGlobalstyle이라는 구성 요소를 제공하여 주제 인식 인 글로벌 구성 요소를 설정합니다. 다음 코드와 함께 SRC/테마 폴더에서 GlobalStyles.js라는 파일을 만들어 봅시다.

 "Styled-Components"에서 {createglobalstyle} 가져 오기;

Const GlobalStyles = CreateGlobalstyle`을 내보내십시오
  몸 {
    배경 : $ {({테마}) => 테마 .colors.body};
    색상 : $ {({테마}) => 테마 .colors.text};
    Font-Family : $ {({temeply}) => 테마 .font};
    전환 : 모든 0.50 년대 선형;
  }

  A {
    색상 : $ {({테마}) => 테마 .colors.link.text};
    커서 : 포인터;
  }

  버튼 {
    국경 : 0;
    디스플레이 : 인라인 블록;
    패딩 : 12px 24px;
    글꼴 크기 : 14px;
    Border-Radius : 4px;
    마진-탑 : 5px;
    커서 : 포인터;
    배경색 : #1064EA;
    색상 : #fffff;
    Font-Family : $ {({temeply}) => 테마 .font};
  }

  button.btn {
    배경색 : $ {({테마}) => 테마 .colors.button.background};
    색상 : $ {({테마}) => 테마 .colors.button.text};
  }
`;;

그냥 일부 CSS, 링크 및 버튼이 있습니까? app.js 파일에 이들을 사용하여 컨텐츠를 다음과 같이 대체하여 테마의 실제 효과를 볼 수 있습니다.

 // 1 : import import react, {usestate, useeffect} 'react';
"Styled-Components"에서 수입 스타일, {Themeprovider};
'WebFontLoader'에서 WebFont 가져 오기;
'./theme/globalstyles'에서 {globalstyles} 가져 오기;
'./theme/usetheme'에서 {usetheme} 가져 오기;

// 2 : 컨테이너 const 컨테이너를 만듭니다 = Styled.div`
  마진 : 5px 자동 5px 자동;
`;;

기능 앱 () {
  // 3 : 선택된 주제, 글꼴 목록 등을 가져옵니다.
  const {테마, themeloaded, getfonts} = usetheme ();
  const [selectedTheme, setSelectedTheme] = usestate (테마);

  useeffect (() => {
    setSelectedTheme (테마);
   }, [themeloaded]);

  // 4 : 모든 글꼴을로드 useeffect (() => {
    webfont.load ({
      Google: {
        가족 : getfonts ()
      }
    });
  });

  // 5 : 테마가로드되면 렌더링합니다.
  반품 (
    <themeprovider theme="{selectedTheme}">
      <globalstyles></globalstyles>
      <container>
        <h1 id="테마-빌더">테마 빌더</h1>
        <p>
          테마 스위처 및 테마 빌더가있는 테마 시스템입니다.
          소스 코드를보고 싶습니까? <a href="https://www.php.cn/link/e5a419ed77a4e034849e1e1b68ba015e" target="_blank">여기를 클릭하십시오.</a>
        </p>
      </container>
    </themeprovider>
  );
}

기본 앱 내보내기;

여기서 무슨 일이 일어났습니다 :

1. 우리는 usestate 및 useeffect 반응 후크를 가져 오므로 부작용으로 인한 상태 변수와 변경 사항을 추적하는 데 도움이됩니다. 우리는 Themeprovider를 수입하고 스타일의 구성 요소에서 스타일링됩니다. WebFont는 또한 글꼴을로드하기 위해 가져옵니다. 또한 사용자 정의 테마 USETHEME 및 Global Style 구성 요소 GlobalStyles를 가져옵니다.
2. CSS 스타일과 스타일 구성 요소를 사용하여 컨테이너 구성 요소를 만듭니다 .
3. 우리는 상태 변수를 선언 하고 변화에주의를 기울입니다.
4. 응용 프로그램에 필요한 모든 글꼴을로드합니다 .
5. 우리는 많은 텍스트와 링크를 렌더링합니다. 그러나 선택한 주제를 소품으로 사용합니다.<themeprovider></themeprovider> 래퍼는 전체 컨텐츠를 감습니다. 우리는 또한 지나갔습니다<globalstyles></globalstyles> 구성 요소.

앱을 새로 고치면 기본 "Light Color"테마가 활성화되어 있어야합니다.

스위칭 테마가 작동하는지 확인해야합니다. usetheme.js 파일을 열고이 줄을 변경합시다.

 Localtheme? setTheme (LocalTheme) : setTheme (wemes.data.light);

……도착하다:

 Localtheme? setTheme (LocalTheme) : setTheme (eswes.data.seawave);

"Waves"테마의 실제 효과를 볼 수 있기를 바랍니다.

스위치 테마

매우 좋은! 주제를 올바르게 적용 할 수 있습니다. 그렇다면 단 하나의 버튼만으로 테마를 전환하는 것은 어떻습니까? 물론 우리는 그것을 할 수 있습니다! 우리는 또한 일종의 테마 미리보기를 제공 할 수 있습니다.

이 상자들 각각을 테마로 부르고 주제 정의를 소품으로 가질 수있는 방식으로 설정합시다. 우리는 모든 테마를 반복하고, 그것들을 통과하고, 각 테마를 메카 카드 구성 요소로 채 웁니다.

 {
  테마. 길이> 0 && 
  테마 .map (테마 => (
    <themecard key="{theme.id}" theme="{theme}"></themecard>
  )))
}

이제 Themecard의 마크로 돌아 갑시다. 마크 업은 다르게 보일 수 있지만 자신의 색상 및 글꼴 특성을 추출 한 다음 적용하는 방법에 유의하십시오.

 const themecard = props => {
  반품(
    <wrapper style="{{backgroundColor:" fontfamily:>
      이 주제를 설정하려면 버튼을 클릭하십시오<themebutton onclick="{()"> 테마 전환기 (props.theme)}
        style = {{backgroundColor :`$ {propss.theme.colors.button.background}`, 색상 :`$ {propss.theme.colors.button.text}`, fontFamily : '$ {props.theme.font}}}>
        {props.theme.name}
      </themebutton>
    </wrapper>
  ))
}

다음으로 SRC 폴더에서 Themeselector.js라는 파일을 만들어 봅시다. 여기에 컨텐츠를 복사하여 파일에 넣으려면 테마 스위처를 작성하려면 App.js에서 가져와야합니다.

 './themeselector'에서 테마 수입자;

이제 컨테이너 구성 요소에서 사용할 수 있습니다.

<container>
  {/* 이전과 동일*/}
  <themeselector setselectedtheme="{setMode}" themes="{themes.data}"></themeselector>
</container>

이제 브라우저를 새로 고치고 테마 전환이 어떻게 작동하는지 살펴 보겠습니다.

흥미롭게도 Schema.json 파일에서 원하는만큼 테마를 추가하여 UI 및 스위치에로드 할 수 있습니다. 더 많은 주제는이 schema.json 파일을 확인하십시오. 또한 응용 프로그램의 테마 정보를 LocalStorage에 저장하므로 다음에 응용 프로그램을 다시 열면 선택이 유지됩니다.

맞춤 테마

사용자는 한 주제의 특정 측면과 다른 주제의 특정 측면을 좋아할 수 있습니다. 주제 속성을 정의 할 수있는 능력을 줄 수있을 때 둘 중에서 선택하게하는 이유는 무엇입니까! 사용자가 원하는 디스플레이 옵션을 선택하고 환경 설정을 저장할 수있는 간단한 사용자 인터페이스를 만들 수 있습니다.

우리는 주제 생성 코드의 설명에 대한 자세한 내용을 보지 못하지만 Github Repo의 코드를 따르면 쉬워야합니다. 기본 소스 파일은 app.js에서 사용하는 CreateEthemeContent.js입니다. 각 입력 요소 변경 이벤트의 값을 수집하여 새 테마 객체를 생성하고 해당 객체를 테마 개체 컬렉션에 추가합니다. 그게 다야.

우리가 끝나기 전에 ...

읽어 주셔서 감사합니다! 우리가 여기서 다룬 내용이 당신이하고있는 일에 유용한 것을 찾기를 바랍니다. 테마 시스템은 매우 흥미 롭습니다! 실제로 CSS 사용자 정의 속성으로 인해 점점 더 많은 일이 벌어지고 있습니다. 예를 들어, Dieter Raber와 Chris 의이 리뷰에 의한이 색상 접근 방식을 확인하십시오. Michelle Barker 의이 설정은 또한 Tailwind CSS와 함께 사용되는 사용자 정의 속성에 의존합니다. 이것은 Andrés Galente의 또 다른 방법입니다.

이 모든 것이 테마를 만드는 훌륭한 예이며,이 기사가 속성을 저장하고 테마간에 쉽게 전환하고 사용자가 테마를 사용자 정의하고 이러한 환경 설정을 저장 함으로써이 개념을 다음 단계로 끌어 올릴 수 있기를 바랍니다.

저희에게 연락합시다! 트위터에서 DM을 통해 댓글을 보내거나 마음대로 나를 팔로우 할 수 있습니다.

위 내용은 React 및 Styled Components로 테마 및 테마 전환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!