Bulma와 함께 Nuxt 컬러 모드를 적용하는 방법 안내

15382 단어 vue

소개



@nuxtjs/color-mode은 Nuxt.js 앱에서 다크 모드 토글을 훨씬 쉽게 구현하는 데 도움이 되는 Nuxt.js 모듈입니다.

Bulma를 사용하는 경우 활용@nuxtjs/color-mode할 수 있는 방법 중 하나입니다.

Bulma와 같은 CSS 프레임워크를 사용하는 경우 이 가이드에 설명된 대로 Bulma의 변수.scss를 재정의해야 합니다.

여기에서 소스 코드를 볼 수 있습니다!
https://github.com/kensixx/nuxt-color-mode-with-bulma



설정



종속성 설치


node-sass 및 sass-loader를 아직 설치하지 않은 경우 설치하여 .scss 파일을 올바르게 사용할 수 있습니다.

npm i -D node-sass sass-loader


우리를 위해 전환을 처리할 devDependencies 을 설치합니다:(동일한 이유로 @nuxtjs/color-mode에서도)

npm i -D @nuxtjs/color-mode


설치:
  • devDependencies - Nuxt에서 전역적으로 @nuxtjs/style-resources 파일을 사용할 수 있습니다. 모든 스타일 파일에서 변수, 혼합, 함수 공유(필요 없음.scss)
  • Bulma - 맞춤형@import 파일
    • 에서 Bulmascss 변수를 가져오고 사용하고 재정의할 수 있습니다.
  • .scss - 나중에 SVG 아이콘을 사용하여 다크 모드를 전환하기 위해 SVG 아이콘을 로드하고 Vue 구성 요소로 사용할 수 있습니다.

    • npm i @nuxtjs/style-resources bulma nuxt-svg-loader


    nuxt.config.js



    아직 제거하지 않은 경우 nuxt-svg-loader를 제거하십시오. 앞으로 우리는 이전에 @nuxtjs/bulma 만든 Bulma .scss를 사용할 것입니다.

    귀하의 npm install에 다음을 포함하십시오.

    modules: [
    // Doc: https://github.com/nuxt-community/style-resources-module/
    // Used with styleResources{}
    '@nuxtjs/style-resources',
    // Doc: https://github.com/Developmint/nuxt-svg-loader
    // So we can load SVG icons as Vue components
    'nuxt-svg-loader'
]

    modules[]에 @nuxtjs/color-mode 포함:

    buildModules: [
    // Doc: https://color-mode.nuxtjs.org/
    '@nuxtjs/color-mode'
]


    이것을 buildModules[] 에 추가하고 다음과 같이 새 css[]도 추가합니다. 나중에 styleResources{} 파일을 아래에서 설정합니다.

      /*
   ** Global CSS
   */
  css: ['~assets/scss/main.scss'],
  /*
   ** So we can use our .scss file globally in the Nuxt app
   */
  styleResources: {
    scss: ['~assets/scss/main.scss']
  }


    토글 스위치에 밝고 어두운 아이콘 추가



    이와 같이 assets/scss/main.scss 안에 icons 디렉토리를 만들고 assets 아이콘을 추가합니다. 아이콘은 여기에서 다운로드할 수 있습니다: https://github.com/nuxt-community/color-mode-module/tree/master/example/assets/icons

    .svg 구성



    이것은 이 안내서인 main.scss 파일의 빵과 버터가 되어야 합니다. 이것이 당사scss의 내용입니다.

    /* Theme style (colors & sizes) */
@import "~bulma/sass/utilities/initial-variables";
@import "theme-default";

/* Core Libs & Lib configs */
@import "~bulma";

/* Mixins */
@import "mixins";

/* Theme components */
@import "nav-bar";
@import "title-bar";
@import "hero-bar";
@import "card";
@import "table";
@import "tiles";
@import "form";
@import "main-section";
@import "modal";
@import "progress";
@import "footer";
@import "misc";

/* For our dark mode scss implementation */
@import "dark-mode";


    여기서 우리가 한 일은 다음과 같습니다.
  • 수입assets/scss/main.scss 먼저,
  • 그런 다음 어두운 모드 색상 및 밝은 모드 기본 색상/CSS 구성 요소를 구성하는 데 도움이 되는 사용자 정의bulma/sass/utilities/initial-variables 설정에서 일부 Bulma 변수를 재정의합니다
    • .
  • theme-default.scss를 사용하여 나머지 Bulma를 가져옵니다.
  • Navbar 등과 같은 일부 구성 요소 재정의
  • 마지막으로 켜져 있을 때 Bulma 구성 요소의 어두운 모드 구현

    • 다음은 다른 지원 .scss 파일을 넣는 것입니다. 여기에서 얻을 수 있습니다: https://github.com/kensixx/nuxt-color-mode-with-bulma/tree/main/assets/scss

    [admin-null-nuxt**]( https://github.com/justboil/admin-null-nuxt ) Nuxt.js 템플릿(무료 버전)에서 이 .scss 파일을 빌렸습니다.**
    이제 ~bulma 파일이 끝났습니다! 다음에 필요한 것은 어둡고 밝은 모드의 실제 토글 동작입니다.

    밝음/어두움 토글 스위치 역할을 할 Vue 구성 요소 만들기


    .scss를 생성하고 아래 코드 구현을 따릅니다.

    <template>
  <button class="button is-info is-block" @click="toggleDarkMode()">
    <ColorScheme placeholder="..." tag="span">
      <span v-if="$colorMode.value === 'dark'">
        <IconDark />
      </span>
      <span v-else>
        <IconLight />
      </span>
    </ColorScheme>
  </button>
</template>

<script>
import IconLight from '~/assets/icons/light.svg'
import IconDark from '~/assets/icons/dark.svg'

export default {
  components: {
    IconLight,
    IconDark
  },

  methods: {
    toggleDarkMode() {
      if (this.$colorMode.preference !== 'dark') {
        this.$colorMode.preference = 'dark'
      } else {
        this.$colorMode.preference = 'light'
      }
    }
  }
}
</script>


    이는 밝은 모드를 사용할지 어두운 모드를 사용할지 여부를 전환components/ColorModePicker.vue하는 데 도움이 되는 간단한 버튼 구성 요소입니다. 원하는 대로 변경할 수 있습니다.
    @nuxtjs/color-mode 는 this.$colorMode.preference 로 설정된 경우 Nuxt 프로젝트 전체dark-mode에 <html></html> 클래스를 주입하는 것입니다.
    그런 다음 dark 파일에서 설정한 내용에 따라 Bulma 구성 요소를 변경하도록 dark-mode.scss를 트리거합니다.

    dark-mode.scss 구성 요소 사용



    그게 다인 것 같아! 이제 코드의 어느 위치에나 ColorModePicker.vue 구성 요소를 포함할 수 있습니다. 브랜드 로고 옆에 있는 Navbar에 다음과 같이 넣었습니다.

    <template>
  <nav class="navbar">
    <div class="container">
      <div class="navbar-brand">
        <nuxt-link class="navbar-item is-hoverable" to="/">
          Nuxt Color Mode With Bulma
        </nuxt-link>
        <button class="button navbar-burger">
          <span></span>
          <span></span>
          <span></span>
        </button>
        <div id="navbarBasicExample" class="navbar-menu">
          <div class="navbar-start">
            <a class="navbar-item">
              <ColorModePicker />
            </a>
          </div>
        </div>
      </div>
    </div>
  </nav>
</template>


    참고: 다음과 같이 이 구성 요소를 가져오는 것을 잊지 마십시오.

    <script>
import ColorModePicker from '~/components/ColorModePicker'

export default {
  components: {
    ColorModePicker
  }
}
</script>
    python3 사전 목록 혼합 삽입
    C#HttpWebRequest, HttpWebResponse 아날로그 브라우저를 사용하여 웹 내용을 캡처하는 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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