Setting default color for text using theme

[jackfrosty908]

Hey All,

I may be missing something in the docs, but I am looking to set a default color for all text in the app via the theme.

Is setting black in the theme the only way to do this?

import { slate } from './mantineCustomColors';
import { createTheme} from '@mantine/core';
const theme = createTheme({
  fontFamily: 'Roboto, sans-serif',
  fontFamilyMonospace: 'Monaco, Courier, monospace',

  colors: {
    slate,
  },

  black: 'red', // <-- make all text red
  primaryColor: 'slate',
  )}

I am a little concerned that this will effect things other than text.

I have also looked at overriding each component, but I feel like I'm missing something with this approach

  components: {
    Title: {
      defaultProps: {
        c: 'green',
      },
    },
    Text: {
      defaultProps: {
        c: 'green',
      },
    },
    Alert: {
      defaultProps: {
        c: 'green',
      },
    },
  },

If I have missed something in the docs can someone point me in the right direction?

Thanks!

[rtivital]

I did not get the question. You have the working code, as I understand. Is something wrong?

[jackfrosty908]

Sorry, I'll try rephrase my question.

I am wondering if there is a global variable that every component uses to control text color. Maybe something like --mantine-font-color?

While I can do this, and it works :

components: {
    Title: {
      defaultProps: {
        c: cssTextColor,
      },
    },
    Text: {
      defaultProps: {
        c: cssTextColor,
      },
    },
    Combobox: Combobox.extend({
      styles: () => ({
        search: {
          color: cssTextColor,
        },
        option: {
          color: cssTextColor,
        },
      }),
    }),
  // ... all the components that render text ...
  },

It does mean as the application grows and we add more components, we have to remember to update the components property in the theme for each new component we add and if we don't or some things will be styled incorrectly.

What I am looking for is a property that I have to set once for the font color and never have to think about this again. I was wondering if this was the black property, but changing this to a different color seems unwise based on its name (black should be black right?).

If updating each component individually is the only way to achieve that I am wanting to do that is fine, but I wanted to make sure I wasn't misinterpreting the documentation and missing a "global text color" property.

Thanks!

[rtivital]

By default, --mantine-color-text is used

[jackfrosty908]

Fantastic thank you. Also thanks for all the work you do on this project @rtivital , I'm migrating to Mantine from JoyUI and Mantine is fantastic.

[rtivital]

Thanks for kind words!