CODEWITHSUNDEEP
iosnativescriptnativescript-vue
Gabriel S.
Gabriel S.

Reputation: 197

Is there an effective way to change side drawer icon COLOR in NativeScript? (specially iOS)

I was trying to apply a style in ActionBar, changing its background and colors. That's what NativeScript documentation says it should do... But actually when I try to add style to this icon it doesn't get my color.

Also, if I add a title to ActionBar, it inherits my style and is rendered with the color I've chosen.

But it is not happening with the action item!

Here is my file

<template>
    <ActionBar>
        <NavigationButton ios:visibility="collapsed" icon="res://menu" @tap="onDrawerButtonTap" />
        <ActionItem icon="res://menu" 
            android:visibility="collapsed" 
            @tap="onDrawerButtonTap"
            ios.position="left">
        </ActionItem>
        <Image class="logo" src="~/images/logo.png"></Image>  
    </ActionBar>
</template>

<script>
import * as utils from "~/helpers/utils";

export default {
    data(){
        return {

        };
    },

    methods: {
        onDrawerButtonTap() {
            utils.showDrawer();
        },
    }
}
</script>

<style lang="scss" scoped>

    @import '../../_app-variables.scss';

    ActionBar {
        background-color: #c3c3c3;
        color: $primary;
    }

</style>

Is there an effective way to change this sideDrawer button color?

Upvotes: 0

Views: 264

Answers (1)

Manoj
Manoj

Reputation: 21908

Try setting iosIconRenderingMode to alwaysTemplate on the ActionBar, that should turn the icon color to one specified in CSS.

<ActionBar iosIconRenderingMode="alwaysTemplate">

Upvotes: 1

Related Questions