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!

Hey.

Awesome, thank you!

hi

Thanks - I've been following that and tried adding values for both of those but it hasn't worked...

hmm. where did you add this style? can you show a bit more of the config?

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(),
  ],
};

I see. Which screen has the input you are trying to change?

/auth

?

Yep - the other values work and it's only on select that the text box turns grey

oh, so this works as well in changing the background, but the focus styles mess with it.

Yep

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.

Thanks - have just tried and it hasn't worked. Might be because I'm doing this in vue?

hmm, it's plain css, so there is nothing really special about doing one or both

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;
        },

it should work if you remove the , after

}

in the styles, that's not valid CSS syntax

Thanks - will give it a go