# In self-hosted, where should I put the ".scss" file for the theme?

**URL:** <https://community.taiga.io/t/in-self-hosted-where-should-i-put-the-scss-file-for-the-theme/3277>\
**Category:** Self hosted Taiga\
**Created:** [May 9, 2024, 2:05am UTC](https://community.taiga.io/t/in-self-hosted-where-should-i-put-the-scss-file-for-the-theme/3277 "2024-05-09T02:05:00Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![murata](https://dub1.discourse-cdn.com/flex017/user_avatar/community.taiga.io/murata/32/2510_2.png) [@murata](https://community.taiga.io/u/murata)\
**Post date:** [May 9, 2024, 2:05am UTC](https://community.taiga.io/t/in-self-hosted-where-should-i-put-the-scss-file-for-the-theme/3277/1 "2024-05-09T02:05:00Z")

</div>

Hello  
I installed Taiga from source code on a server that I manage.  
I want to change Taiga’s appearance, so I’m trying to use the THEME function.  
However, the “/app/themes” folder written in the document cannot be found under the folder where Taiga is installed.  
[https://docs.taiga.io/#themes](https://docs.taiga.io/#themes)

On the other hand, the default theme “taiga” is listed in “dist/conf.json”.

```auto
     "themes": [
         "taiga"
     ],
     "defaultTheme": "taiga",

```

And when I looked at the article below, it said that “variables.scss” and “custom.scss” needed to be duplicated from the github repository.

> [@How to add themes](https://community.taiga.io/t/how-to-add-themes/2062):
>
> Hi, we have a source code installation of Taiga. I would like to add a custom theme to Taiga. I have read [Taiga Documentation - Themes](https://docs.taiga.io/#themes) but I cannot find any /app/themes directory nor the two variables.scss and custom.scss files. Is the documentation still valid? Thanks

However, the “app/themes” folder is not found.  
Could you please tell me where to put “variables.scss” and “custom.scss”?

thank you.

---

<div class="post-metadata">

**Author:** ![Charlie](https://avatars.discourse-cdn.com/v4/letter/c/d6d6ee/32.png) [@Charlie](https://community.taiga.io/u/Charlie)\
**Post date:** [May 9, 2024, 6:23am UTC](https://community.taiga.io/t/in-self-hosted-where-should-i-put-the-scss-file-for-the-theme/3277/2 "2024-05-09T06:23:43Z")

</div>

Hi there,

It seems you have installed the compiled version, [GitHub - taigaio/taiga-front-dist](https://github.com/taigaio/taiga-front-dist).

If you want to change and modify themes, as far as I know you need to download this repo: [GitHub - taigaio/taiga-front](https://github.com/taigaio/taiga-front/tree/main) add/modify the themes, and compile it yourself.

Hope this helps!

Regards!

---

<div class="post-metadata">

**Author:** ![murata](https://dub1.discourse-cdn.com/flex017/user_avatar/community.taiga.io/murata/32/2510_2.png) [@murata](https://community.taiga.io/u/murata)\
**Post date:** [May 9, 2024, 8:17am UTC](https://community.taiga.io/t/in-self-hosted-where-should-i-put-the-scss-file-for-the-theme/3277/3 "2024-05-09T08:17:58Z")

</div>

Thank you very much for your answer and advice.  
Indeed I installed “taiga-front-dist”.  
I didn’t think there was any other way.

I looked for documentation on how to compile “taiga-front” and found “Taiga: Setup development environment”.  
[https://docs.taiga.io/setup-development.html](https://docs.taiga.io/setup-development.html)

Unfortunately, I’m not an expert in web programming. (I even found out about gulp for the first time)  
So, I would appreciate it if you could answer two additional questions.

(1) To compile “taiga-front”, should I follow this “Setup development environment”? (“4.3 Final steps” ends with running “npm start”)

(2) Should I reconfigure not only “taiga-front” but also “taiga-back” and “taiga-events” according to the “Setup development environment” and operate with these three modules?  
The production environment on my server consists of five modules: “taiga-back”, “taiga-async-tasks”, “taiga-front-dist”, “taiga-events”, and “taiga-protected”.  
I’m concerned that the dependencies and collaboration methods may be different between my production environment and the development environment I’m about to create.  
Of course, if there are no particular problems, I’d like to just compile “taiga-front”.

Thank you for your help.

---

<div class="post-metadata">

**Author:** ![Charlie](https://avatars.discourse-cdn.com/v4/letter/c/d6d6ee/32.png) [@Charlie](https://community.taiga.io/u/Charlie)\
**Post date:** [May 9, 2024, 11:43am UTC](https://community.taiga.io/t/in-self-hosted-where-should-i-put-the-scss-file-for-the-theme/3277/4 "2024-05-09T11:43:28Z")

</div>

Hi again!

Firstly, the different components are independent enough that, unless major versions change or there are specific changes to take into account, you do not need to worry about that. So let’s focus on taiga-front for this.

You do not really need the development environment (though it will be nice that you have it locally for developing your theme and trying it out).

I’m no expert in the process, but maybe someone else in the community can chime in, but as far as I remember, you need to do:

- Install [nvm](https://github.com/nvm-sh/nvm) to make sure you use the same version that the project requires.
- Go to the taiga-front repository and run `nvm install`.
- Once installed, `nvm use`.
- Run `npm ci` to make a clean install of the project modules.
- Run `npx gulp deploy`, if it’s the first time it will ask you to install gulp.
- Copy all the contents of your new `dist` folder to your installed taiga-front folder (and replace everything, of course).

That should be it, hope this helps and is not too confusing.

Best regards!

---

<div class="post-metadata">

**Author:** ![murata](https://dub1.discourse-cdn.com/flex017/user_avatar/community.taiga.io/murata/32/2510_2.png) [@murata](https://community.taiga.io/u/murata)\
**Post date:** [June 17, 2024, 1:12am UTC](https://community.taiga.io/t/in-self-hosted-where-should-i-put-the-scss-file-for-the-theme/3277/5 "2024-06-17T01:12:52Z")

</div>

Hello.  
I got stuck a few times, but I was able to switch themes by installing the taiga-front development environment.  
Thanks to Charlie and the community for your advice.

Here are the things I remember getting stuck on.

(1)  
“npm installl” gave me an error about sha512.  
This was resolved by deleting the file “package-lock.json” in taiga-front and running “npm install” again.

(2)  
I didn’t immediately realize how to switch from “taiga-front-dist” to “taiga-front”.  
I was able to switch by editing “nginx/conf.d/taiga.conf”.  
before:

```auto
    location / {
        alias /home/taiga/taiga-front-dist/dist/;
        index index.html;
        try_files $uri $uri/ index.html =404;
    }

```

after:

```auto
    location / {
        alias /home/taiga/taiga-front/dist/;
        index index.html;
        try_files $uri $uri/ index.html =404;
    }

```

Of course, I restarted nginx after this.

Thank you.

---

<div class="post-metadata">

**Author:** ![coldpitch](https://avatars.discourse-cdn.com/v4/letter/c/b2d939/32.png) [@coldpitch](https://community.taiga.io/u/coldpitch)\
**Post date:** [September 7, 2024, 5:05pm UTC](https://community.taiga.io/t/in-self-hosted-where-should-i-put-the-scss-file-for-the-theme/3277/6 "2024-09-07T17:05:08Z")

</div>

Hello, i stuck with same problem, did you get successful install your own taiga-front in the end?