How to remove native background? | Mantine | Page 1

high river Sep 3, 2024, 10:46 AM

#

I'm trying to create UI for game with mantine but i need to removebefault background. But it seems like mantine having double background. I tried to set background to none/transparent !important in css. And background just turned darker

#

index.css

  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}```

#

app.css

  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent !important;
}```

shell basin Sep 3, 2024, 11:24 AM

#

Backgound color is defined on body element, you can override it there

high river Sep 3, 2024, 11:45 AM

#

works with lightmode but not with darkmode after setting backround in body

shell basin Sep 3, 2024, 11:50 AM

#

use !important

high river Sep 3, 2024, 11:57 AM

#

i'm using !important

#

serene drum Sep 3, 2024, 12:50 PM

#

Bcs dark mantine color scheme also sets css color scheme which in chromium browsher

#

Browsers sets the bg color, override color scheme to light in ur css after importing mantine styles and u should be fine

or you can use resolver (cc ViskCY)

const cssVariablesResolver = () => ({
dark: {
"--mantine-color-scheme": "light",
}
});

#How to remove native background?