how to override vue-emoji-picker css styles to match my site?
Hi I'm using vue-emoji-picker but I want to override its background color and border color to match my nuxt ui theme colors. I tried making an emoji-picker-custom.css and including it in my nuxt config but this didn't work. in their github they have these variables I'm trying to override
11 Replies
Hi @WiFi Plug. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To override the CSS variables of a third-party component like vue-emoji-picker and match it with your Nuxt UI theme, you need to ensure that your custom CSS is loaded after the component's styles and that your selectors are specific enough to take precedence.
From your example, you are setting the variables on :root and html.dark, but vue-emoji-picker defines them on the .v3-emoji-picker element itself. This means your overrides on :root won't affect the component unless you target the correct selector.
To match your Nuxt UI theme, you can use the Nuxt UI CSS variables (like --ui-bg, --ui-border, etc.) and override the vue-emoji-picker variables within the .v3-emoji-picker selector. For dark mode, target .v3-emoji-picker.v3-color-theme-dark.
Here’s how you can do it in your custom CSS file (e.g., app/assets/css/emoji-picker-custom.css):
Then, include this CSS file globally in your Nuxt config:
This approach ensures your overrides use the same theme variables as Nuxt UI, keeping your design consistent. Make sure your custom CSS is loaded after the vue-emoji-picker styles for the overrides to take effect. You can further customize other variables (like --v3-picker-fg, --v3-picker-emoji-hover, etc.) in the same way.
For reference on how Nuxt UI exposes and uses CSS variables for theming, see the Nuxt UI theming documentation and how to include global CSS in Nuxt Nuxt CSS config.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai yeah it didn't work, how do i ensure it's loaded after the emoji pickers styles?
Let me check the knowledge base for you again. One moment! :books:
----------------------
To ensure your custom CSS is loaded after the vue-emoji-picker styles in Nuxt, you should add your CSS file to the css array in your nuxt.config.ts. Nuxt will include these files globally and in the order they appear in the array, so files listed later will override earlier ones if there are conflicting styles.
For example:
This way, your custom CSS will be loaded after the emoji picker’s CSS, allowing your overrides to take effect Nuxt CSS config.
If vue-emoji-picker is imported as a module or its CSS is injected by the component itself (not via the Nuxt css array), you may need to increase the specificity of your selectors in your custom CSS to ensure your rules take precedence. For example:
But generally, controlling the order in the css array is the recommended approach in Nuxt.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai thanks that !important seems to have done the trick. so then my file would be what to use the nuxt ui variables for my theme to automatically switch between dark and light i use bg-default in my components so do i use that as the var?
Let me check the knowledge base for you again. One moment! :books:
----------------------
To match your Nuxt UI theme and have the emoji picker automatically switch between light and dark modes, you should use the Nuxt UI CSS variables. The variable for the default background is
--ui-bg, which is what the bg-default utility class uses. For borders, use --ui-border Getting-started > CSS Variables.
Here’s how your custom CSS should look:
This will ensure the emoji picker uses the same background and border colors as your Nuxt UI theme, and will automatically adapt to light and dark modes since --ui-bg and --ui-border are updated by Nuxt UI when the color mode changes Getting-started > CSS Variables.
So yes, use var(--ui-bg) for the background and var(--ui-border) for the border in your overrides.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai what's the variable for the input field border when it turns into my primary color i tried --ui-border-primary but thats white
Let me check the knowledge base for you again. One moment! :books:
----------------------
The knowledge sources do not explicitly mention a CSS variable named
Use
--ui-border-primary for the input field border when it turns into your primary color. However, based on the theming system in Nuxt UI, the primary color is typically referenced as --ui-primary, and the ring (focus) color for primary is often set using ring-primary in component variants, not a border variable.
For example, in the theme configuration for components like input-number, the focus ring uses ring-primary for the primary color state:
This means the border color itself does not automatically become the primary color; instead, the focus ring does, and it uses the ring-primary utility, which is mapped to the --ui-primary variable InputNumber Theme.
If you want to use the primary color as a border, you should use --ui-primary:
If you need to reference the actual CSS variable for the primary color, it is --ui-primary, not --ui-border-primary Getting-started > CSS Variables.
Summary:Use
var(--ui-primary) for the primary color, and for focus rings, use the ring-primary utility or set border-color: var(--ui-primary) if you want the border itself to be the primary color. There is no --ui-border-primary variable documented in the knowledge sources.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.