Vue-material: ํ…Œ๋งˆ ๋ฌธ์ œ(๋ฒ„์ „ 0.5.1) - ๋ฐฐ๊ฒฝ์ด ํšŒ์ƒ‰์œผ๋กœ ์ž‘๋™ํ•˜์ง€ ์•Š์Œ

์— ๋งŒ๋“  2016๋…„ 12์›” 19์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: vuematerial/vue-material

๋ฐฐ๊ฒฝ์ด ์žˆ๋Š” ํ…Œ๋งˆ๋ฅผ 'ํšŒ์ƒ‰'์œผ๋กœ ๋“ฑ๋กํ•ด๋„ ํšจ๊ณผ๊ฐ€ ์—†๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
CSS ๋ณธ๋ฌธ์„ ๋ณด๋ฉด ์—ฌ์ „ํžˆ #fff๋กœ ์„ค์ •๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹ค๋ฅธ ์ƒ‰์ƒ์„ ์‹œ๋„ํ–ˆ๋Š”๋ฐ ์›ํ•˜๋Š” ํšจ๊ณผ๋ฅผ ์–ป์—ˆ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ ํšŒ์ƒ‰๊ณผ ๊ด€๋ จ๋œ ๋ฌธ์ œ๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

improvement

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๊ธฐ๋ณธ๊ฐ’์œผ๋กœ A100 ์‚ฌ์šฉ

๋‚ด๊ฐ€ ์›ํ•˜๋Š”๋Œ€๋กœ ์ƒ‰์กฐ๋ฅผ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๋‚˜๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋ ค๊ณ  ์‹œ๋„ํ–ˆ๋‹ค.

Vue.material.registerTheme({
  default: {
    background: {
      color: 'grey',
      hue: 300
     }
  }
});

ํ•˜์ง€๋งŒ ๋ฐฐ๊ฒฝ์„ #E0E0E0(gery with hue=300) ๋กœ ์„ค์ •ํ•˜์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค. ์ƒ‰์กฐ๊ฐ€ 'A100' ๋กœ ๊ณ ์ •๋˜์–ด ์žˆ๊ณ  background.hue ์ด ์˜ํ–ฅ์„ ๋ฏธ์น˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

์•ˆ๋…•ํ•˜์„ธ์š” @bjarnik
์•„๋‹ˆ์š”. ๊ธฐ๋ณธ๊ฐ’์€ ํšŒ์ƒ‰์ด๋ฉฐ ๊ธฐ๋ณธ๊ฐ’์€ A100์ž…๋‹ˆ๋‹ค. ์ด๊ฒƒ์„ ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ ํฐ์ƒ‰์œผ๋กœ ๋ณ€๊ฒฝํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.
๊ฐ์‚ฌ ํ•ด์š”!

๊ธฐ๋ณธ๊ฐ’์œผ๋กœ A100 ์‚ฌ์šฉ

๋‚ด๊ฐ€ ์›ํ•˜๋Š”๋Œ€๋กœ ์ƒ‰์กฐ๋ฅผ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๋‚˜๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋ ค๊ณ  ์‹œ๋„ํ–ˆ๋‹ค.

Vue.material.registerTheme({
  default: {
    background: {
      color: 'grey',
      hue: 300
     }
  }
});

ํ•˜์ง€๋งŒ ๋ฐฐ๊ฒฝ์„ #E0E0E0(gery with hue=300) ๋กœ ์„ค์ •ํ•˜์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค. ์ƒ‰์กฐ๊ฐ€ 'A100' ๋กœ ๊ณ ์ •๋˜์–ด ์žˆ๊ณ  background.hue ์ด ์˜ํ–ฅ์„ ๋ฏธ์น˜์ง€ ์•Š๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”, "์–ด๋‘์šด" ํ…Œ๋งˆ๋ฅผ ์„ค์ •ํ•˜๋ ค๊ณ  ํ•  ๋•Œ ๋™์ผํ•œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  ๋ฐฐ๊ฒฝ์ด ์„ ํƒํ•œ ์ƒ‰์ƒ์˜ ๋งค์šฐ ๋ฐ์€ ์ƒ‰์กฐ๋กœ ๋‚˜ํƒ€๋‚˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ด๋ฉฐ '์ƒ‰์กฐ'๋ฅผ ์„ค์ •ํ•ด๋„ ์•„๋ฌด ๊ฒƒ๋„ ๋ณ€๊ฒฝ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰