diff --git a/packages/demo/src/App.tsx b/packages/demo/src/App.tsx
index 28e9aec..957fb9e 100644
--- a/packages/demo/src/App.tsx
+++ b/packages/demo/src/App.tsx
@@ -17,7 +17,7 @@ type ThemeType = keyof typeof themes
 function App() {
   const [activeSampleCodeType, setActiveSampleCodeType] =
     useState<SampleCodeType>("TypeScript with React")
-  const [activeThemeName, setActiveThemeName] = useState<ThemeType>("nightOwl")
+  const [activeThemeName, setActiveThemeName] = useState<ThemeType>("oneDark")
 
   const activeSampleCode = sampleCode[activeSampleCodeType]
   const activeTheme = themes[activeThemeName]
diff --git a/packages/prism-react-renderer/src/themes/index.ts b/packages/prism-react-renderer/src/themes/index.ts
index 0f9908f..827549e 100644
--- a/packages/prism-react-renderer/src/themes/index.ts
+++ b/packages/prism-react-renderer/src/themes/index.ts
@@ -14,3 +14,5 @@ export { default as vsDark } from "./vsDark"
 export { default as vsLight } from "./vsLight"
 export { default as jettwaveDark } from "./jettwaveDark"
 export { default as jettwaveLight } from "./jettwaveLight"
+export { default as oneDark } from "./oneDark"
+export { default as oneLight } from "./oneLight"
diff --git a/packages/prism-react-renderer/src/themes/oneDark.ts b/packages/prism-react-renderer/src/themes/oneDark.ts
index 1909035..68c55ae 100644
--- a/packages/prism-react-renderer/src/themes/oneDark.ts
+++ b/packages/prism-react-renderer/src/themes/oneDark.ts
@@ -13,72 +13,66 @@ const theme: PrismTheme = {
   },
   styles: [
     {
-      types: [
-        "comment",
-        "prolog",
-        "doctype",
-        "cdata",
-        "punctuation",
-      ],
+      types: ["comment", "prolog", "cdata"],
       style: {
         color: "hsl(220, 10%, 40%)",
       },
     },
     {
-      types: ["namespace"],
-      style: {
-        opacity: 0.7,
-      },
-    },
-    {
-      types: ["tag", "operator", "number"],
+      types: ["doctype", "punctuation", "entity"],
       style: {
         color: "hsl(220, 14%, 71%)",
       },
     },
     {
-      types: ["property", "function"],
-      style: {
-        color: "hsl(29, 54%, 61%)",
-      },
+      types: [
+        "attr-name",
+        "class-name",
+        "maybe-class-name",
+        "boolean",
+        "constant",
+        "number",
+        "atrule",
+      ],
+      style: { color: "hsl(29, 54%, 61%)" },
     },
     {
-      types: ["tag-id", "selector", "atrule-id"],
-      style: {
-        color: "hsl(95, 38%, 62%)",
-      },
+      types: ["keyword"],
+      style: { color: "hsl(286, 60%, 67%)" },
     },
     {
-      types: ["attr-name"],
+      types: ["property", "tag", "symbol", "deleted", "important"],
       style: {
-        color: "hsl(187, 47%, 55%)",
+        color: "hsl(355, 65%, 65%)",
       },
     },
+
     {
       types: [
-        "boolean",
+        "selector",
         "string",
-        "entity",
-        "url",
-        "attr-value",
-        "keyword",
-        "control",
-        "directive",
-        "unit",
-        "statement",
+        "char",
+        "builtin",
+        "inserted",
         "regex",
-        "atrule",
+        "attr-value",
       ],
       style: {
-        color: "hsl(220, 14%, 71%)",
+        color: "hsl(95, 38%, 62%)",
       },
     },
     {
-      types: ["placeholder", "variable"],
+      types: ["variable", "operator", "function"],
       style: {
         color: "hsl(207, 82%, 66%)",
       },
     },
+    {
+      types: ["url"],
+      style: {
+        color: "hsl(187, 47%, 55%)",
+      },
+    },
     {
       types: ["deleted"],
       style: {
@@ -110,6 +104,6 @@ const theme: PrismTheme = {
       },
     },
   ],
-};
+}
 
-export default theme;
+export default theme