# How can use a custom theme for my application

**URL:** <https://forum.ionicframework.com/t/how-can-use-a-custom-theme-for-my-application/114719>\
**Category:** ionic-v3\
**Created:** [December 7, 2017, 8:40pm UTC](https://forum.ionicframework.com/t/how-can-use-a-custom-theme-for-my-application/114719 "2017-12-07T20:40:44Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![umutgur](https://avatars.discourse-cdn.com/v4/letter/u/22d042/32.png) [@umutgur](https://forum.ionicframework.com/u/umutgur)\
**Post date:** [December 7, 2017, 8:40pm UTC](https://forum.ionicframework.com/t/how-can-use-a-custom-theme-for-my-application/114719/1 "2017-12-07T20:40:44Z")

</div>

Hi there,

I bought an ionic theme, its name is Musicana. But how can use that? I tried copy all files to www directory, but when I start app again src files override my template.

Thanks for your hepls.

Here is the files include in theme’s folder

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/3/2/32c31c9eb85b380685ff973e39a7016af390e425.png)

---

<div class="post-metadata">

**Author:** ![ChrisGriiffith](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/chrisgriiffith/32/66576_2.png) [@ChrisGriiffith](https://forum.ionicframework.com/u/ChrisGriiffith)\
**Post date:** [December 7, 2017, 9:11pm UTC](https://forum.ionicframework.com/t/how-can-use-a-custom-theme-for-my-application/114719/2 "2017-12-07T21:11:17Z")

</div>

Contact your seller. All items in the www folder are overwritten with each new build (ie ionic serve).

It varies if you are developing Ionic 1 or new Ionic as to the files locations.

---

<div class="post-metadata">

**Author:** ![umutgur](https://avatars.discourse-cdn.com/v4/letter/u/22d042/32.png) [@umutgur](https://forum.ionicframework.com/u/umutgur)\
**Post date:** [December 7, 2017, 9:14pm UTC](https://forum.ionicframework.com/t/how-can-use-a-custom-theme-for-my-application/114719/3 "2017-12-07T21:14:59Z")

</div>

Thanks for your answer. I sent an email to seller. I am developing on Ionic 2, theme just includes www files, there is no files like src files.

Can just seller help me?

---

<div class="post-metadata">

**Author:** ![robinyo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/robinyo/32/115964_2.png) [@robinyo](https://forum.ionicframework.com/u/robinyo)\
**Post date:** [December 7, 2017, 9:44pm UTC](https://forum.ionicframework.com/t/how-can-use-a-custom-theme-for-my-application/114719/4 "2017-12-07T21:44:20Z")

</div>

See: [https://robferguson.org/blog/2017/11/12/theming-your-ionic-3-app/](https://robferguson.org/blog/2017/11/12/theming-your-ionic-3-app/)

---

<div class="post-metadata">

**Author:** ![umutgur](https://avatars.discourse-cdn.com/v4/letter/u/22d042/32.png) [@umutgur](https://forum.ionicframework.com/u/umutgur)\
**Post date:** [December 7, 2017, 9:47pm UTC](https://forum.ionicframework.com/t/how-can-use-a-custom-theme-for-my-application/114719/5 "2017-12-07T21:47:42Z")

</div>

Hi, thanks for your answer. I can theming an app, but I need use a purchased theme. That has no elements like src items, just have html, css and angular files like www directory’s files.

---

<div class="post-metadata">

**Author:** ![robinyo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/robinyo/32/115964_2.png) [@robinyo](https://forum.ionicframework.com/u/robinyo)\
**Post date:** [December 7, 2017, 10:11pm UTC](https://forum.ionicframework.com/t/how-can-use-a-custom-theme-for-my-application/114719/6 "2017-12-07T22:11:38Z")

</div>

If its a theme then it should have some `.scss` files?

If it has `.css` files see: [https://ionicacademy.com/ionic-include-css-files-from-npm/](https://ionicacademy.com/ionic-include-css-files-from-npm/)

---

<div class="post-metadata">

**Author:** ![umutgur](https://avatars.discourse-cdn.com/v4/letter/u/22d042/32.png) [@umutgur](https://forum.ionicframework.com/u/umutgur)\
**Post date:** [December 7, 2017, 10:22pm UTC](https://forum.ionicframework.com/t/how-can-use-a-custom-theme-for-my-application/114719/7 "2017-12-07T22:22:07Z")

</div>

I inserted a capture from theme’s directory by edit question. You can look, I’m afraid it’s only an html design… But thanks for your answer.

edit: I forgot to say I looked link, it doesn’t see to help me. I think I can’t compile all files with a config.json 😕 but if you think “yes you can” I am glad to hear your ideas

---

<div class="post-metadata">

**Author:** ![robinyo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/robinyo/32/115964_2.png) [@robinyo](https://forum.ionicframework.com/u/robinyo)\
**Post date:** [December 7, 2017, 10:40pm UTC](https://forum.ionicframework.com/t/how-can-use-a-custom-theme-for-my-application/114719/8 "2017-12-07T22:40:04Z")

</div>

What’s in the /lib/ionic/scss folder?

```auto
 - lib
   - ionic
      - scss

```

---

<div class="post-metadata">

**Author:** ![umutgur](https://avatars.discourse-cdn.com/v4/letter/u/22d042/32.png) [@umutgur](https://forum.ionicframework.com/u/umutgur)\
**Post date:** [December 7, 2017, 10:43pm UTC](https://forum.ionicframework.com/t/how-can-use-a-custom-theme-for-my-application/114719/9 "2017-12-07T22:43:57Z")

</div>

Here is the capture

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/f/6/f65587e60f170b275f49e6af9e1479eafbed1679.png)

---

<div class="post-metadata">

**Author:** ![robinyo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/robinyo/32/115964_2.png) [@robinyo](https://forum.ionicframework.com/u/robinyo)\
**Post date:** [December 7, 2017, 10:54pm UTC](https://forum.ionicframework.com/t/how-can-use-a-custom-theme-for-my-application/114719/10 "2017-12-07T22:54:01Z")

</div>

Ok, so you have the theme’s `.scss` files you just need to add them to your project.

For example, update `variables.scss` as follows:

```auto
...

// App Theme
// --------------------------------------------------

@import "ionic.theme.default";

@import "./_action-sheet.scss";
...

Then apply the theme's styles to your templates.

```

---

<div class="post-metadata">

**Author:** ![umutgur](https://avatars.discourse-cdn.com/v4/letter/u/22d042/32.png) [@umutgur](https://forum.ionicframework.com/u/umutgur)\
**Post date:** [December 8, 2017, 4:30am UTC](https://forum.ionicframework.com/t/how-can-use-a-custom-theme-for-my-application/114719/11 "2017-12-08T04:30:37Z")

</div>

Ok, thank you I will try 🙂 I bought wrong version, it was for Ionic 1.3.x 😕

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 10:00pm UTC](https://forum.ionicframework.com/t/how-can-use-a-custom-theme-for-my-application/114719/12 "2021-07-19T22:00:35Z")

</div>


