diff --git a/public/react/src/common/context/ThemeContext.js b/public/react/src/common/context/ThemeContext.js
new file mode 100644
index 000000000..e4fe3da89
--- /dev/null
+++ b/public/react/src/common/context/ThemeContext.js
@@ -0,0 +1,17 @@
+import React from 'react'
+
+export const themes = {
+  light: {
+    foreground: '#000000',
+    background: '#eeeeee',
+    foreground_select: '#4CACFF'
+  },
+  dark: {
+    foreground: '#ffffff',
+    background: '#222222',
+  },
+};
+
+export const ThemeContext = React.createContext(
+  themes.light // default value
+);
diff --git a/public/react/src/common/educoder.js b/public/react/src/common/educoder.js
index f5b8d0430..263e08808 100644
--- a/public/react/src/common/educoder.js
+++ b/public/react/src/common/educoder.js
@@ -27,6 +27,8 @@ export { trace_collapse, trace, debug, info, warn, error, trace_c, debug_c, info
 export { EDU_ADMIN, EDU_BUSINESS, EDU_SHIXUN_MANAGER, EDU_SHIXUN_MEMBER, EDU_CERTIFICATION_TEACHER
     , EDU_GAME_MANAGER, EDU_TEACHER, EDU_NORMAL} from 	'./Const'
 
+export { themes, ThemeContext } from 	'./context/ThemeContext'
+
 export { ModalHOC } from 	'./components/ModalHOC'
 export { default as Cropper } from 	'./components/Cropper'
 export { default as ConditionToolTip } from 	'./components/ConditionToolTip'
diff --git a/public/react/src/modules/courses/members/modal/AddStudentModal.js b/public/react/src/modules/courses/members/modal/AddStudentModal.js
index cb40c1983..c3d8cdd75 100644
--- a/public/react/src/modules/courses/members/modal/AddStudentModal.js
+++ b/public/react/src/modules/courses/members/modal/AddStudentModal.js
@@ -5,7 +5,7 @@ import ModalWrapper from "../../common/ModalWrapper"
 import InfiniteScroll from 'react-infinite-scroller';
 import { ROLE_TEACHER_NUM, ROLE_ASSISTANT_NUM } from '../common'
 import NoneData from '../../coursesPublic/NoneData'
-import { ConditionToolTip } from 'educoder'
+import { ConditionToolTip, ThemeContext } from 'educoder'
 import SchoolSelect from '../../coursesPublic/form/SchoolSelect'
 
 const Option = Select.Option;
@@ -151,6 +151,7 @@ class AddStudentModal extends Component{
     const { users, checkBoxValues, loading, hasMore, name, school_name
         , courseGroup, course_groups,isSpin  } = this.state
     const { moduleName } = this.props
+    let theme = this.context;
     return(
       <ModalWrapper
         ref="modalWrapper"
@@ -242,7 +243,7 @@ class AddStudentModal extends Component{
                 { users.map( candidate => {
                   return (
                     <p className="clearfix mb7" key={candidate.id}>
-                      <Checkbox className="fl" value={candidate.id} ></Checkbox>
+                      <Checkbox className="fl" value={candidate.id} disabled={candidate.added}></Checkbox>
                       <span className="fl with25">
                         <ConditionToolTip title={candidate.name} condition={candidate.name && candidate.name.length > 12 }>
                           <label className="task-hide fl" style={{"maxWidth":"208px;"}}>{candidate.name || '　'}</label>
@@ -254,7 +255,8 @@ class AddStudentModal extends Component{
                         </ConditionToolTip>
                       </span>
                       <span className="fl with35"><label className="task-hide fl" style={{"maxWidth":"208px;"}}>{candidate.school_name}</label></span>
-                      <span className="fl with10"><label className="task-hide fl" style={{"maxWidth":"48px"}}>{candidate.added ? '已加入' : ''}</label></span>
+                      <span className="fl with10"><label className="task-hide fl" 
+                        style={{"maxWidth":"48px", color: theme.foreground_select }}>{candidate.added ? '已加入' : ''}</label></span>
                       
                     </p>
                   )
@@ -274,4 +276,6 @@ class AddStudentModal extends Component{
     )
   }
 }
+
+AddStudentModal.contextType = ThemeContext;
 export default AddStudentModal;