fix(React): Add styles to support dark themes #29410 (#1205)

IgniteUI · Feb 16, 2024 · a191348 · a191348
1 parent d754a0e
commit a191348
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 19 deletions.
diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/index.html b/packages/cli/templates/react/igr-ts/projects/_base/files/index.html
@@ -9,6 +9,7 @@
     />
     <meta name="theme-color" content="#000000" />
     <title>IgniteUI for React</title>
+    <link rel="stylesheet" href="./styles.css">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/src/index.css b/packages/cli/templates/react/igr-ts/projects/_base/files/src/index.css
diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/src/main.tsx b/packages/cli/templates/react/igr-ts/projects/_base/files/src/main.tsx
@@ -4,7 +4,6 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { routes } from "./app/app-routes";
 import App from './app/app';
 import 'react-app-polyfill/ie11';
-import './index.css';
 
 /** Required in IE11 for Charts */
 Number.isNaN = Number.isNaN || function(value) {

diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/styles.css b/packages/cli/templates/react/igr-ts/projects/_base/files/styles.css
@@ -0,0 +1,34 @@
+body {
+  background: hsla(var(--ig-surface-500, 0 0% 100%));
+  color: var(--ig-surface-500-contrast, black);
+  font-family: var(--ig-font-family);
+  padding: 0;
+  /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif; */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html, body, #root {
+  height: 100%;
+}
+
+/* minor CSS reset */
+body, h1, h2, h3, h4, h5, h6, p {
+  margin: 0;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+img, video {
+  height: auto;
+  max-width: 100%;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}