CSS 相關設定

Ionic 佈景主題設定

基本上要更改佈景主題設定,可以更改 src/theme/variables.scss 檔案內的 $colors 對應表。可以在這個表格內增加自己喜歡的顏色(如本例中之 twitter)

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  twitter:    #55acee,
    myTwitter: (
    base: #55acee,
    contrast: #ffffff
  )
);

// 使用
<button ion-button color="twitter">I'm a button</button>
  • 改寫 Ionic Sass 變數
    • src/theme/variables.scss
$text-color: #000099;

$colors(
  ...
)

文字

  • 讓文字內容可以被使用者選取
body {
 -webkit-user-select: auto !important;
.scroll {
    -webkit-user-select: inherit;
  }
}
  • 文字不斷行
text-wrap

tab

  • 更改 tab-bar 背景色
// 在variables.scss $color中增加想要的背景色
<ion-tab color="設定的背景色名稱">

  • 更改個別tab顏色
#tab-t1-0[aria-selected=true] {   // 0 is the number of tab.
     background-color: red;
     color: #000;
}

參考資訊