https://supertokens.com/ logo
Title
k

Kranos

03/10/2023, 11:36 AM
Anyone know which CSS value to change to change the background color of the Sign in boxes on select? I've tried lots of things and can't quite work out what it is!
r

rp

03/10/2023, 12:11 PM
Hey.
@porcellus can help here.
k

Kranos

03/10/2023, 12:12 PM
Awesome, thank you!
p

porcellus

03/10/2023, 12:12 PM
hi
adding a value for inputBackground and inputBorder should work for you 🙂
k

Kranos

03/10/2023, 12:14 PM
Thanks - I've been following that and tried adding values for both of those but it hasn't worked...
Have added this style:
style: '
        [data-supertokens~=container] {
          font-family: "Helvetica Neue", "Arial", sans-serif;
          --palette-background: 0, 0, 0;
          --palette-inputBackground: 255, 255, 255;
          --palette-inputBorder: 0, 0, 0;
          --palette-textTitle: 255, 255, 255;
          --palette-textLabel: 255, 255, 255;
          --palette-textPrimary: 255, 255, 255;
          --palette-error: 255, 203, 76;
          --palette-textInput: 0, 0, 0;
          --palette-buttonText: 0, 0, 0;
          --palette-textLink: 255, 203, 76;
          --palette-primary: 255, 203, 76;
          --palette-primaryBorder: 255, 203, 76;
          --palette-superTokensBrandingBackground: 255, 255, 255;
          --palette-superTokensBrandingText: 0, 0, 0;
        },
'
p

porcellus

03/10/2023, 12:15 PM
hmm. where did you add this style? can you show a bit more of the config?
k

Kranos

03/10/2023, 12:16 PM
Sure, it's in the
config.ts
file within the
SuperTokensReactConfig
as follows:
export const SuperTokensReactConfig = {
  appInfo: {
    appName: "panda.ai",
    apiDomain: "http://localhost:3001",
    websiteDomain: "http://localhost:3000",
  },
  recipeList: [
    ThirdPartyEmailPasswordReact.init({
      useShadowDom: false,
      signInAndUpFeature: {
        providers: [Github.init(), Google.init(), Apple.init()],
        signUpForm: {
          termsOfServiceLink: "https://example.com/terms-of-service",
          privacyPolicyLink: "https://example.com/privacy-policy"
        },
      },
      style:
[data-supertokens~=container] { font-family: "Helvetica Neue", "Arial", sans-serif; --palette-background: 0, 0, 0; --palette-inputBackground: 255, 255, 255; --palette-inputBorder: 0, 0, 0; --palette-textTitle: 255, 255, 255; --palette-textLabel: 255, 255, 255; --palette-textPrimary: 255, 255, 255; --palette-error: 255, 203, 76; --palette-textInput: 0, 0, 0; --palette-buttonText: 0, 0, 0; --palette-textLink: 255, 203, 76; --palette-primary: 255, 203, 76; --palette-primaryBorder: 255, 203, 76; --palette-superTokensBrandingBackground: 255, 255, 255; --palette-superTokensBrandingText: 0, 0, 0; },
}),
    EmailVerification.init({
      mode: "REQUIRED", // or "OPTIONAL"
    }),
    SessionReact.init(),
  ],
};
p

porcellus

03/10/2023, 12:18 PM
I see. Which screen has the input you are trying to change?
/auth
?
do other values work?
k

Kranos

03/10/2023, 12:18 PM
Yep - the other values work and it's only on select that the text box turns grey
I'd also like to change the font and font color but haven't got that far yet!
p

porcellus

03/10/2023, 12:20 PM
oh, so this works as well in changing the background, but the focus styles mess with it.
k

Kranos

03/10/2023, 12:20 PM
Yep
p

porcellus

03/10/2023, 12:22 PM
So this is the style we apply by default:
css
[data-supertokens~="inputWrapper"]:focus-within {
    background-color: rgba(var(--palette-inputBackground), 0.25);
    border: 1px solid rgb(var(--palette-primary));
    box-shadow: 0 0 0 0.2rem rgba(var(--palette-primary), 0.25);
    outline: none;
}
if you add something like into the styles:
css
[data-supertokens~="inputWrapper"]:focus-within {
  background-color: #FFFFFF !important;
}
you can override it.
k

Kranos

03/10/2023, 12:24 PM
Thanks - have just tried and it hasn't worked. Might be because I'm doing this in vue?
I just moved the inputWrapper css above my container css and it's worked. Seems like
style:
can only accept one of them?
p

porcellus

03/10/2023, 12:48 PM
hmm, it's plain css, so there is nothing really special about doing one or both
k

Kranos

03/10/2023, 1:20 PM
So the following should be working then: `style:
[data-supertokens~=container] {
          font-family: "Helvetica Neue", "Arial", sans-serif;
          --palette-background: 0, 0, 0;
          --palette-inputBackground: 255, 255, 255;
          --palette-inputBorder: 0, 0, 0;
          --palette-textTitle: 255, 255, 255;
          --palette-textLabel: 255, 255, 255;
          --palette-textPrimary: 255, 255, 255;
          --palette-error: 255, 203, 76;
          --palette-textInput: 0, 0, 0;
          --palette-buttonText: 0, 0, 0;
          --palette-textLink: 255, 203, 76;
          --palette-primary: 255, 203, 76;
          --palette-primaryBorder: 255, 203, 76;
          --palette-superTokensBrandingBackground: 255, 255, 255;
          --palette-superTokensBrandingText: 0, 0, 0;
        },
        [data-supertokens~="inputWrapper"]:focus-within {
          background-color: 255, 255, 255 !important;
        },
@porcellus - did you have any other thoughts on this?
p

porcellus

03/10/2023, 10:07 PM
it should work if you remove the , after
}
in the styles, that's not valid CSS syntax
I think this should also appear in the browser logs but I'm not sure about it.
k

Kranos

03/10/2023, 10:30 PM
Thanks - will give it a go