Is Strapi v4 really ready for theming?

General
1

Using strapi 4,

image
image843×237 10.3 KB

I am trying to customize the theme of my admin panel, which is supposed to be made easier in Strapi 4.

Following the admin panel customization guide, I have managed to change the locales of my strapi, which confirms that my app.js is indeed in use.

I come across the following problems:

  • The folders mentioned are inconsistent. The documentation mentions ./src/admin/app.js but for the extension folder ./admin/extensions/, ./extensions or even /extensions/. It’s confusing, I’m guessing (but only guessing) that the folder should be /src/admin/extensions/
  • I can’t get my image to be used in the menu or the auth config, no matter where I put it. The doc does not say if it should be logo: ‘extensions/mylogo.png’, ‘mylogo.png’, ‘mylogo’ or anything else, nor does it provide any clear example.
  • Same problem with the favicon, the default favicon is used despite my configuration.
  • I tried the following theme in my config, to no avail as it’s not taken into account:
        theme: {
            colors: {
                primary100: '#00B482',
                primary200: '#00B462',
                primary500: '#00B442',
                primary600: '#00B422',
                primary700: '#009422'
            }
        }
  • How can I configure things that are not editable in the theme object? Can I configure all the components?

Has anyone managed to create a theme for strapi 4?
I’m under the impression that things were released and for once documented before they’re actually working.

1 Like
2

Have a look here

4 Likes
3

Hi Simen! That did help a lot, turns out I had to clean build the entire admin portal for my colors to work and they are now here!

I still have issues with the images though.

I tried putting them in /src/admin/extensions, in /src/extensions and in /admin/extensions to no avail. I tried both “myimage.png” and “extensions/myimage.png” in the config file:

auth: {
            logo: 'myimage.png'
        },
        head: {
            favicon: 'favicon.ico'
        },
        menu: {
            logo: 'myotherimage.png'
        }

Both images and the favicon are however not taken into account.

Also the question regarding the configuration of all components remain: we had a way to hard-edit all react views in strapi 3 in the “admin” folder, and we are wondering if that will still be the case.

Wish you a very pleasant week-end!

4

I was able to change the images by first importing them like in the example here

// path: ./my-app/src/admin/app.js

import AuthLogo from './extensions/my-logo.png';
import MenuLogo from './extensions/logo.png';
import favicon from './extensions/favicon.ico';

export default {
  config: {
    // Replace the Strapi logo in auth (login) views
    auth: {
      logo: AuthLogo,
    },
   // Replace the favicon
    head: {
      favicon: favicon,
    },
...
1 Like
5

Hi! Thank you very much for your example.

I also noticed that this commit fixed the inconsistencies in the documentation, which is really helpful.

6

Still, I can’t seems to get below two properties working, looks like a documentation issue, however if we have a way to modify the admin UI similar to v3 it would be great IMO, it gives developers the adequate flexibility

   // Disable video tutorials
    tutorials: false,
   // Disable notifications about new Strapi releases
    notifications: { release: false },
3 Likes