LitElement 앱의 어두운 테마

13654 단어 csswebdev
LitElement 위에 구성 요소 또는 복잡한 앱을 빌드한다는 것은 자바스크립트로 코딩된 요소에서 CustomElement, Template 및 Shadow DOM의 사용을 염두에 두는 것을 의미합니다. 이 쉬운 게시물에서는 앱 요소, 앱의 자식 요소 및 상위 본문 부모의 밝은 모드와 어두운 모드에서 스타일을 지정하는 데 사용되는 어두운 속성 동기화를 담당하는 MyApp LitElement 구성 요소를 기반으로 하는 간단한 웹 앱 셸을 보여줍니다.

export class MyApp extends LitElement {

  static get properties() {
    return {
      dark: {
        type: Boolean,
        reflect: true
      }
    }
  }

  constructor() {
    super()
    this.dark = false
  }
static get styles() {

    return css`

      /* handle the light / dark mode */ 
      :host:not([dark]) {
        --bk-color: #fff;
        --bk-second-color: #e0e0e0e;
      }
      :host([dark]) {
        --bk-color: #666;
        --bk-second-color: #004c8c;
      }

      :host {
        display: block;
        margin: 2em;
        padding: 2em;
        background-color: var(--bk-color, #fff);
      }

      #container {
        display: block;
        margin: 2em;
        padding: 1em;
        text-align: center;
        background-color: var(--bk-second-color, #e0e0e0);
      }
    `
  }

  _checked(event) {
    this.dark = event.target.checked
  }

  render() {
    return html`
      <div id="container">
        <h1>${this.dark ? 'DARK' : 'LIGHT'} Theme</h1>
        <hr>
        <input type="checkbox" id="dark_label" name="dark" @click="${this._checked}">
        <label for="dark"> Dark Theme</label><br>

        <child-component ?dark="${this.dark}"></child-component>
      </div>
    `
  }

이 코드는 앱 사용자 정의 요소 my-app에 대한 dark 속성을 반영합니다. 이 속성은 부모 본문이 dark 속성을 사용하여 my-app 애플리케이션 셸 외부에 일부 CSS 사용자 정의 변수를 설정해야 하는 경우 index.html에서 처리됩니다.

  <style>

    html {
      /* light and dark custom vars */
      --bk-color: #fff;
      --color: #222;

      --bk-color-dark: #222;
      --color-dark: whitesmoke;
    }

    body:not([dark]) {
      /* custom var and fallback value */ 
      background-color: var(--bk-color, #fff);
      color: var(--color, #222)
    }
    body[dark] {
      /* custom var and fallback value */ 
      background-color: var(--bk-color-dark, #121212);
      color: var(--color-dark, whitesmoke)
    }

    body  {
      margin: 0;
      font-family: Roboto, Helvetica, Arial, sans-serif;
      padding: 2em;
      text-align: center;
    }

  </style>

</head>

<body>

  <!-- LitElement with dark attribute -->
  <my-app></my-app>

  <!-- Import Js Module -->
  <script type="module" src="my-app.js"></script>

  <script>
    // propagate the attribute of app to body 
    const body = document.querySelector('body')
    const app = document.querySelector('my-app')
    const config = { attributes: true, childList: false, subtree: false };
    const callback = (mutationsList, observer) => {
      for(let mutation of mutationsList) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'dark') {
            // console.log(`@DARK >> ${app.hasAttribute('dark')}`)
            app.hasAttribute('dark') ? 
              body.setAttribute('dark', '') :
              body.removeAttribute('dark')
        }
      }
    }

    const observer = new MutationObserver(callback)
    observer.observe(app, config)
  </script>

</body>

어두운 속성은 DOM 트리에서 아래로 내려가서 밝은 테마와 어두운 테마 간의 일부 UI 차이를 트리거하기 위해 dark 속성이 필요한 모든 자식 내부에서 공유됩니다.

export class ChildComponent extends LitElement {

  static get properties() {
    return {
      dark: {
        type: Boolean,
        reflect: true
      }
    }
  }

  static get styles() {
    return css`

    /* handle the light / dark mode */ 
    :host:not([dark]) {
      --bk-color: #eee;
    }
    :host([dark]) {
      --bk-color: #0069c0;
    }

    :host {
      display: block;
    }

    div {
      width: 50%;
      height: 150px;
      margin-right: auto;
      margin-left: auto;
      margin-top: 1em;
      margin-bottom: 1em;
      padding: 2em;
      background-color: var(--bk-color, #fff);
    }
    `
  }

  render() {
    return html`
      <div>
        <h2>Child Component</h2>
      </div>
    `
  }
}

customElements.define('child-component', ChildComponent)

여기 github 저장소가 있습니다! (버그를 찾아주셔서 감사합니다!! )
https://github.com/CICCIOSGAMINO/dark-theme
django 관리 사이트
Shell 학습 14 (tr 명령)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage