mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Switching color theme globally (#728)
* Adding cluster menu colors Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Adding theme class name flag into #app Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Cleaning up mixins Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Tuning up Wizard Layout styles Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Using theme-light global flag Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Minor style fixes Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Using .theme-light flag across components Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Set theme as @computed value Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Preventing Drawer slide-in scroll flickering Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Setting background for settings views Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Minor layout fixes Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Switching AceEditor theme reactively Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Cleaning up Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
1 parent
c7b11f86af
commit
0f11b03692
26 files changed
+85
-87
No files matched your search
@@ -5,13 +5,12 @@
|
||||
flex: 1;
|
||||
z-index: 10;
|
||||
|
||||
&.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
.theme-light & {
|
||||
border: 1px solid gainsboro;
|
||||
border-radius: $radius;
|
||||
|
||||
&.light {
|
||||
.ace_scrollbar {
|
||||
@include custom-scrollbar($theme: dark);
|
||||
@include custom-scrollbar(dark);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -3,10 +3,11 @@
|
||||
import "./ace-editor.scss"
|
||||
|
||||
import React from "react"
|
||||
import { observer } from "mobx-react";
|
||||
import { observer, disposeOnUnmount } from "mobx-react";
|
||||
import AceBuild, { Ace } from "ace-builds"
|
||||
import { autobind, cssNames } from "../../utils";
|
||||
import { themeStore } from "../../theme.store";
|
||||
import { reaction } from "mobx";
|
||||
|
||||
interface Props extends Partial<Ace.EditorOptions> {
|
||||
className?: string;
|
||||
@@ -46,6 +47,11 @@ export class AceEditor extends React.Component<Props, State> {
|
||||
require("ace-builds/src-noconflict/ext-searchbox")
|
||||
}
|
||||
|
||||
@disposeOnUnmount
|
||||
themeSwitcher = reaction(() => themeStore.activeTheme, () => {
|
||||
this.setTheme(this.theme);
|
||||
});
|
||||
|
||||
get theme() {
|
||||
switch (themeStore.activeTheme.type) {
|
||||
case "light":
|
||||
@@ -148,9 +154,8 @@ export class AceEditor extends React.Component<Props, State> {
|
||||
|
||||
render() {
|
||||
const { className, hidden } = this.props;
|
||||
const themeType = themeStore.activeTheme.type;
|
||||
return (
|
||||
<div className={cssNames("AceEditor", className, { hidden }, themeType)}>
|
||||
<div className={cssNames("AceEditor", className, { hidden })}>
|
||||
<div className="editor" ref={e => this.elem = e}/>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in new issue
Block a user