search

Microflash / vuepress-theme-succinct

A slightly opinionated theme for Vuepress
https://succinct.mflash.dev
MIT License
30 stars 3 forks source link

Issue in my site #5

Closed titieo closed 3 years ago

titieo commented 3 years ago

Excuse me, I did modified my config.js follow your guide as you see here, but I don't have the ability to change light-dark mode as well as the letters' colors seem wrong Here is my code in .vuepress/config.js

const {
  description
} = require('../../package')

module.exports = {
  plugins: [
      '@vuepress/plugin-back-to-top',
      '@vuepress/medium-zoom',
      '@vuepress/last-updated',
      {
        dateOptions:{
          hour12: true
        }
      },
      '@vuepress/active-header-links',
      'check-md'
  ],
  base: "/Genetics/",
  title: 'Sinh học chuyên lớp 9',
  description: 'Tổng hợp kiến thức Sinh học chuyên lớp 9',
  theme: 'vuepress-theme-succinct',
  globalUIComponents: [
    'ThemeManager'
  ],
  head: [
    ['meta', {
        name: 'theme-color',
        content: '#3eaf7c'
    }],
    ['meta', {
        name: 'apple-mobile-web-app-capable',
        content: 'yes'
    }],
    ['meta', {
        name: 'apple-mobile-web-app-status-bar-style',
        content: 'black'
    }],
    ["link", {
        rel: "'stylesheet",
        href: "/styles/website.css"
    },]
  ],
  themeConfig: {
      nextLinks: true,
      prevLinks: true,
      navbar: true,
      search: true,
      searchMaxSuggestions: 10,
      searchPlaceholder: 'Search',
      logo: '/img/icon-nocircle.png',
      repo: 'https://github.com/HBioT/Genetics_HBioT.github.io',
      editLinks: false,
      docsDir: '',
      editLinkText: '',
      lastUpdated: true,
      nav: [{
          text: 'Phân môn',
          ariaLabel: 'Language Menu',
          items: [{
              text: 'Di truyền học',
              link: '/img/icon-nocircle.png'
          }, ]
      }],
      sidebar: [{
          title: 'Kiến thức cơ bản',
          collapsable: false,
          sidebarDepth: 1,
          children: [
              '/basic/DNA',
              '/basic/RNA',
              '/basic/Caculation',
          ]
      },
      {
        title: 'Hoạt động sống của tế bào',
        collapsable: true,
        sidebarDepth: 1,
        children: [
            '/living/meiosis',
            '/living/mitosis',
            '/living/translation',
            '/living/transcription',
        ]
    },
    {
        title: 'Quy luật di truyền',
        collapsable: true,
        sidebarDepth: 1,
        children: [
            '/laws/first',
            '/laws/second',
            '/laws/third',
            '/laws/epistasis',
            '/laws/linkage',
            '/laws/mother',
            '/laws/sex',
        ]
    },
    {
        title: 'Kiến thức bổ sung',
        collapsable: true,
        sidebarDepth: 1,
        children: [
            '/misc/chemist',
        ]
    },
    ],
  },
}

image image Here is the code in .vuepress > styles > palette.styl:

/**
 * Custom palette here.
 *
 * ref：https://v1.vuepress.vuejs.org/zh/config/#palette-styl
 */

$bodyFontSize = 16px
$fallbackTheme = 'light'
$dropShadowColor = #111112

// colors - light theme
$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34
$arrowBgColor = #ccc
$bodyBgColor = #fff
$badgeTipColor = #e7f1ec
$badgeWarningColor = #f8f2d1
$badgeErrorColor = #ffdadc

// colors - dark theme
$accentColorDark = #3eaf7c
$textColorDark = #e2e1db
$borderColorDark = #4c525c
$codeBgColorDark = #1a1c22
$arrowBgColorDark = #555
$bodyBgColorDark = #25262b
$badgeTipColorDark = #1b4b35
$badgeWarningColorDark = #574e21
$badgeErrorColorDark = #692025

// layout
$navbarHeight = 3.6rem
$sidebarWidth = 20rem
$contentWidth = 740px
$homePageWidth = 960px

// responsive breakpoints
$MQNarrow = 959px
$MQMobile = 719px
$MQMobileNarrow = 419px

and here is what shown inside the .vuepress/styles/index.styl:

@require './config'
@require './code'
@require './custom-blocks'
@require './arrow'
@require './wrapper'
@require './toc'

for f in $themeFont
  @import url(f)

[data-theme='light']
  --accentColor $accentColor
  --textColor $textColor
  --textMutedColor lighten($textColor, 25%)
  --selectionColor transparentify($textColor, $bodyBgColor, 0.1)
  --headerColor lighten($textColor, 10%)
  --descriptionColor lighten($textColor, 40%)
  --borderColor $borderColor
  --codeColor lighten($textColor, 20%)
  --codeBgColor $codeBgColor
  --codeBgHighlightColor tint($codeBgColor, 10%)
  --arrowBgColor $arrowBgColor
  --bodyBgColor $bodyBgColor
  --bodyComplementColor darken($bodyBgColor, 2%)
  --badgeTipColor $badgeTipColor
  --badgeWarningColor $badgeWarningColor
  --badgeWarningTextColor darken($badgeWarningColor, 70%)
  --badgeWarningTitleColor darken($badgeWarningColor, 50%)
  --badgeErrorColor $badgeErrorColor
  --badgeErrorTextColor darken($badgeErrorColor, 70%)
  --badgeErrorTitleColor darken($badgeErrorColor, 50%)
  --actionBtnBorderColor darken($accentColor, 10%)
  --actionBtnHoverBorderColor lighten($accentColor, 10%)
  --navItemHoverColor lighten($accentColor, 8%)

[data-theme='dark']
  --accentColor $accentColorDark
  --textColor $textColorDark
  --textMutedColor darken($textColorDark, 25%)
  --selectionColor transparentify($textColorDark, $bodyBgColorDark, 0.1)
  --headerColor darken($textColorDark, 5%)
  --descriptionColor darken($textColorDark, 10%)
  --borderColor $borderColorDark
  --codeColor darken($textColorDark, 20%)
  --codeBgColor $codeBgColorDark
  --codeBgHighlightColor tint($codeBgColorDark, 3%)
  --arrowBgColor $arrowBgColorDark
  --bodyBgColor $bodyBgColorDark
  --bodyComplementColor lighten($bodyBgColorDark, 5%)
  --badgeTipColor $badgeTipColorDark
  --badgeWarningColor $badgeWarningColorDark
  --badgeWarningTextColor lighten($badgeWarningColorDark, 70%)
  --badgeWarningTitleColor lighten($badgeWarningColorDark, 50%)
  --badgeErrorColor $badgeErrorColorDark
  --badgeErrorTextColor lighten($badgeErrorColorDark, 70%)
  --badgeErrorTitleColor lighten($badgeErrorColorDark, 50%)
  --actionBtnBorderColor darken($accentColorDark, 10%)
  --actionBtnHoverBorderColor darken($accentColorDark, 10%)
  --navItemHoverColor darken($accentColorDark, 8%)

*
  &::-webkit-scrollbar, &::-webkit-scrollbar-track
    background-color $bodyComplementColorDefault
    background-color var(--bodyComplementColor)

  &::-webkit-scrollbar-thumb
    background-color $selectionColorDefault
    background-color var(--selectionColor)

  &::-webkit-scrollbar-button
    background-color $bodyComplementColorDefault
    background-color var(--bodyComplementColor)

  scrollbar-color $selectionColorDefault $bodyComplementColorDefault
  scrollbar-color var(--selectionColor) var(--bodyComplementColor)

  scroll-behavior smooth

  @media screen and (prefers-reduced-motion: true)
    scroll-behavior auto

  &::-moz-selection
    background $selectionColorDefault
    background var(--selectionColor)

  &::selection
    background $selectionColorDefault
    background var(--selectionColor)

html, body
  padding 0
  margin 0
  background-color $bodyBgColorDefault
  background-color var(--bodyBgColor)

body, .theme-container
  font-family $bodyFontFamily, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-rendering optimizeLegibility
  font-size $bodyFontSize

  if $textSizeAdjust
    text-size-adjust 100%

  color $textColorDefault
  color var(--textColor)

.page
  padding-left $sidebarWidth

.navbar
  position fixed
  z-index 20
  top 0
  left 0
  right 0
  height $navbarHeight
  background-color $bodyBgColorDefault
  background-color var(--bodyBgColor)
  box-sizing border-box
  border-bottom 1px solid $borderColorDefault
  border-bottom 1px solid var(--borderColor)

.sidebar-mask
  position fixed
  z-index 9
  top 0
  left 0
  width 100vw
  height 100vh
  display none

.sidebar
  font-size 16px
  background-color $bodyBgColorDefault
  background-color var(--bodyBgColor)
  width $sidebarWidth
  position fixed
  z-index 10
  margin 0
  top $navbarHeight
  left 0
  bottom 0
  box-sizing border-box
  border-right 1px solid $borderColorDefault
  border-right 1px solid var(--borderColor)
  overflow-y auto

.search-box
  input
    color $textMutedColorDefault !important
    color var(--textMutedColor) !important
    border-color $borderColorDefault !important
    border-color var(--borderColor) !important
    background-color $bodyBgColorDefault !important
    background-color var(--bodyBgColor) !important
    &:focus
      border-color $accentColorDefault !important
      border-color var(--accentColor) !important
  .suggestions
    background $bodyBgColorDefault !important
    background var(--bodyBgColor) !important
    border-color $borderColorDefault !important
    border-color var(--borderColor) !important
  .suggestion
    a
      color $textMutedColorDefault !important
      color var(--textMutedColor) !important
    &.focused
      background-color $bodyComplementColorDefault !important
      background-color var(--bodyComplementColor) !important
      a
        color $accentColorDefault !important
        color var(--accentColor) !important

{$contentClass}:not(.custom)
  @extend $wrapper
  > *:first-child
    margin-top $navbarHeight

  a:hover
    text-decoration underline

  p.demo
    padding 1rem 1.5rem
    border 1px solid $borderColorDefault
    border 1px solid var(--borderColor)
    border-radius 4px

  img
    max-width 100%

{$contentClass}.custom
  padding 0
  margin 0

  img
    max-width 100%

a
  font-weight 500
  color $accentColorDefault
  color var(--accentColor)
  text-decoration none

p a code
  font-weight 400
  color $accentColorDefault
  color var(--accentColor)

kbd
  background $textMutedColorDefault
  background var(--textMutedColor)
  border solid 0.15rem $borderColorDefault
  border solid 0.15rem var(--borderColor)
  border-bottom solid 0.25rem $borderColorDefault
  border-bottom solid 0.25rem var(--borderColor)
  border-radius 0.15rem
  padding 0 0.15em

blockquote
  font-size inherit
  color $textMutedColorDefault
  color var(--textMutedColor)
  border-left .2rem solid $borderColorDefault
  border-left .2rem solid var(--borderColor)
  margin 0.5rem 0
  padding .25rem 0 .25rem 1rem

  & > p
    margin 0

ul, ol
  padding-left 1.2em

strong
  font-weight 600

h1, h2, h3, h4, h5, h6
  font-weight 600
  line-height 1.25

  {$contentClass}:not(.custom) > &
    margin-top (0.5rem - $navbarHeight)
    padding-top ($navbarHeight + 1rem)
    margin-bottom 0

    &:first-child
      margin-top -1.5rem
      margin-bottom 1rem

      + p, + pre, + .custom-block
        margin-top 2rem

  &:hover .header-anchor
    opacity: 1

h1
  font-size 2.2rem

h2
  font-size 1.65rem
  padding-bottom .3rem
  border-bottom 1px solid $borderColorDefault
  border-bottom 1px solid var(--borderColor)

h3
  font-size 1.35rem

a.header-anchor
  font-size 0.85em
  float left
  margin-left -0.87em
  padding-right 0.23em
  margin-top 0.125em
  opacity 0

  &:hover
    text-decoration none

code, kbd, .line-number
  font-family $monoFontFamily, source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace

p, ul, ol, th, td
  line-height 1.7

hr
  border 0
  border-top 1px solid $borderColorDefault
  border-top 1px solid var(--borderColor)

table
  border-collapse collapse
  margin 1rem 0
  display: block
  overflow-x: auto

tr
  border-top 1px solid $borderColorDefault
  border-top 1px solid var(--borderColor)

  &:nth-child(2n)
    background-color $bodyComplementColorDefault
    background-color var(--bodyComplementColor)

th, td
  border 1px solid $borderColorDefault
  border 1px solid var(--borderColor)
  padding .6em 1em

.theme-container
  &.sidebar-open
    .sidebar-mask
      display: block

  &.no-navbar
    {$contentClass}:not(.custom) > h1, h2, h3, h4, h5, h6
      margin-top 1.5rem
      padding-top 0

    .sidebar
      top 0

@media (min-width: ($MQMobile + 1px))
  .theme-container.no-sidebar
    .sidebar
      display none

    .page
      padding-left 0

@require 'mobile.styl'

PS: I'm using the newest version of Opera

titieo commented 3 years ago

Update: Because I've used a different theme and make errors, sorry for this

naiyerasif commented 3 years ago

No problem. Hope things worked for you!