Skip to content

add Vulcan UI theme -- old #2880

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
daiyam wants to merge 2 commits into from
Closed

add Vulcan UI theme -- old #2880

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1cdac94
adding Nord theme and streamlining UI theming
daiyam Feb 7, 2019
9e1d279
add Vulcan UI theme
daiyam Feb 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 2 additions & 9 deletions browser/components/MarkdownPreview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import fs from 'fs'
import { render } from 'react-dom'
import Carousel from 'react-image-carousel'
import ConfigManager from '../main/lib/ConfigManager'
import uiThemes from 'browser/lib/ui-themes'

const { remote, shell } = require('electron')
const attachmentManagement = require('../main/lib/dataApi/attachmentManagement')
Expand Down Expand Up @@ -426,15 +427,7 @@ export default class MarkdownPreview extends React.Component {
getScrollBarStyle () {
const { theme } = this.props

switch (theme) {
case 'dark':
case 'solarized-dark':
case 'monokai':
case 'dracula':
return scrollBarDarkStyle
default:
return scrollBarStyle
}
return uiThemes.some(item => item.name === theme && item.isDark) ? scrollBarDarkStyle : scrollBarStyle
}

componentDidMount () {
Expand Down
198 changes: 66 additions & 132 deletions browser/components/NoteItem.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ body[data-theme="dark"]
color $ui-dark-text-color
.item-bottom-tagList-item
transition 0.15s
background-color alpha(#fff, 20%)
background-color alpha($ui-dark-tagList-backgroundColor, 20%)
color $ui-dark-text-color
&:active
transition 0.15s
Expand All @@ -207,7 +207,7 @@ body[data-theme="dark"]
color $ui-dark-text-color
.item-bottom-tagList-item
transition 0.15s
background-color alpha(white, 10%)
background-color alpha($ui-dark-tagList-backgroundColor, 10%)
color $ui-dark-text-color

.item-wrapper
Expand All @@ -223,13 +223,13 @@ body[data-theme="dark"]
.item-bottom-time
color $ui-dark-text-color
.item-bottom-tagList-item
background-color alpha(white, 10%)
background-color alpha($ui-dark-tagList-backgroundColor, 10%)
color $ui-dark-text-color
&:hover
background-color alpha($ui-dark-button--active-backgroundColor, 60%)
color #c0392b
color $ui-dark-button--hover-color
.item-bottom-tagList-item
background-color alpha(#fff, 20%)
background-color alpha($ui-dark-tagList-backgroundColor, 20%)

.item-title
color $ui-inactive-text-color
Expand Down Expand Up @@ -322,148 +322,82 @@ body[data-theme="solarized-dark"]
color $ui-inactive-text-color
vertical-align middle

body[data-theme="monokai"]
.root
border-color $ui-monokai-borderColor
background-color $ui-monokai-noteList-backgroundColor
apply-theme(theme)
body[data-theme={theme}]
.root
border-color get-theme-var(theme, 'borderColor')
background-color get-theme-var(theme, 'noteList-backgroundColor')

.item
border-color $ui-monokai-borderColor
background-color $ui-monokai-noteList-backgroundColor
&:hover
transition 0.15s
// background-color alpha($ui-monokai-noteList-backgroundColor, 20%)
color $ui-monokai-text-color
.item-title
.item-title-icon
.item-bottom-time
.item
border-color get-theme-var(theme, 'borderColor')
background-color get-theme-var(theme, 'noteList-backgroundColor')
&:hover
transition 0.15s
color $ui-monokai-text-color
.item-bottom-tagList-item
// background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 20%)
color get-theme-var(theme, 'text-color')
.item-title
.item-title-icon
.item-bottom-time
transition 0.15s
color get-theme-var(theme, 'text-color')
.item-bottom-tagList-item
transition 0.15s
background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 20%)
color get-theme-var(theme, 'text-color')
&:active
transition 0.15s
background-color alpha($ui-monokai-noteList-backgroundColor, 20%)
color $ui-monokai-text-color
&:active
transition 0.15s
background-color $ui-monokai-noteList-backgroundColor
color $ui-monokai-text-color
.item-title
.item-title-icon
.item-bottom-time
transition 0.15s
color $ui-monokai-text-color
.item-bottom-tagList-item
transition 0.15s
background-color alpha($ui-monokai-noteList-backgroundColor, 10%)
color $ui-monokai-text-color

.item-wrapper
border-color alpha($ui-monokai-button-backgroundColor, 60%)
background-color get-theme-var(theme, 'noteList-backgroundColor')
color get-theme-var(theme, 'text-color')
.item-title
.item-title-icon
.item-bottom-time
transition 0.15s
color get-theme-var(theme, 'text-color')
.item-bottom-tagList-item
transition 0.15s
background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 10%)
color get-theme-var(theme, 'text-color')

.item--active
border-color $ui-monokai-borderColor
background-color $ui-monokai-button-backgroundColor
.item-wrapper
border-color transparent
.item-title
.item-title-icon
.item-bottom-time
color $ui-monokai-active-color
.item-bottom-tagList-item
background-color alpha(white, 10%)
color $ui-monokai-text-color
&:hover
// background-color alpha($ui-monokai-button--active-backgroundColor, 60%)
color #f92672
.item-bottom-tagList-item
background-color alpha(#fff, 20%)

.item-title
color $ui-inactive-text-color

.item-title-icon
color $ui-inactive-text-color

.item-title-empty
color $ui-inactive-text-color

.item-bottom-tagList-item
background-color alpha($ui-dark-button--active-backgroundColor, 40%)
color $ui-inactive-text-color

.item-bottom-tagList-empty
color $ui-inactive-text-color
vertical-align middle
border-color alpha(get-theme-var(theme, 'button-backgroundColor'), 60%)

body[data-theme="dracula"]
.root
border-color $ui-dracula-borderColor
background-color $ui-dracula-noteList-backgroundColor

.item
border-color $ui-dracula-borderColor
background-color $ui-dracula-noteList-backgroundColor
&:hover
transition 0.15s
// background-color alpha($ui-dracula-noteList-backgroundColor, 20%)
color $ui-dracula-text-color
.item--active
border-color get-theme-var(theme, 'borderColor')
background-color get-theme-var(theme, 'button-backgroundColor')
.item-wrapper
border-color transparent
.item-title
.item-title-icon
.item-bottom-time
transition 0.15s
color $ui-dracula-text-color
color get-theme-var(theme, 'active-color')
.item-bottom-tagList-item
transition 0.15s
background-color alpha($ui-dracula-noteList-backgroundColor, 20%)
color $ui-dracula-text-color
&:active
transition 0.15s
background-color $ui-dracula-noteList-backgroundColor
color $ui-dracula-text-color
.item-title
.item-title-icon
.item-bottom-time
transition 0.15s
color $ui-dracula-text-color
.item-bottom-tagList-item
transition 0.15s
background-color alpha($ui-dracula-noteList-backgroundColor, 10%)
color $ui-dracula-text-color
background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%)
color get-theme-var(theme, 'text-color')
&:hover
// background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
color get-theme-var(theme, 'button--hover-color')
.item-bottom-tagList-item
background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%)

.item-wrapper
border-color alpha($ui-dracula-button-backgroundColor, 60%)

.item--active
border-color $ui-dracula-borderColor
background-color $ui-dracula-button-backgroundColor
.item-wrapper
border-color transparent
.item-title
color $ui-inactive-text-color

.item-title-icon
.item-bottom-time
color $ui-dracula-active-color
.item-bottom-tagList-item
background-color alpha(#f8f8f2, 10%)
color $ui-dracula-text-color
&:hover
// background-color alpha($ui-dracula-button--active-backgroundColor, 60%)
color #ff79c6
.item-bottom-tagList-item
background-color alpha(#f8f8f2, 20%)
color $ui-inactive-text-color

.item-title
color $ui-inactive-text-color
.item-title-empty
color $ui-inactive-text-color

.item-title-icon
color $ui-inactive-text-color
.item-bottom-tagList-item
background-color alpha($ui-dark-button--active-backgroundColor, 40%)
color $ui-inactive-text-color

.item-title-empty
color $ui-inactive-text-color
.item-bottom-tagList-empty
color $ui-inactive-text-color
vertical-align middle

.item-bottom-tagList-item
background-color alpha($ui-dark-button--active-backgroundColor, 40%)
color $ui-inactive-text-color
for theme in 'dracula'
apply-theme(theme)

.item-bottom-tagList-empty
color $ui-inactive-text-color
vertical-align middle
for theme in $themes
apply-theme(theme)
Loading