कस्टम रंग

Question

के साथ आयनिक शीर्षलेख ओवरराइड करें क्या आयनिक के साथ शीर्षलेख के रंग को अनुकूलित करना संभव है? कस्टम द्वारा, मेरा मतलब है कस्टम रंग का उपयोग करना और bar-something में से एक को परिभाषित नहीं किया गया है। मैं इस की कोशिश की है, लेकिन यह

<ion-nav-bar class="bar-positive custom-dark"> 
</ion-nav-bar> 

और सीएसएस में काम करने के लिए प्रतीत नहीं होता:

.custom-dark{ 
color : #30393A; 
} 

Here is a codePen

मैं नीले रंग बदलने के लिए सक्षम होने के लिए नहीं है रंग।

Answer 1

एक आसान ठीक उपयोग करने के लिए है: ..

.custom-dark{ 
    color : #30393A !important; // text 
    background-color:blue!important; // for bg color 
} 

यह वर्तमान सीएसएस सेट overide जाएगा

मुझे लगता है कि इसकी अधिक अपने आसान के रूप में HTML के अंदर से शैली पत्रक में जोड़ने के लिए, उचित विकास, संशोधन और अनावश्यक bloating

Answer 2

आप एसएएसएस के साथ ऐसा कर सकते हैं। आप पहले से ही टर्मिनल

$ ionic setup sass 

में टाइप नहीं किया है फिर आप एससीएसएस/निर्देशिका के अंदर ओवरराइड उपयोग कर सकते हैं।

$light:       #fff !default; 
$stable:       #f8f8f8 !default; 
$positive:      #387ef5 !default; 
$calm:       #11c1f3 !default; 
$balanced:      #33cd5f !default; 
$energized:      #ffc900 !default; 
$assertive:      #ef473a !default; 
$royal:       #886aea !default; 
$dark:       #444 !default; 

मैं अत्यधिक आयोनिक के लिए एक सीएसएस पूर्व प्रोसेसर का उपयोग की सलाह देते हैं, वे आप के लिए चर में सब कुछ के साथ एक महान lib है।

Answer 3

आप पहली बार आयनिक सेटअप सास जवाब में बताया गया के रूप में चलाने, आप खोज और चर आप फ़ाइल _variables.css पर ओवरराइड चाहते पहचान करने के लिए जरूरत है और उन्हें आप ionic.app.scss में स्थान पर आ जाएगी के बाद से ।

बार-स्थिर रंग मैं _variable.scss में मिल रहा है के लिए:

$bar-stable-text: $button-stable-text !default; 

और ओवरराइड ionic.app.scss में साथ:

$bar-stable-text:     #FFFFFF !default; 

यह काम करता है।

Answer 4

.title.title-center.header-item { 
     background-color:#F38023!important; // for bg color 
     margin:0px!important; 
     margin-left:0px!important; 
     color: #ffffff!important; 
     width: 100%; 
    } 

Answer 5

अवहेलना विषयों में इस आयोनिक सास चर/variables.scss/www/सीएसएस निर्देशिका के तहत अपने style.css में इन पंक्ति जोड़ें

$toolbar-background:#FFFFFF;

You can find other Ionic Sass Variable list here:

Answer 6

हे थीम/variables.scss

$toolbar-title: #fff;