Boostnote/browser/styles/theme/dark.styl

@import '../vars'

themeDarkBackground = lighten(#212327, 5%)
themeDarkModal = lighten(themeDarkBackground, 0%)
themeDarkList = darken(themeDarkBackground, 25%)
themeDarkPreview = #181818
themeDarkSidebar = darken(themeDarkBackground, 45%)
themeDarkText = #DDDDDD
themeDarkBorder = lighten(themeDarkBackground, 20%)
themeDarkTopicColor = #369dcd
themeDarkTooltip = rgba(0, 0, 0, 0.7)
themeDarkFocusText = #FFFFFF
themeDarkFocusButton = lighten(themeDarkTopicColor, 30%)
themeDarkBoxShadow = alpha(lighten(themeDarkTopicColor, 10%), 0.4);

body[data-theme="dark"]
  .Main
    .ArticleNavigator .userInfo .settingBtn .tooltip,
    .ArticleNavigator .ArticleNavigator-folders .ArticleNavigator-folders-header .addBtn .tooltip,
    .ArticleTopBar>.ArticleTopBar-left>.ArticleTopBar-left-search .tooltip,
    .ArticleTopBar>.ArticleTopBar-left .ArticleTopBar-left-control button.ArticleTopBar-left-control-new-post-button .tooltip
    .ArticleTopBar>.ArticleTopBar-right>button .tooltip,
    .ArticleTopBar>.ArticleTopBar-right>.ArticleTopBar-right-links-button-dropdown,
    .ArticleDetail .ArticleDetail-info .ArticleDetail-info-control>button .tooltip,
    .ArticleDetail .ArticleDetail-info .ArticleDetail-info-control .ShareButton-open-button .tooltip {
      background-color themeDarkTooltip
    }

    .ArticleNavigator
      border-color lighten(themeDarkBorder, 10%)
      background-color themeDarkSidebar

      .userInfo
        border-color themeDarkBorder

        .userName
          color themeDarkText

      .ArticleNavigator-folders
        border-color lighten(themeDarkBorder, 10%)
        background-color themeDarkSidebar

        .ArticleNavigator-folders-header
          border-color themeDarkBorder

          .title
            color themeDarkText

        .folderList,
        .folderList>button
          color themeDarkText

        .folderList>button
          transition 0.1s

          &:hover
            background-color lighten(themeDarkSidebar, 10%)

          &.active,
          $:active
            background-color darken(brandColor, 15%)

      .userInfo .settingBtn,
      .ArticleNavigator-folders .ArticleNavigator-folders-header .addBtn
        transition 0.1s
        color themeDarkText
        border none
        background-color lighten(themeDarkBackground, 10%)

      .userInfo .settingBtn:hover,
      .ArticleNavigator-folders .ArticleNavigator-folders-header .addBtn:hover
        background-color themeDarkTopicColor

      .userInfo .settingBtn:focus,
      .ArticleNavigator-folders .ArticleNavigator-folders-header .addBtn:focus
        background-color darken(themeDarkTopicColor, 20%)

    .ArticleTopBar
      color themeDarkText
      background-color themeDarkBackground

      .ArticleTopBar-left
        .ArticleTopBar-left-search input
          color themeDarkText
          background-color lighten(themeDarkBackground, 10%)

        .ArticleTopBar-left-control button.ArticleTopBar-left-control-new-post-button
          color themeDarkText
          background-color lighten(themeDarkBackground, 10%)

          &:hover
            color themeDarkText
            background-color themeDarkTopicColor

          &:focus
            color themeDarkText
            background-color darken(themeDarkTopicColor, 20%)

      .ArticleTopBar-right
        &>button
          color themeDarkText
          border none
          background-color lighten(themeDarkBackground, 10%)

          &:hover
            color themeDarkText
            background-color themeDarkTopicColor

          &:focus
            color themeDarkText
            background-color darken(themeDarkTopicColor, 20%)

    .ArticleList
      color themeDarkText
      border-color themeDarkBorder
      background-color themeDarkList

      .ArticleList-item
        color themeDarkText
        background-color themeDarkList

        &:hover
          background-color lighten(themeDarkList, 5%)

      .divider
        border-color themeDarkBorder

    .ArticleDetail
      color themeDarkText
      border-color themeDarkBorder
      background-color themeDarkBackground

      .ArticleDetail-info
        .ArticleDetail-info-folder
          color themeDarkText
          background-color lighten(themeDarkBackground, 10%)

        .ArticleDetail-info-row2 .TagSelect .TagSelect-tags
          border-color themeDarkBorder
          background-color themeDarkBackground

          input
            color themeDarkText

        .ArticleDetail-info-control
          &>button,
          & .ShareButton-open-button
            transition 0.1s
            color themeDarkText
            border none
            background-color lighten(themeDarkBackground, 10%)

          &>button:hover,
          & .ShareButton-open-button:hover
            background-color themeDarkTopicColor

          &>button:focus,
          & .ShareButton-open-button:focus
            background-color darken(themeDarkTopicColor, 20%)

          & .ShareButton-dropdown
            color themeDarkText
            box-shadow 0px 0px 10px 1px themeDarkBoxShadow;
            border 1px solid themeDarkBorder;
            background-color themeDarkBackground

          & .ShareButton-dropdown>button
            color themeDarkText

            &:hover
              background-color darken(themeDarkTopicColor, 20%)

      .ArticleDetail-panel
        border-color themeDarkBackground

        .ArticleDetail-panel-header,
        .ArticleDetail-panel-header .ArticleDetail-panel-header-title input
          color themeDarkText
          border-color themeDarkBorder
          background-color themeDarkPreview

        .ArticleEditor
          .CodeEditor
            border-color themeDarkBorder

        &>.ArticleDetail-panel-header .ArticleDetail-panel-header-mode
          transition 0.1s
          color themeDarkText
          background-color lighten(themeDarkBackground, 10%)

          input
            color themeDarkText

          &.idle
            border-color themeDarkBorder
            background-color themeDarkPreview

          &.idle:hover
            background-color themeDarkTopicColor

          &.edit .ModeSelect-options
            color themeDarkText
            border-color themeDarkBackground
            background-color themeDarkBackground

            .ModeSelect-options-item
              &:hover
                color lighten(themeDarkText, 100%)
                background-color darken(themeDarkTopicColor, 20%)

  .ModalBase
    .modal
      color themeDarkText
      background-color themeDarkModal
      box-shadow 0px 0px 10px 1px themeDarkBoxShadow;

      input
        color themeDarkText
        border-color lighten(themeDarkBackground, 10%)
        background-color lighten(themeDarkBackground, 10%)

        &:hover
          border-color themeDarkBorder

        &:focus
          border-color themeDarkTopicColor

      button
        &:hover
          background-color lighten(themeDarkBackground, 10%)

    .CreateNewFolder.modal
      .closeBtn
        transition 0.1s
        border-radius 24px
        color themeDarkText

        &:hover
          background-color darken(#BF360C, 10%)

      .confirmBtn
        background-color darken(brandColor, 10%)

        &:hover
          background-color brandColor

    .Preferences.modal
      .sectionInput input,
      .sectionSelect select
      .sectionMultiSelect .sectionMultiSelect-input select
        color themeDarkText
        border-color lighten(themeDarkBackground, 10%)
        background-color lighten(themeDarkBackground, 10%)

        &:hover
          border-color themeDarkBorder

        &:focus
          border-color themeDarkTopicColor

      .header
        border-color themeDarkBorder
        background-color darken(themeDarkModal, 40%)

      .nav
        border-color themeDarkBorder
        background-color darken(themeDarkModal, 20%)

        &>button
          &:hover
            color themeDarkFocusText
            background-color lighten(themeDarkModal, 10%)

          &.active,
          &:active
            background-color darken(brandColor, 15%)

      .section
        border-color themeDarkBorder

      &>.content
        &.AppSettingTab
          .description
            code
              color themeDarkText
              border-color darken(themeDarkBorder, 10%)
              background-color lighten(themeDarkPreview, 5%)

        &.FolderSettingTab
          .folderTable
            &>div
              border-color themeDarkBorder

              &:last-child
                border-color transparent

            &>div.FolderRow
              .sortBtns button
                transition 0.1s
                color themeDarkText

                &:hover
                  color themeDarkFocusButton

              .folderColor
                &>button,
                .options
                  color themeDarkText
                  border-color themeDarkBorder

                &>button
                  border-color lighten(themeDarkBackground, 10%)
                  background-color lighten(themeDarkBackground, 10%)

                  &:hover
                    border-color themeDarkBorder

                  &:focus
                    border-color themeDarkTopicColor

                .options
                  background-color themeDarkBackground

            &>div.FolderRow .folderName input,
            &>div.newFolder .folderName input
                color themeDarkText
                border-color lighten(themeDarkBackground, 10%)
                background-color lighten(themeDarkBackground, 10%)

                &:hover
                  border-color themeDarkBorder

                &:focus
                  border-color themeDarkTopicColor

            .folderControl
              button
                transition 0.1s
                color themeDarkText

                &:hover
                  color themeDarkFocusButton

  .Finder
    .FinderInput
      color themeDarkText
      border-color themeDarkBorder
      background-color themeDarkBackground

      input
        color themeDarkText
        border-color lighten(themeDarkBackground, 10%)
        background-color lighten(themeDarkBackground, 10%)

        &:focus
          border-color themeDarkTopicColor

    .FinderList
      color themeDarkText
      border-color themeDarkBorder
      background-color themeDarkList

      .divider
        border-color themeDarkBorder

    .FinderDetail
      color themeDarkText
      border-color themeDarkBorder
      background-color themeDarkPreview
      box-shadow 0px 0px 10px 0 darken(themeDarkBorder, 20%);

      .header
        border-color themeDarkBorder

        .right
          .clipboardBtn
            transition 0.1s

            &:hover
              color themeDarkFocusButton

            .tooltip
              background-color themeDarkTooltip

  // Markdown Preview
  .Finder .FinderDetail .content,
  .ArticleDetail .ArticleDetail-panel .ArticleEditor
    .MarkdownPreview
      color themeDarkText
      border-color themeDarkBorder
      background-color themeDarkPreview