ペペロミア & memoir開発ブログ

React Nativeで開発しているペペロミア & memoirの技術系記事を投稿してます

配色ガイドラインに合わせてtheme設定を作る

アプリのthemeの整理のため配色ガイドラインを設けてそれに合わせて実装しました。

配色ガイドライン

https://www.figma.com/file/YYon1ahSQ7W15Mug0LsovHws/%E3%83%9A%E3%83%9A%E3%83%AD%E3%83%9F%E3%82%A2?node-id=2178%3A653

f:id:wheatandcat:20210102125000p:plain

Figmaで画像の配色ガイドラインを設けて、それに合わせて設定していきます

カラー名 役割
primary サービスのメインカラー。サービスを表す箇所で使用
secondary サービスのセカンダリーカラー。サービスを表す箇所で使用
base ベースカラー。テキスト、ボーダーで使用
accent1 アクセントカラー1。ポジティブ側に強調したい時に使用
accent2 アクセントカラー2。ネガティブ側に強調したい時に使用
error エラーカラー。エラー、削除、強めの注意する際に使用
background バックグラウンドカラー。通常の背景色に使用

上記のカラー名にpalelightmaindarkの4段階のレンジを設けて設定をしました。

こちらを元に実装していきます。

アプリ編(React Native)

Pull Request

github.com

github.com

実装

配色ガイドラインに沿ってカラーコードを以下の通り記載

src/config/theme.ts

// 配色ガイドラインのカラー
const baseColor = {
  primary: {
    pale: '#D5EEE2',
    light: '#5DC894',
    main: '#006835',
    dark: '#003119',
  },
  secondary: {
    pale: '#F4FFBE',
    light: '#E6F599',
    main: '#ADCF01',
    dark: '#7F9705',
  },
  base: {
    pale: '#DBDBDB',
    light: '#9D9D9D',
    main: '#4F4F4F',
    dark: '#110f0f',
  },
  accent1: {
    pale: '#E5F0FF',
    light: '#A8C9F5',
    main: '#2F80ED',
    dark: '#034092',
  },
  accent2: {
    pale: '#FFFAEA',
    light: '#FFEDB5',
    main: '#F2C94C',
    dark: '#BE9109',
  },
  error: {
    pale: '#FFEBEB',
    light: '#FFABAB',
    main: '#E15757',
    dark: '#A81A1A',
  },
  background: {
    light: '#FAFAFA',
    main: '#ffffff',
    dark: '#000000',
  },
};

const theme: Theme = {
  light: {
    color: baseColor, // ← カラーを追加
  },

こちらを使用して以下の通りに設定

StyleSheet

設定からカラーコードを指定

import {  StyleSheet } from 'react-native';
import theme from 'config/theme';

const styles = StyleSheet.create({
 title: {
    fontWeight: '600',
    color: theme().color.primary.main,
  },
  description: {
    color: theme().color.base.light,
  }
});

react-native-elementのtheme

ペペロミアではUIライブラリとしてreact-native-elementを使用しているので、こちらのtheme設定にも使用

reactnativeelements.com

containers/Theme.tsx

import { StyleSheet } from 'react-native';
import { ThemeProvider } from 'react-native-elements';
import EStyleSheet from 'react-native-extended-stylesheet';
import theme from 'config/theme';

const styles = StyleSheet.create({
  buttonStyle: {
    borderRadius: 25,
    borderColor: theme().color.secondary.main,
  },
  buttonTitleStyle: {
    color: theme().color.base.pale,
    fontWeight: '600',
  },
  dividerStyle: {
    backgroundColor: theme().color.base.light,
  },
});

const estyles = EStyleSheet.create({
  text: {
    color: '$text',
  },
  listItem: {
    backgroundColor: '$settingMenu',
  },
});

const RNETheme = {
  Button: {
    raised: true,
    buttonStyle: styles.buttonStyle,
    titleStyle: styles.buttonTitleStyle,
  },
  ListItem: {
    containerStyle: estyles.listItem,
  },
  ListItemTitle: {
    style: estyles.text,
  },
  Divider: {
    style: styles.dividerStyle,
  },
  colors: {
    primary: theme().color.primary.main, // colorsのprimaryに設定する各UIのデフォルトカラーの設定を変更可能
  },
};

...略)

   <ThemeProvider theme={RNETheme} useDark={scheme === 'dark'}>
      {props.children}
   </ThemeProvider>

設定すると画像の通りButtonがデフォルトでアプリのカラーが適合されるようになります。

f:id:wheatandcat:20210103124522p:plain

ESLint

また、カラーコードの直書きを禁止するためESLintのreact-native/no-color-literalsをONにしてカラーの直書きをerrorに設定

github.com

これで、もしカラーコードも無視して設定した場合でもLintで検知できるようになります。

$yarn lint

Web編(Vue.js)

Pull Request

github.com

実装

カラーコードの宣言は一箇所に、まとめたかったのでscssファイルに宣言

assets/variables.scss

$primary: (
  pale: #D5EEE2,
  light: #5DC894,
  main: #006835,
  dark: #003119,
);

$secondary: (
  pale: #F4FFBE,
  light: #E6F599,
  main: #ADCF01,
  dark: #7F9705,
);

$base: (
  pale: #DBDBDB,
  light: #9D9D9D,
  main: #4F4F4F,
  dark: #110f0f,
);

$accent1: (
  pale: #E5F0FF,
  light: #A8C9F5,
  main: #2F80ED,
  dark: #034092,
);

$accent2: (
  pale: #FFFAEA,
  light: #FFEDB5,
  main: #F2C94C,
  dark: #BE9109,
);

$error: (
  pale: #FFEBEB,
  light: #FFABAB,
  main: #E15757,
  dark: #A81A1A,
);

$background: (
  light: #FAFAFA,
  main: #ffffff,
  dark: #000000,
);

:export {
  @each $key, $value in $primary {
    primary_#{unquote($key)}: $value;
  }
  @each $key, $value in $secondary {
    secondary_#{unquote($key)}: $value;
  }
  @each $key, $value in $base {
    base_#{unquote($key)}: $value;
  }
  @each $key, $value in $accent1 {
    accent1_#{unquote($key)}: $value;
  }
  @each $key, $value in $accent2 {
    accent2_#{unquote($key)}: $value;
  }
  @each $key, $value in $error {
    error_#{unquote($key)}: $value;
  }
  @each $key, $value in $background {
    background_#{unquote($key)}: $value;
  }
}

styleタグでの使用

カラーコードはsassのmap機能を使用して設定

Sass: Maps

$primary: (
  pale: #D5EEE2,
  light: #5DC894,
  main: #006835,
  dark: #003119,
);

カラーコードを指定は以下の通り

<style lang="scss" scoped>
@import '~/assets/variables.scss';

.title {
   color: map-get($primary, main);
}

.text {
   color: map-get($base, main);
}
</style>

vuetifyjsのテーマ設定

vuetifyjsのテーマにも配色ガイドラインを設定します

vuetifyjs.com

plugins/vuetify.ts

export default {
  customVariables: ['~/assets/variables.scss'],
  theme: {
    themes: {
      dark: {
        primary: theme().primary_main,
        secondary: theme().secondary_main,
        error: theme().error_main,
        themePrimaryPale: theme().primary_pale,
        themePrimaryLight: theme().primary_light,
        themePrimaryMain: theme().primary_main,
        themePrimaryDark: theme().primary_dark,
        themeSecondaryPale: theme().secondary_pale,
        themeSecondaryLight: theme().secondary_light,
        themeSecondaryMain: theme().secondary_main,
        themeSecondaryDark: theme().secondary_dark,
        themeBasePale: theme().base_pale,
        themeBaseLight: theme().base_light,
        themeBaseMain: theme().base_main,
        themeBaseDark: theme().base_dark,
        themeAccent1Pale: theme().accent1_pale,
        themeAccent1Light: theme().accent1_light,
        themeAccent1Main: theme().accent1_main,
        themeAccent1Dark: theme().accent1_dark,
        themeAccent2Pale: theme().accent2_pale,
        themeAccent2Light: theme().accent2_light,
        themeAccent2Main: theme().accent2_main,
        themeAccent2Dark: theme().accent2_dark,
        themeErrorPale: theme().error_pale,
        themeErrorLight: theme().error_light,
        themeErrorMain: theme().error_main,
        themeErrorDark: theme().error_dark,
        themeBackgroundLight: theme().background_light,
        themeBackgroundMain: theme().background_main,
        themeBackgroundDark: theme().background_dark,
      },
      light: {
        primary: theme().primary_main,
        secondary: theme().secondary_main,
        error: theme().error_main,
        themePrimaryPale: theme().primary_pale,
        themePrimaryLight: theme().primary_light,
        themePrimaryMain: theme().primary_main,
        themePrimaryDark: theme().primary_dark,
        themeSecondaryPale: theme().secondary_pale,
        themeSecondaryLight: theme().secondary_light,
        themeSecondaryMain: theme().secondary_main,
        themeSecondaryDark: theme().secondary_dark,
        themeBasePale: theme().base_pale,
        themeBaseLight: theme().base_light,
        themeBaseMain: theme().base_main,
        themeBaseDark: theme().base_dark,
        themeAccent1Pale: theme().accent1_pale,
        themeAccent1Light: theme().accent1_light,
        themeAccent1Main: theme().accent1_main,
        themeAccent1Dark: theme().accent1_dark,
        themeAccent2Pale: theme().accent2_pale,
        themeAccent2Light: theme().accent2_light,
        themeAccent2Main: theme().accent2_main,
        themeAccent2Dark: theme().accent2_dark,
        themeErrorPale: theme().error_pale,
        themeErrorLight: theme().error_light,
        themeErrorMain: theme().error_main,
        themeErrorDark: theme().error_dark,
        themeBackgroundLight: theme().background_light,
        themeBackgroundMain: theme().background_main,
        themeBackgroundDark: theme().background_dark,
      },
    },
  },
}

上記でvuetifyjsのテーマを設定して、以下のように指定します

        <v-btn
          color="primary"
          @click="onSaveItem"
        >
          保存
        </v-btn>

これで画像のとおりにボタンのカラーが設定できました。

f:id:wheatandcat:20210103125116p:plain

まとめ

配色ガイドラインを設けることで色の定義がブレないように修正しました。 これで、無駄なカラーコードが増えるのを防止できるかなと思います。