More direction on how to create custom styling

[Rodeoclash]

I'm having a ton of trouble navigating the custom UI / styling for Ory. For context:

1. I'm self hosting Kratos + Oathkeeper
2. Up until now I've used the UI reference Docker image: https://hub.docker.com/r/oryd/kratos-selfservice-ui-node

My initial approach was to simply tweak the reference UI. I forked the repo into my local project and got it (with some difficulty) building. I've now started to dig into the code but I can't make heads or tails on how to tweak the default styles that are in the ory elements project.

For example, I want to remove the rounded border from the UserCard however this seems impossible without also forking and customising the ory elements package? Or I'm possibly missing something very obvious about this process.

Some guidance around how to work within the themes system in the documentation would be welcome (I'm also happy to write something up too around this too but I'm not even sure where to start).

[vinckr]

Hello @Rodeoclash

Apologies for the late answer. I assume you have seen the documentation here: https://github.com/ory/elements#understanding-ory-elements ?

AFAIK at the moment changing something like the look of UserCard requires forking the repo; can you confirm this @Benehiko ?

[Benehiko]

Hey, if you want to have your own styling system and theming, then forking would probably make the most sense. That would require a lot of work though since you would need to change the CSS inside of the src/theme directory and then build your own version of Ory Elements with npm run build:clean.

We are thinking of ways to improve the Ory Elements customization and how we could allow users to pass in their own components, e.g. adding your own input field or social button.

Another thing you could do is use the official NPM release of ory elements https://www.npmjs.com/package/@ory/elements
and override the CSS styling inside your app like so:

button[name="provider"] {
  justify-content: center !important;
  background-color: #c7d6d6 !important;
}

This would require not using the class names, but the element tag or name since they are generated and could change in future releases.

We will most likely create an issue in the coming weeks outlining some strategies that we have to implement more flexibility to Ory Elements.

[Rodeoclash]

Hi all. The solution that @Benehiko posted was pretty much I went with. I used a CSS psuedo element to inject an icon for each of the providers (and to remove the default provider icon).

I would say that of all the moving parts of Ory, styling it caused me the most stress. One thing that could have helped was that if the classnames on the components had sane, non computer generated values. It might be old fashioned these days but embracing something like BEM components would go a long way to helping with easily overriding parts of the existing CSS.

[Benehiko]

Thank you for the input.

I've tested out a naming prefix inside the build time for the vanilla-extract library and it seems to work quite well.

I was able to generate a name following this format: ory_elements__<class name>_<variant|size>__hash

For example the card would have the prefix ory_elements and the name of the file card and then the unique hash.
ory_elements__card__1xqjo9i3

Here's a social button with semibold variant.
ory_elements__button_social_variant_semibold

[Benehiko]

I have a WIP here #163