Catching active lens theme (lensapp#11)

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
victorwedo · Nov 27, 2020 · cf98955 · cf98955
1 parent cee0c20
commit cf98955
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 1 deletion.
diff --git a/styling-emotion-sample/package-lock.json b/styling-emotion-sample/package-lock.json
diff --git a/styling-emotion-sample/package.json b/styling-emotion-sample/package.json
@@ -35,7 +35,9 @@
     "@types/react-router": "^5.1.8",
     "@types/webpack": "^4.41.17",
     "mobx": "^5.15.5",
+    "mobx-react": "^7.0.5",
     "react": "^16.13.1",
+    "react-dom": "^17.0.1",
     "react-open-doodles": "^1.0.5",
     "ts-loader": "^8.0.4",
     "ts-node": "^9.0.0",

diff --git a/styling-emotion-sample/page.tsx b/styling-emotion-sample/page.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 import path from "path";
 import styled from "@emotion/styled";
-import { LensRendererExtension, Component } from "@k8slens/extensions";
+import { observer } from "mobx-react";
+import { LensRendererExtension, Component, Theme } from "@k8slens/extensions";
 import { CoffeeDoodle } from "react-open-doodles";
 
 const Wrapper = styled.div`
@@ -24,13 +25,15 @@ export function ExampleIcon(props: Component.IconProps) {
   return <Component.Icon {...props} material="pages" tooltip={path.basename(__filename)}/>
 }
 
+@observer
 export class ExamplePage extends React.Component<{ extension: LensRendererExtension }> {
   render() {
     return (
       <Wrapper>
         <div className="doodle-style"><CoffeeDoodle accent="#3d90ce" /></div>
         <p>Hello world with Emotion!</p>
         <p>File: <i>{__filename}</i></p>
+        <p>Active theme is {Theme.getActiveTheme().name}</p>
       </Wrapper>
     );
   }