diff --git a/config/app.settings.js b/config/app.settings.js
index 1c05e2b2..e9e1e393 100644
--- a/config/app.settings.js
+++ b/config/app.settings.js
@@ -12,5 +12,6 @@ export var DevOptions = {
StrictLightMode: ReturnDevOption('strict_lightMode'),
SignForNotExpire: ReturnDevOption('force_showDevLogs'),
MaxJWTexpire: '1556952',
- MaxLengthPosts: '512'
+ MaxLengthPosts: '512',
+ CurrentBundle: 'light_ng'
}
\ No newline at end of file
diff --git a/config/theme.config.js b/config/theme.config.js
index d9def83d..e2034871 100644
--- a/config/theme.config.js
+++ b/config/theme.config.js
@@ -3,6 +3,6 @@ const path = require('path')
const lessToJs = require('less-vars-to-js')
module.exports = () => {
- const themePath = path.join(__dirname, '../src/themes/vars.less')
+ const themePath = path.join(__dirname, `../src/themes/vars.less`)
return lessToJs(fs.readFileSync(themePath, 'utf8'))
}
diff --git a/config/ycore.config.js b/config/ycore.config.js
index 91a9f37e..ee7913d8 100644
--- a/config/ycore.config.js
+++ b/config/ycore.config.js
@@ -1,10 +1,15 @@
module.exports = {
siteName: 'Comty',
copyright: 'RageStudio©',
- logoPath: '/logo.svg',
+
+ LogoPath: '/logo.svg',
FullLogoPath: '/full_logo.svg',
+ DarkFullLogoPath: '/dark_full_logo.svg',
+ DarkLogoPath: '/dark_logo.svg',
+
apiPrefix: '/api/v1',
fixedHeader: true, // sticky primary layout header
+ resource_bundle: 'light_ng',
App_Config: {
InitRes: { width: 1000, height: 900},
diff --git a/globals/settings.js b/globals/settings.js
index 71f3719b..ed9905f0 100644
--- a/globals/settings.js
+++ b/globals/settings.js
@@ -1,10 +1,15 @@
const fromStorage = JSON.parse(localStorage.getItem('app_settings'))
function StorageValued(e){
- const Ite = fromStorage.map(item => {
- return item.SettingID === e? item.value : null
- })
- const fr = Ite.filter(Boolean)
- return fr.toString()
+ try {
+ const Ite = fromStorage.map(item => {
+ return item.SettingID === e? item.value : null
+ })
+ const fr = Ite.filter(Boolean)
+ return fr.toString()
+ } catch (error) {
+ console.log(error)
+ return false
+ }
}
export var AppSettings = [
{
diff --git a/package.json b/package.json
index e73745b1..ac7dbc16 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,8 @@
{
"name": "comty-development",
- "version": "0.1.13",
+ "title": "Comty™",
+ "DevBuild": true,
+ "version": "0.1.15",
"description": "",
"main": "index.js",
"author": "RageStudio",
diff --git a/public/dark_full_logo.svg b/public/dark_full_logo.svg
new file mode 100644
index 00000000..78e90e9a
--- /dev/null
+++ b/public/dark_full_logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/dark_logo.svg b/public/dark_logo.svg
new file mode 100644
index 00000000..ef799d4a
--- /dev/null
+++ b/public/dark_logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/@ycore/libs/ycore_sdcp/pre.js b/src/@ycore/libs/ycore_sdcp/pre.js
index 07a292ce..b2d23c6f 100644
--- a/src/@ycore/libs/ycore_sdcp/pre.js
+++ b/src/@ycore/libs/ycore_sdcp/pre.js
@@ -25,6 +25,7 @@ export function InitSDCP(values, done) {
{
let cooked = JSON.parse(response)['user_data']
let Ensamblator = btoa(JSON.stringify(cooked))
+ ycore.SetupApp()
ycore.asyncSDCP.setSDCP(Ensamblator).then(() => {
ycore.DevOptions.ShowFunctionsLogs? console.log(prefix, ' SDCP Setup done') : null
return done(true)
@@ -77,4 +78,13 @@ export function SDCP() {
return null
}
}
+}
+export function SetupApp(){
+ // TODO: Default sets
+ const resourceLoad = localStorage.getItem('resource_bundle')
+ if (!resourceLoad) {
+ localStorage.setItem('resource_bundle', 'light_ng')
+ }
+
+
}
\ No newline at end of file
diff --git a/src/@ycore/libs/ycore_styles/pre.js b/src/@ycore/libs/ycore_styles/pre.js
index 9f3293d8..d1bb4bba 100644
--- a/src/@ycore/libs/ycore_styles/pre.js
+++ b/src/@ycore/libs/ycore_styles/pre.js
@@ -1,3 +1,11 @@
-export function init(){
- console.log('Init pass!! styles')
-}
+import {DevOptions} from 'ycore'
+
+export function CurrentTheme(){
+ try {
+ const bundle = localStorage.getItem('resource_bundle') || DevOptions.resource_bundle
+ console.log('Loading resource Bundle =>', bundle)
+ return bundle
+ } catch (error) {
+ return null
+ }
+}
\ No newline at end of file
diff --git a/src/@ycore/ycore_worker.js b/src/@ycore/ycore_worker.js
index eae4b9ba..bffce793 100644
--- a/src/@ycore/ycore_worker.js
+++ b/src/@ycore/ycore_worker.js
@@ -1,3 +1,4 @@
+import React from 'react'
import {AppSettings} from '../../globals/settings.js'
import {Endpoints} from 'globals/endpoints.js'
import umiRouter from 'umi/router';
@@ -12,7 +13,11 @@ export var endpoints = Endpoints;
export var yConfig = config.yConfig;
var package_json = require("../../package.json");
-
+export const AppInfo = {
+ name: package_json.title,
+ version: package_json.version,
+ logo: config.FullLogoPath
+}
export function ReturnDevOption(e){
const Ite = AppSettings.map(item => {
return item.SettingID === e? item.value : null
@@ -91,4 +96,29 @@ export const asyncSessionStorage = {
export function RefreshONCE(){
window.location.reload();
}
-
+export function DetectNoNStableBuild(e1) {
+ switch (e1) {
+ case 'TagComponent':
+ if (package_json.DevBuild == true) {
+ return React.createElement(antd.Tag, { color: 'orange' }, " No Stable");
+ }
+ if (package_json.DevBuild == false) {
+ return React.createElement(antd.Tag, { color: 'blue' }, " Stable");
+ }
+ else {
+ return ('No Stable');
+ }
+ break;
+ default:
+ if (package_json.DevBuild == true) {
+ return ('No Stable');
+ }
+ if (package_json.DevBuild == false) {
+ return ('Stable');
+ }
+ else {
+ return ('No Stable');
+ }
+ break;
+ }
+}
diff --git a/src/components/CustomIcons/index.js b/src/components/CustomIcons/index.js
index 0d39a4bb..0b357290 100644
--- a/src/components/CustomIcons/index.js
+++ b/src/components/CustomIcons/index.js
@@ -1,7 +1,7 @@
const VerifiedBadge = () => ()
const CommonThings = () => ()
-const SunSVG = () => ()
-const MoonSVG = () => ()
+const SunSVG = () => ()
+const MoonSVG = () => ()
const CustomIcons = {VerifiedBadge, CommonThings, SunSVG, MoonSVG}
export default CustomIcons
diff --git a/src/components/Layout/Header.less b/src/components/Layout/Header.less
index 3a21a945..e19aba31 100644
--- a/src/components/Layout/Header.less
+++ b/src/components/Layout/Header.less
@@ -9,9 +9,6 @@
width: 30px;
margin: 0 auto 0 auto;
height: 190px;
-
-
-
}
.brand {
display: flex;
@@ -36,7 +33,8 @@
box-shadow: 0px 9px 15px -6px rgba(158,158,158,0.82);
display: flex;
width: 100%;
- background-color: #F3F3F3;
+ background-color: #FEB500; // * #F3F3F3 *//
+ color:#fff;
height: 45px;
z-index: 9;
align-items: center;
@@ -109,7 +107,7 @@
}
.button {
- color: #b2b0c7;
+ color:#fff;
width: 40px;
height: 40px;
line-height: 40px;
@@ -128,7 +126,7 @@
.iconButton {
- color: #b2b0c7;
+ color: @Theme-Shade-Color;
width: 40px;
height: 40px;
display: flex;
diff --git a/src/components/Layout/L_Sider.js b/src/components/Layout/Sider.js
similarity index 88%
rename from src/components/Layout/L_Sider.js
rename to src/components/Layout/Sider.js
index ebd67ebc..c83360c8 100644
--- a/src/components/Layout/L_Sider.js
+++ b/src/components/Layout/Sider.js
@@ -1,10 +1,11 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
+import classnames from 'classnames'
import * as antd from 'antd'
import { withI18n, Trans } from '@lingui/react'
import ScrollBar from '../ScrollBar'
import { config } from 'utils'
-import styles from './L_Sider.less'
+import styles from './Sider.less'
import * as ycore from 'ycore';
import router from 'umi/router';
import {CustomIcons} from 'components'
@@ -13,7 +14,7 @@ import {CustomIcons} from 'components'
const userData = ycore.SDCP()
@withI18n()
-class L_Sider extends PureComponent {
+class Sider extends PureComponent {
constructor(props) {
super(props);
this.state = {
@@ -48,25 +49,10 @@ class L_Sider extends PureComponent {
if (ycore.DevOptions.StrictLightMode == false) {
return "dark"
}
- if (ycore.DevOptions.StrictLightMode == true && theme == "light") {
- return "light"
- }
- if (ycore.DevOptions.StrictLightMode == true && theme == "dark") {
- return "dark"
- }
- }
- UserIsPro(){
- if (userData.is_pro == 1){
- return true
- }
- return false
- }
- UserIsAdmin(){
- if (userData.admin == 1){
- return true
- }
- return false
+ return theme
}
+
+
handleClickMenu = e => {
e.key === 'SignOut' && ycore.LogoutCall()
e.key === 'settingpage' && router.push('/settings')
@@ -103,11 +89,11 @@ class L_Sider extends PureComponent {
theme={this.StrictMode()}
width="180"
collapsed={collapsed || false}
- className={styles.sider}
+ className={classnames(styles.sider, {[styles.darkmd]: this.isDarkMode()} )}
onMouseEnter={this.hover}
onMouseLeave={this.hover}
>
-
+
![]()
ycore.crouter.native('main')} src={collapsed? config.LogoPath : config.FullLogoPath } />
onCollapseChange(!collapsed)} icon={collapsed? (this.Balancer()? "right" : "double-right") : (this.Balancer()? "left" : "double-left") } />
- {this.UserIsPro()?
+ {ycore.booleanFix(userData.is_pro)?
{collapsed ? null : Boosted Posts }
@@ -135,7 +121,7 @@ class L_Sider extends PureComponent {
{collapsed ? null : General Settings}
- {this.UserIsAdmin()?
+ {ycore.booleanFix(userData.admin)?
{collapsed ? null : Admin Area}
@@ -169,7 +155,7 @@ class L_Sider extends PureComponent {
- {collapsed? null : }
+ {collapsed? null : }
@@ -179,7 +165,7 @@ class L_Sider extends PureComponent {
}
}
-L_Sider.propTypes = {
+Sider.propTypes = {
menus: PropTypes.array,
theme: PropTypes.string,
isMobile: PropTypes.bool,
@@ -188,4 +174,4 @@ L_Sider.propTypes = {
onCollapseChange: PropTypes.func,
}
-export default L_Sider
+export default Sider
diff --git a/src/components/Layout/L_Sider.less b/src/components/Layout/Sider.less
similarity index 81%
rename from src/components/Layout/L_Sider.less
rename to src/components/Layout/Sider.less
index 44dcbd2a..bb84ef16 100644
--- a/src/components/Layout/L_Sider.less
+++ b/src/components/Layout/Sider.less
@@ -30,7 +30,6 @@
.ant-btn:hover{
background: rgb(255,255,255);
background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.57) 95%);
-
}
}
}
@@ -44,7 +43,6 @@
z-index: 200;
vertical-align: middle;
:global{
-
.ant-btn {
border: none;
border-radius: unset;
@@ -65,25 +63,25 @@
}
.brand {
- display: flex;
- vertical-align: middle;
- padding: 5px;
- width: 100%;
- max-height: 50px;
-
-}
-
-.userInfo{
- font-family: "Poppins", sans-serif;
- align-items: center;
- text-align: center;
- h2{
- color: @LDarkMode-color
+ img{
+ display: flex;
+ vertical-align: middle;
+ padding: 5px;
+ margin: 7px auto 15px auto;
+ width: 100%;
+ max-height: 58px;
}
}
+.brand:hover{
+ img{
+ size: 9cm;
+ }
+}
+
.avatarFull{
width: 120px;
}
+
.avatar{
margin: 0 0 15px 0;
}
@@ -97,42 +95,68 @@
}
}
+.siderhead{
+ font-family: 'Source Sans Pro', sans-serif;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ ::first-letter{
+ margin-left: 7px;
+ }
+ height: 60px;
+ font-size: 17px;
+}
.siderwrapper {
border-color: transparent;
-
font-size: 13px;
font-family: "Poppins", sans-serif;
height: 100%;
width: 100%;
left: 0;
position: absolute;
+
:global {
- .ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
- :hover {
- background-color: rgb(80, 80, 80);
- color: #fff;
- }
- border-right: 1px solid transparent;
- }
.ant-layout-sider-dark {
background-color: @LDarkMode-backgroud;
color: @DarkMode-color;
+ .ant-menu-item{
+ color: @DarkMode-color;
+ }
+ .ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
+ :hover {
+ background-color: rgb(80, 80, 80);
+ color: #fff;
+ }
+ border-right: 1px solid transparent;
+ }
}
.ant-layout-sider-light {
- background-color: @LightMode-backgroud;
- color: @LightMode-color;
+ background-color: @Theme-SiderDeco-Backgroud;
+ color: @Theme-SiderDeco-Color;
+ .ant-menu-item{
+ color: @Theme-SiderDeco-Color;
+ }
+ .ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
+ :hover {
+ background-color: @Theme-Hover-Backgroud;
+ color: #fff;
+ }
+ border-right: 1px solid transparent;
+ }
}
}
}
.sider {
+ border-right: 1px solid #dbdbdb;
+ border-radius: 0 10px 10px 0 ;
+ &.darkmd {
+ border: none;
+ }
height: 100%;
z-index: 50;
:global {
- .ant-sider{
- background-color: #fff;
- }
.ant-menu-sub {
font-size: 14px;
-webkit-box-shadow: 13px 4px 34px 0px rgba(0, 0, 0, 0.005);
@@ -148,42 +172,21 @@
color: @LLightMode-color;
}
}
- .siderhead{
- font-family: 'Source Sans Pro', sans-serif;
- display: flex;
- align-items: center;
- justify-content: center;
- ::first-letter{
- margin-left: 7px;
- }
- height: 60px;
- font-size: 17px;
- }
- .sidercontainer{
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- }
.menuItems{
background-color: transparent;
- color: @LDarkMode-color;
margin-bottom: 8px;
width: 100%;
animation: fadein 0.5s;
:global {
.ant-menu-item-selected{
- background-color: rgba(82, 82, 82, 0.562);
+ background-color: transparent;
}
}
-
}
.menuItemsCollapsed{
background-color: transparent;
color: @LDarkMode-color;
-
width: 100%;
-
animation: fadein 0.5s;
:global {
.ant-menu-item {
@@ -197,9 +200,7 @@
background-color: rgba(82, 82, 82, 0.562);
}
}
-
}
-
.menuContainer {
height: 100%;
margin: 18px 0 8px 0;
@@ -209,17 +210,14 @@
}
overflow-x: hidden;
flex: 1;
-
&::-webkit-scrollbar-thumb {
background-color: transparent;
}
-
&:hover {
&::-webkit-scrollbar-thumb {
background-color: rgba(59, 59, 59, 0.2);
}
}
-
:global {
.ant-layout-sider-children {
display: flex;
@@ -245,13 +243,10 @@
font-size: 14px;
font-family: 'Source Sans Pro', sans-serif;
}
-
.ant-menu-dark .ant-menu-item a {
color: rgb(197, 197, 197);
}
-
}
-
}
}
.scrollbar-container {
diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js
index 4f80a351..9b89d66e 100644
--- a/src/components/Layout/index.js
+++ b/src/components/Layout/index.js
@@ -1,5 +1,5 @@
import Header from './Header'
-import L_Sider from './L_Sider'
+import Sider from './Sider'
import Control from './Control'
-export { Header, L_Sider, Control }
+export { Header, Sider, Control }
diff --git a/src/components/UserProfile/index.js b/src/components/UserProfile/index.js
index 02d7aa7d..bf74d818 100644
--- a/src/components/UserProfile/index.js
+++ b/src/components/UserProfile/index.js
@@ -28,7 +28,6 @@ const UserHeader = ({ values }) => {
- {ycore.DevOptions.ShowFunctionsLogs? 'si' : 'sad'}
{values.username}{ycore.booleanFix(values.verified)? : null}
{values.about}
diff --git a/src/layouts/BaseLayout.js b/src/layouts/BaseLayout.js
index e38d0f82..5ca4bcfd 100644
--- a/src/layouts/BaseLayout.js
+++ b/src/layouts/BaseLayout.js
@@ -12,6 +12,11 @@ import PublicLayout from './PublicLayout'
import PrimaryLayout from './PrimaryLayout'
import './BaseLayout.less'
+const bundle = localStorage.getItem('resource_bundle')
+import(`themes/${bundle}/index.less`)
+
+
+
const LayoutMap = {
primary: PrimaryLayout,
public: PublicLayout,
diff --git a/src/layouts/PrimaryLayout.js b/src/layouts/PrimaryLayout.js
index 47503904..4d75d811 100644
--- a/src/layouts/PrimaryLayout.js
+++ b/src/layouts/PrimaryLayout.js
@@ -5,16 +5,16 @@ import PropTypes from 'prop-types'
import withRouter from 'umi/withRouter'
import { connect } from 'dva'
import { MyLayout } from 'components'
+import classnames from 'classnames'
import { Layout, Drawer, Result, Button, Checkbox } from 'antd'
import { enquireScreen, unenquireScreen } from 'enquire-js'
import { config, pathMatchRegexp, langFromPath } from 'utils'
import store from 'store';
-import classNames from 'classnames'
import Error from '../pages/404'
import styles from './PrimaryLayout.less'
const { Content } = Layout
-const { Header, L_Sider, Control } = MyLayout
+const { Header, Sider, Control } = MyLayout
@withRouter
@connect(({ app, loading }) => ({ app, loading }))
@@ -44,17 +44,13 @@ class PrimaryLayout extends PureComponent {
}
})
}
-
componentWillUnmount() {
unenquireScreen(this.enquireHandler)
}
-
onCollapseChange = () => {
this.setState({ collapsed: !this.state.collapsed })
store.set('collapsed', this.state.collapsed)
-
}
-
ResByPassHandler() {
const {RemByPass} = this.state;
if (RemByPass == true){
@@ -118,7 +114,7 @@ class PrimaryLayout extends PureComponent {
},
}
- const LeftSiderProps = {
+ const SiderProps = {
menus,
theme,
isMobile,
@@ -133,7 +129,8 @@ class PrimaryLayout extends PureComponent {
}
const ContainerProps = {
theme,
- location
+ location,
+ collapsed,
}
const MobileWarning = () =>{
if (resbypass == false) {
@@ -149,19 +146,19 @@ class PrimaryLayout extends PureComponent {
return null
}
+
return (
-
-
-
-
-
+
+
+
+
{children}
-
+
diff --git a/src/layouts/PrimaryLayout.less b/src/layouts/PrimaryLayout.less
index 55b6e20f..e23ff3ed 100644
--- a/src/layouts/PrimaryLayout.less
+++ b/src/layouts/PrimaryLayout.less
@@ -19,12 +19,18 @@
}
.content {
- height: 100vh;
- /* width: 100vw; */
- margin: 5px 15px 5px 50px;
+ vertical-align: middle;
+ width: 100%;
+ float: right;
+ padding: 35px 25px 15px 60px;
+ transition: all 0.2s ease;
+ &.collapsed {
+ width: ~'calc(100% - 180px)';
+ transition: all 0.2s ease;
+ }
}
.container_light {
- background-color: #E2E6E9;
+ background-color: @Theme-Layout-Backgroud; //#E2E6E9;
transition: background-color 200ms linear;
}
// TODO: Complete full dark theme
diff --git a/src/models/app.js b/src/models/app.js
index cd0e4681..919dd28b 100644
--- a/src/models/app.js
+++ b/src/models/app.js
@@ -76,7 +76,7 @@ export default {
// Runtime
ycore.MakeBackup()
ycore.UpdateSDCP()
-
+ return
}
else if(!pathMatchRegexp(['','/login'], window.location.pathname)) {
console.log('REP')
@@ -84,12 +84,14 @@ export default {
ycore.LogoutCall()
}
else{
+ router.push({pathname: '/login',})
ycore.RefreshONCE()
}
}
- if(pathMatchRegexp(['/'], window.location.pathname)){
+ if(pathMatchRegexp([''], window.location.pathname)){
router.push({pathname: '/login',})
}
+
},
},
reducers: {
diff --git a/src/pages/about/index.js b/src/pages/about/index.js
new file mode 100644
index 00000000..b531c78f
--- /dev/null
+++ b/src/pages/about/index.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import styles from './index.less'
+import * as ycore from 'ycore'
+import * as antd from 'antd'
+
+
+class AppAbout extends React.Component {
+ render(){
+ return(
+
+

+
+
+ {ycore.AppInfo.name}
+ v{ycore.AppInfo.version}{ycore.DetectNoNStableBuild('TagComponent')}
+
+
+ )
+ }
+}
+export default AppAbout
\ No newline at end of file
diff --git a/src/pages/about/index.less b/src/pages/about/index.less
new file mode 100644
index 00000000..83de9678
--- /dev/null
+++ b/src/pages/about/index.less
@@ -0,0 +1,17 @@
+.aboutWrapper{
+ margin: auto;
+ max-width: 70vw;
+ width: 500px;
+ vertical-align: middle;
+ position: relative;
+ background-color: rgba(73, 72, 72, 0.349);
+ img{
+ width: 100%;
+ padding: 15px;
+ }
+}
+
+.appName {
+ font-family: "Poppins", sans-serif;
+ font-size: 27px;
+}
\ No newline at end of file
diff --git a/src/pages/main/index.js b/src/pages/main/index.js
index 83162799..465d43a1 100644
--- a/src/pages/main/index.js
+++ b/src/pages/main/index.js
@@ -37,7 +37,7 @@ class Main extends React.Component {
)
} catch (err) {
ycore.notifyError(err)
- const paylodd = {user: 'Error', ago: '', avatar: '', content: 'Error displaying data :/', publisher: '' }
+ const paylodd = {user: '', ago: '', avatar: '', content: '', publisher: '' }
return
}
@@ -48,15 +48,12 @@ class Main extends React.Component {
const { loading, createPost } = this.state;
return (
-
-
{createPost?
{this.handleRefreshList()}} /> : null}
{loading?
:
-
document.getElementById("PostsWrapper") } />
{this.renderFeedPosts()}
}
diff --git a/src/themes/light_ng/index.less b/src/themes/light_ng/index.less
new file mode 100644
index 00000000..19fa8803
--- /dev/null
+++ b/src/themes/light_ng/index.less
@@ -0,0 +1,11 @@
+@Theme-Shade-1: #ff971d;
+@Theme-Shade-2: #ffe8d6;
+@Theme-Shade-3: #f9f6f7;
+@Theme-Shade-4: #ffffff;
+
+@Theme-Shade-Color: #f9f6f7;
+@Theme-Layout-Backgroud: #FAFAFA;
+@Theme-SiderDeco-Backgroud: #4D91EA;
+@Theme-SiderDeco-Color: #f9f6f7;
+
+@Theme-Hover-Backgroud: rgba(107, 162, 235, 0.507);
\ No newline at end of file
diff --git a/src/themes/vars.less b/src/themes/vars.less
index 0005321e..42d23077 100644
--- a/src/themes/vars.less
+++ b/src/themes/vars.less
@@ -1,5 +1,6 @@
@import '~themes/default.less';
@import '~themes/mixin.less';
+@import '~themes/light_ng/index.less';
@DarkMode-backgroud_container: rgb(24, 26, 27);
@DarkMode-backgroud: #212121;