mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-20 13:11:44 +00:00
adding Nord theme and streamlining UI theming
This commit is contained in:
Baptiste Augrain
@@ -128,20 +128,10 @@ colorDarkControl()
|
||||
background-color $ui-dark-backgroundColor
|
||||
color $ui-dark-text-color
|
||||
|
||||
colorSolarizedDarkControl()
|
||||
colorThemedControl(theme)
|
||||
border none
|
||||
background-color $ui-solarized-dark-button-backgroundColor
|
||||
color $ui-solarized-dark-text-color
|
||||
|
||||
colorMonokaiControl()
|
||||
border none
|
||||
background-color $ui-monokai-button-backgroundColor
|
||||
color $ui-monokai-text-color
|
||||
|
||||
colorDraculaControl()
|
||||
border none
|
||||
background-color $ui-dracula-button-backgroundColor
|
||||
color $ui-dracula-text-color
|
||||
background-color get-theme-var(theme, 'button-backgroundColor')
|
||||
color get-theme-var(theme, 'text-color')
|
||||
|
||||
body[data-theme="dark"]
|
||||
.root
|
||||
@@ -170,84 +160,36 @@ body[data-theme="dark"]
|
||||
select, .group-section-control-input
|
||||
colorDarkControl()
|
||||
|
||||
apply-theme(theme)
|
||||
body[data-theme={theme}]
|
||||
.root
|
||||
color get-theme-var(theme, 'text-color')
|
||||
|
||||
body[data-theme="solarized-dark"]
|
||||
.root
|
||||
color $ui-solarized-dark-text-color
|
||||
.group-header
|
||||
color get-theme-var(theme, 'text-color')
|
||||
border-color get-theme-var(theme, 'borderColor')
|
||||
|
||||
.group-header
|
||||
color $ui-solarized-dark-text-color
|
||||
border-color $ui-solarized-dark-borderColor
|
||||
.group-header2
|
||||
color get-theme-var(theme, 'text-color')
|
||||
|
||||
.group-header2
|
||||
color $ui-solarized-dark-text-color
|
||||
.group-section-control-input
|
||||
border-color get-theme-var(theme, 'borderColor')
|
||||
|
||||
.group-section-control-input
|
||||
border-color $ui-solarized-dark-borderColor
|
||||
.group-control
|
||||
border-color get-theme-var(theme, 'borderColor')
|
||||
.group-control-leftButton
|
||||
colorDarkDefaultButton()
|
||||
border-color get-theme-var(theme, 'borderColor')
|
||||
.group-control-rightButton
|
||||
colorThemedPrimaryButton(theme)
|
||||
.group-hint
|
||||
colorThemedControl(theme)
|
||||
.group-section-control
|
||||
select, .group-section-control-input
|
||||
colorThemedControl(theme)
|
||||
|
||||
.group-control
|
||||
border-color $ui-solarized-dark-borderColor
|
||||
.group-control-leftButton
|
||||
colorDarkDefaultButton()
|
||||
border-color $ui-solarized-dark-borderColor
|
||||
.group-control-rightButton
|
||||
colorSolarizedDarkPrimaryButton()
|
||||
.group-hint
|
||||
colorSolarizedDarkControl()
|
||||
.group-section-control
|
||||
select, .group-section-control-input
|
||||
colorSolarizedDarkControl()
|
||||
for theme in 'solarized-dark' 'dracula'
|
||||
apply-theme(theme)
|
||||
|
||||
body[data-theme="monokai"]
|
||||
.root
|
||||
color $ui-monokai-text-color
|
||||
|
||||
.group-header
|
||||
color $ui-monokai-text-color
|
||||
border-color $ui-monokai-borderColor
|
||||
|
||||
.group-header2
|
||||
color $ui-monokai-text-color
|
||||
|
||||
.group-section-control-input
|
||||
border-color $ui-monokai-borderColor
|
||||
|
||||
.group-control
|
||||
border-color $ui-monokai-borderColor
|
||||
.group-control-leftButton
|
||||
colorDarkDefaultButton()
|
||||
border-color $ui-monokai-borderColor
|
||||
.group-control-rightButton
|
||||
colorMonokaiPrimaryButton()
|
||||
.group-hint
|
||||
colorMonokaiControl()
|
||||
.group-section-control
|
||||
select, .group-section-control-input
|
||||
colorMonokaiControl()
|
||||
|
||||
body[data-theme="dracula"]
|
||||
.root
|
||||
color $ui-dracula-text-color
|
||||
|
||||
.group-header
|
||||
color $ui-dracula-text-color
|
||||
border-color $ui-dracula-borderColor
|
||||
|
||||
.group-header2
|
||||
color $ui-dracula-text-color
|
||||
|
||||
.group-section-control-input
|
||||
border-color $ui-dracula-borderColor
|
||||
|
||||
.group-control
|
||||
border-color $ui-dracula-borderColor
|
||||
.group-control-leftButton
|
||||
colorDarkDefaultButton()
|
||||
border-color $ui-dracula-borderColor
|
||||
.group-control-rightButton
|
||||
colorDraculaPrimaryButton()
|
||||
.group-hint
|
||||
colorDraculaControl()
|
||||
.group-section-control
|
||||
select, .group-section-control-input
|
||||
colorDraculaControl()
|
||||
for theme in $themes
|
||||
apply-theme(theme)
|
||||
@@ -30,20 +30,15 @@ body[data-theme="dark"]
|
||||
p
|
||||
color $ui-dark-text-color
|
||||
|
||||
body[data-theme="solarized-dark"]
|
||||
.root
|
||||
color $ui-solarized-dark-text-color
|
||||
p
|
||||
color $ui-solarized-dark-text-color
|
||||
apply-theme(theme)
|
||||
body[data-theme={theme}]
|
||||
.root
|
||||
color get-theme-var(theme, 'text-color')
|
||||
p
|
||||
color get-theme-var(theme, 'text-color')
|
||||
|
||||
body[data-theme="monokai"]
|
||||
.root
|
||||
color $ui-monokai-text-color
|
||||
p
|
||||
color $ui-monokai-text-color
|
||||
for theme in 'solarized-dark' 'dracula'
|
||||
apply-theme(theme)
|
||||
|
||||
body[data-theme="dracula"]
|
||||
.root
|
||||
color $ui-dracula-text-color
|
||||
p
|
||||
color $ui-dracula-text-color
|
||||
for theme in $themes
|
||||
apply-theme(theme)
|
||||
@@ -107,73 +107,32 @@ body[data-theme="dark"]
|
||||
.folderItem-right-dangerButton
|
||||
colorDarkDangerButton()
|
||||
|
||||
apply-theme(theme)
|
||||
body[data-theme={theme}]
|
||||
.folderItem
|
||||
&:hover
|
||||
background-color get-theme-var(theme, 'button-backgroundColor')
|
||||
|
||||
.folderItem-left-danger
|
||||
color $danger-color
|
||||
|
||||
body[data-theme="solarized-dark"]
|
||||
.folderItem
|
||||
&:hover
|
||||
background-color $ui-solarized-dark-button-backgroundColor
|
||||
.folderItem-left-key
|
||||
color $ui-dark-inactive-text-color
|
||||
|
||||
.folderItem-left-danger
|
||||
color $danger-color
|
||||
.folderItem-left-colorButton
|
||||
colorThemedPrimaryButton(theme)
|
||||
|
||||
.folderItem-left-key
|
||||
color $ui-dark-inactive-text-color
|
||||
.folderItem-right-button
|
||||
colorThemedPrimaryButton(theme)
|
||||
|
||||
.folderItem-left-colorButton
|
||||
colorSolarizedDarkPrimaryButton()
|
||||
.folderItem-right-confirmButton
|
||||
colorThemedPrimaryButton(theme)
|
||||
|
||||
.folderItem-right-button
|
||||
colorSolarizedDarkPrimaryButton()
|
||||
.folderItem-right-dangerButton
|
||||
colorThemedPrimaryButton(theme)
|
||||
|
||||
.folderItem-right-confirmButton
|
||||
colorSolarizedDarkPrimaryButton()
|
||||
for theme in 'solarized-dark' 'dracula'
|
||||
apply-theme(theme)
|
||||
|
||||
.folderItem-right-dangerButton
|
||||
colorSolarizedDarkPrimaryButton()
|
||||
|
||||
body[data-theme="monokai"]
|
||||
.folderItem
|
||||
&:hover
|
||||
background-color $ui-monokai-button-backgroundColor
|
||||
|
||||
.folderItem-left-danger
|
||||
color $danger-color
|
||||
|
||||
.folderItem-left-key
|
||||
color $ui-dark-inactive-text-color
|
||||
|
||||
.folderItem-left-colorButton
|
||||
colorMonokaiPrimaryButton()
|
||||
|
||||
.folderItem-right-button
|
||||
colorMonokaiPrimaryButton()
|
||||
|
||||
.folderItem-right-confirmButton
|
||||
colorMonokaiPrimaryButton()
|
||||
|
||||
.folderItem-right-dangerButton
|
||||
colorMonokaiPrimaryButton()
|
||||
|
||||
body[data-theme="dracula"]
|
||||
.folderItem
|
||||
&:hover
|
||||
background-color $ui-dracula-button-backgroundColor
|
||||
|
||||
.folderItem-left-danger
|
||||
color $danger-color
|
||||
|
||||
.folderItem-left-key
|
||||
color $ui-dark-inactive-text-color
|
||||
|
||||
.folderItem-left-colorButton
|
||||
colorDraculaPrimaryButton()
|
||||
|
||||
.folderItem-right-button
|
||||
colorDraculaPrimaryButton()
|
||||
|
||||
.folderItem-right-confirmButton
|
||||
colorDraculaPrimaryButton()
|
||||
|
||||
.folderItem-right-dangerButton
|
||||
colorDraculaPrimaryButton()
|
||||
for theme in $themes
|
||||
apply-theme(theme)
|
||||
@@ -61,24 +61,16 @@ body[data-theme="dark"]
|
||||
.root
|
||||
color alpha($tab--dark-text-color, 80%)
|
||||
|
||||
apply-theme(theme)
|
||||
body[data-theme={theme}]
|
||||
.root
|
||||
color get-theme-var(theme, 'text-color')
|
||||
.list
|
||||
a
|
||||
color get-theme-var(theme, 'active-color')
|
||||
|
||||
body[data-theme="solarized-dark"]
|
||||
.root
|
||||
color $ui-solarized-dark-text-color
|
||||
.list
|
||||
a
|
||||
color $ui-solarized-dark-active-color
|
||||
for theme in 'solarized-dark' 'dracula'
|
||||
apply-theme(theme)
|
||||
|
||||
body[data-theme="monokai"]
|
||||
.root
|
||||
color $ui-monokai-text-color
|
||||
.list
|
||||
a
|
||||
color $ui-monokai-active-color
|
||||
|
||||
body[data-theme="dracula"]
|
||||
.root
|
||||
color $ui-dracula-text-color
|
||||
.list
|
||||
a
|
||||
color $ui-dracula-active-color
|
||||
for theme in $themes
|
||||
apply-theme(theme)
|
||||
@@ -64,102 +64,31 @@ top-bar--height = 50px
|
||||
margin-top 10px
|
||||
overflow-y auto
|
||||
|
||||
body[data-theme="dark"]
|
||||
.root
|
||||
modalDark()
|
||||
apply-theme(theme)
|
||||
body[data-theme={theme}]
|
||||
.root
|
||||
background-color transparent
|
||||
.top-bar
|
||||
background-color transparent
|
||||
border-color get-theme-var(theme, 'borderColor')
|
||||
p
|
||||
color get-theme-var(theme, 'text-color')
|
||||
.nav
|
||||
background-color transparent
|
||||
border-color get-theme-var(theme, 'borderColor')
|
||||
.nav-button
|
||||
background-color transparent
|
||||
color get-theme-var(theme, 'text-color')
|
||||
&:hover
|
||||
color get-theme-var(theme, 'text-color')
|
||||
|
||||
.top-bar
|
||||
background-color transparent
|
||||
border-color #4A4D52
|
||||
p
|
||||
color $tab--dark-text-color
|
||||
.nav-button--active
|
||||
@extend .nav-button
|
||||
color get-theme-var(theme, 'button--active-color')
|
||||
background-color get-theme-var(theme, 'button--active-backgroundColor')
|
||||
|
||||
.nav
|
||||
background-color transparent
|
||||
border-color $ui-dark-borderColor
|
||||
for theme in 'dark' 'solarized-dark' 'dracula'
|
||||
apply-theme(theme)
|
||||
|
||||
.nav-button
|
||||
background-color transparent
|
||||
color $tab--dark-text-color
|
||||
&:hover
|
||||
color $ui-dark-text-color
|
||||
|
||||
.nav-button--active
|
||||
@extend .nav-button
|
||||
color white
|
||||
background-color $dark-primary-button-background--active
|
||||
&:hover
|
||||
color white
|
||||
|
||||
|
||||
body[data-theme="solarized-dark"]
|
||||
.root
|
||||
background-color transparent
|
||||
.top-bar
|
||||
background-color transparent
|
||||
border-color $ui-solarized-dark-borderColor
|
||||
p
|
||||
color $ui-solarized-dark-text-color
|
||||
.nav
|
||||
background-color transparent
|
||||
border-color $ui-solarized-dark-borderColor
|
||||
.nav-button
|
||||
background-color transparent
|
||||
color $ui-solarized-dark-text-color
|
||||
&:hover
|
||||
color $ui-solarized-dark-text-color
|
||||
|
||||
.nav-button--active
|
||||
@extend .nav-button
|
||||
color $ui-solarized-dark-button--active-color
|
||||
background-color $ui-solarized-dark-button--active-backgroundColor
|
||||
&:hover
|
||||
color white
|
||||
|
||||
body[data-theme="monokai"]
|
||||
.root
|
||||
background-color transparent
|
||||
.top-bar
|
||||
background-color transparent
|
||||
border-color $ui-monokai-borderColor
|
||||
p
|
||||
color $ui-monokai-text-color
|
||||
.nav
|
||||
background-color transparent
|
||||
border-color $ui-monokai-borderColor
|
||||
.nav-button
|
||||
background-color transparent
|
||||
color $ui-monokai-text-color
|
||||
&:hover
|
||||
color $ui-monokai-text-color
|
||||
|
||||
.nav-button--active
|
||||
@extend .nav-button
|
||||
color $ui-monokai-button--active-color
|
||||
background-color $ui-monokai-button--active-backgroundColor
|
||||
&:hover
|
||||
color white
|
||||
|
||||
body[data-theme="dracula"]
|
||||
.root
|
||||
background-color transparent
|
||||
.top-bar
|
||||
background-color transparent
|
||||
border-color $ui-dracula-borderColor
|
||||
p
|
||||
color $ui-dracula-text-color
|
||||
.nav
|
||||
background-color transparent
|
||||
border-color $ui-dracula-borderColor
|
||||
.nav-button
|
||||
background-color transparent
|
||||
color $ui-dracula-text-color
|
||||
&:hover
|
||||
color $ui-dracula-text-color
|
||||
|
||||
.nav-button--active
|
||||
@extend .nav-button
|
||||
color $ui-dracula-button--active-color
|
||||
background-color $ui-dracula-button--active-backgroundColor
|
||||
&:hover
|
||||
color #f8f8f2
|
||||
for theme in $themes
|
||||
apply-theme(theme)
|
||||
@@ -149,66 +149,25 @@ body[data-theme="default"], body[data-theme="white"]
|
||||
.snippet-item-selected
|
||||
background darken($ui-backgroundColor, 5)
|
||||
|
||||
body[data-theme="dark"]
|
||||
.snippets
|
||||
background $ui-dark-backgroundColor
|
||||
.snippet-item
|
||||
color white
|
||||
&::after
|
||||
background $ui-dark-borderColor
|
||||
&:hover
|
||||
background darken($ui-dark-backgroundColor, 5)
|
||||
.snippet-item-selected
|
||||
background darken($ui-dark-backgroundColor, 5)
|
||||
.snippet-detail
|
||||
color white
|
||||
.group-control-button
|
||||
colorDarkPrimaryButton()
|
||||
apply-theme(theme)
|
||||
body[data-theme={theme}]
|
||||
.snippets
|
||||
background get-theme-var(theme, 'backgroundColor')
|
||||
.snippet-item
|
||||
color get-theme-var(theme, 'text-color')
|
||||
&::after
|
||||
background get-theme-var(theme, 'borderColor')
|
||||
&:hover
|
||||
background darken(get-theme-var(theme, 'backgroundColor'), 5)
|
||||
.snippet-item-selected
|
||||
background darken(get-theme-var(theme, 'backgroundColor'), 5)
|
||||
.snippet-detail
|
||||
color get-theme-var(theme, 'text-color')
|
||||
.group-control-button
|
||||
colorThemedPrimaryButton(theme)
|
||||
|
||||
body[data-theme="solarized-dark"]
|
||||
.snippets
|
||||
background $ui-solarized-dark-backgroundColor
|
||||
.snippet-item
|
||||
color white
|
||||
&::after
|
||||
background $ui-solarized-dark-borderColor
|
||||
&:hover
|
||||
background darken($ui-solarized-dark-backgroundColor, 5)
|
||||
.snippet-item-selected
|
||||
background darken($ui-solarized-dark-backgroundColor, 5)
|
||||
.snippet-detail
|
||||
color white
|
||||
.group-control-button
|
||||
colorSolarizedDarkPrimaryButton()
|
||||
for theme in 'dark' 'solarized-dark' 'dracula'
|
||||
apply-theme(theme)
|
||||
|
||||
body[data-theme="monokai"]
|
||||
.snippets
|
||||
background $ui-monokai-backgroundColor
|
||||
.snippet-item
|
||||
color White
|
||||
&::after
|
||||
background $ui-monokai-borderColor
|
||||
&:hover
|
||||
background darken($ui-monokai-backgroundColor, 5)
|
||||
.snippet-item-selected
|
||||
background darken($ui-monokai-backgroundColor, 5)
|
||||
.snippet-detail
|
||||
color white
|
||||
.group-control-button
|
||||
colorMonokaiPrimaryButton()
|
||||
|
||||
body[data-theme="dracula"]
|
||||
.snippets
|
||||
background $ui-dracula-backgroundColor
|
||||
.snippet-item
|
||||
color #f8f8f2
|
||||
&::after
|
||||
background $ui-dracula-borderColor
|
||||
&:hover
|
||||
background darken($ui-dracula-backgroundColor, 5)
|
||||
.snippet-item-selected
|
||||
background darken($ui-dracula-backgroundColor, 5)
|
||||
.snippet-detail
|
||||
color #f8f8f2
|
||||
.group-control-button
|
||||
colorDraculaPrimaryButton()
|
||||
for theme in $themes
|
||||
apply-theme(theme)
|
||||
@@ -159,118 +159,47 @@ body[data-theme="dark"]
|
||||
colorDarkDefaultButton()
|
||||
border-color $ui-dark-borderColor
|
||||
|
||||
apply-theme(theme)
|
||||
body[data-theme={theme}]
|
||||
.root
|
||||
color get-theme-var(theme, 'text-color')
|
||||
|
||||
.folderList-item
|
||||
border-bottom get-theme-var(theme, 'borderColor')
|
||||
|
||||
body[data-theme="solarized-dark"]
|
||||
.root
|
||||
color $ui-solarized-dark-text-color
|
||||
.folderList-empty
|
||||
color get-theme-var(theme, 'text-color')
|
||||
|
||||
.folderList-item
|
||||
border-bottom $ui-solarized-dark-borderColor
|
||||
.list-empty
|
||||
color get-theme-var(theme, 'text-color')
|
||||
.list-control-addStorageButton
|
||||
border-color get-theme-var(theme, 'button-backgroundColor')
|
||||
background-color get-theme-var(theme, 'button-backgroundColor')
|
||||
color get-theme-var(theme, 'text-color')
|
||||
|
||||
.folderList-empty
|
||||
color $ui-solarized-dark-text-color
|
||||
.addStorage-header
|
||||
color get-theme-var(theme, 'text-color')
|
||||
border-color get-theme-var(theme, 'borderColor')
|
||||
|
||||
.list-empty
|
||||
color $ui-solarized-dark-text-color
|
||||
.list-control-addStorageButton
|
||||
border-color $ui-solarized-dark-button-backgroundColor
|
||||
background-color $ui-solarized-dark-button-backgroundColor
|
||||
color $ui-solarized-dark-text-color
|
||||
.addStorage-body-section-name-input
|
||||
border-color $get-theme-var(theme, 'borderColor')
|
||||
|
||||
.addStorage-header
|
||||
color $ui-solarized-dark-text-color
|
||||
border-color $ui-solarized-dark-borderColor
|
||||
.addStorage-body-section-type-description
|
||||
color get-theme-var(theme, 'text-color')
|
||||
|
||||
.addStorage-body-section-name-input
|
||||
border-color $$ui-solarized-dark-borderColor
|
||||
.addStorage-body-section-path-button
|
||||
colorPrimaryButton()
|
||||
.addStorage-body-control
|
||||
border-color get-theme-var(theme, 'borderColor')
|
||||
|
||||
.addStorage-body-section-type-description
|
||||
color $ui-solarized-dark-text-color
|
||||
.addStorage-body-control-createButton
|
||||
colorDarkPrimaryButton()
|
||||
.addStorage-body-control-cancelButton
|
||||
colorDarkDefaultButton()
|
||||
border-color get-theme-var(theme, 'borderColor')
|
||||
|
||||
.addStorage-body-section-path-button
|
||||
colorPrimaryButton()
|
||||
.addStorage-body-control
|
||||
border-color $ui-solarized-dark-borderColor
|
||||
for theme in 'solarized-dark' 'dracula'
|
||||
apply-theme(theme)
|
||||
|
||||
.addStorage-body-control-createButton
|
||||
colorDarkPrimaryButton()
|
||||
.addStorage-body-control-cancelButton
|
||||
colorDarkDefaultButton()
|
||||
border-color $ui-solarized-dark-borderColor
|
||||
|
||||
body[data-theme="monokai"]
|
||||
.root
|
||||
color $ui-monokai-text-color
|
||||
|
||||
.folderList-item
|
||||
border-bottom $ui-monokai-borderColor
|
||||
|
||||
.folderList-empty
|
||||
color $ui-monokai-text-color
|
||||
|
||||
.list-empty
|
||||
color $ui-monokai-text-color
|
||||
.list-control-addStorageButton
|
||||
border-color $ui-monokai-button-backgroundColor
|
||||
background-color $ui-monokai-button-backgroundColor
|
||||
color $ui-monokai-text-color
|
||||
|
||||
.addStorage-header
|
||||
color $ui-monokai-text-color
|
||||
border-color $ui-monokai-borderColor
|
||||
|
||||
.addStorage-body-section-name-input
|
||||
border-color $$ui-monokai-borderColor
|
||||
|
||||
.addStorage-body-section-type-description
|
||||
color $ui-monokai-text-color
|
||||
|
||||
.addStorage-body-section-path-button
|
||||
colorPrimaryButton()
|
||||
.addStorage-body-control
|
||||
border-color $ui-monokai-borderColor
|
||||
|
||||
.addStorage-body-control-createButton
|
||||
colorDarkPrimaryButton()
|
||||
.addStorage-body-control-cancelButton
|
||||
colorDarkDefaultButton()
|
||||
border-color $ui-monokai-borderColor
|
||||
|
||||
body[data-theme="dracula"]
|
||||
.root
|
||||
color $ui-dracula-text-color
|
||||
|
||||
.folderList-item
|
||||
border-bottom $ui-dracula-borderColor
|
||||
|
||||
.folderList-empty
|
||||
color $ui-dracula-text-color
|
||||
|
||||
.list-empty
|
||||
color $ui-dracula-text-color
|
||||
.list-control-addStorageButton
|
||||
border-color $ui-dracula-button-backgroundColor
|
||||
background-color $ui-dracula-button-backgroundColor
|
||||
color $ui-dracula-text-color
|
||||
|
||||
.addStorage-header
|
||||
color $ui-dracula-text-color
|
||||
border-color $ui-dracula-borderColor
|
||||
|
||||
.addStorage-body-section-name-input
|
||||
border-color $$ui-dracula-borderColor
|
||||
|
||||
.addStorage-body-section-type-description
|
||||
color $ui-dracula-text-color
|
||||
|
||||
.addStorage-body-section-path-button
|
||||
colorPrimaryButton()
|
||||
.addStorage-body-control
|
||||
border-color $ui-dracula-borderColor
|
||||
|
||||
.addStorage-body-control-createButton
|
||||
colorDarkPrimaryButton()
|
||||
.addStorage-body-control-cancelButton
|
||||
colorDarkDefaultButton()
|
||||
border-color $ui-dracula-borderColor
|
||||
for theme in $themes
|
||||
apply-theme(theme)
|
||||
@@ -12,6 +12,7 @@ import _ from 'lodash'
|
||||
import i18n from 'browser/lib/i18n'
|
||||
import { getLanguages } from 'browser/lib/Languages'
|
||||
import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily'
|
||||
import uiThemes from 'browser/lib/ui-themes'
|
||||
|
||||
const OSX = global.process.platform === 'darwin'
|
||||
|
||||
@@ -197,12 +198,20 @@ class UiTab extends React.Component {
|
||||
onChange={(e) => this.handleUIChange(e)}
|
||||
ref='uiTheme'
|
||||
>
|
||||
<option value='default'>{i18n.__('Default')}</option>
|
||||
<option value='white'>{i18n.__('White')}</option>
|
||||
<option value='solarized-dark'>{i18n.__('Solarized Dark')}</option>
|
||||
<option value='monokai'>{i18n.__('Monokai')}</option>
|
||||
<option value='dracula'>{i18n.__('Dracula')}</option>
|
||||
<option value='dark'>{i18n.__('Dark')}</option>
|
||||
<optgroup label='Light Themes'>
|
||||
{
|
||||
uiThemes.filter(theme => !theme.isDark).sort((a, b) => a.label.localeCompare(b.label)).map(theme => {
|
||||
return (<option value={theme.name} key={theme.name}>{theme.label}</option>)
|
||||
})
|
||||
}
|
||||
</optgroup>
|
||||
<optgroup label='Dark Themes'>
|
||||
{
|
||||
uiThemes.filter(theme => theme.isDark).sort((a, b) => a.label.localeCompare(b.label)).map(theme => {
|
||||
return (<option value={theme.name} key={theme.name}>{theme.label}</option>)
|
||||
})
|
||||
}
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user