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:
Alex Andreev authored and GitHub committed 2020-08-24 10:24:05 +03:00
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>
)