tefkah / zotero-night

Night theme for Zotero UI and PDF
GNU General Public License v3.0
2.4k stars 37 forks source link

Make actual icons instead of emoji #5

Open github-actions[bot] opened 2 years ago

github-actions[bot] commented 2 years ago

Make actual icons instead of emoji

https://github.com/ThomasFKJorna/zotero-night/blob/27d8548beb34ff8ddc0c6a5dfe27eb33a521cdd8/content/zotero-night.ts#L327


      this._tabsAdded = true
    }
  }

  public getTabWindowById(id: string): Window | null {
    const tabIndex = Zotero_Tabs._tabs.findIndex((tab) => tab.id === id)

    debug(`Select tab event tabindex: ${tabIndex}`)

    if (tabIndex === -1) return null

    const activeTabWindow = window[1 + tabIndex]
    return activeTabWindow
  }

  public getTabNameById(id: string): string {
    const name =
      (Zotero_Tabs._tabs.find((tab) => tab.id === id)?.title as string) ??
      'Not found'
    return name
  }

  private addEverythingForTab(tabWindow: Window) {
    const doc = tabWindow.document
    // if (doc.querySelector('#pageStyle')) return

    debug('adding style for added window tab')
    const style = doc.createElement('style')
    style.setAttribute('id', 'pageStyle')
    style.textContent = css
    const header = doc.querySelector('head')
    header.appendChild(style)
    doc.querySelector('html[dir]').setAttribute('theme', 'dark')
    this.addToggleButton(tabWindow)

    //  this.editorNeedsStyle() && this.tryToAddStyleToEditor()
  }

  public toggleDarkTheme(on?: boolean) {
    const main = window.document.querySelector('#main-window')
    if (on) {
      main.setAttribute('theme', 'dark')
      this.setHTMLThemeAttribute(true)
      !this.getPref('enabled') && this.setPref('enabled', true)
      return
    }

    if (main.getAttribute('theme') === 'dark' || on === false) {
      main.removeAttribute('theme')
      this.setHTMLThemeAttribute(false)
      this.getPref('enabled') && this.setPref('enabled', false)
      return
    }
    main.setAttribute('theme', 'dark')
    this.setHTMLThemeAttribute(true)
    !this.getPref('enabled') && this.setPref('enabled', true)
  }

  public addGlobalToggleButton() {
    const toolbar = window.document.querySelector('#zotero-item-toolbar')
    const button = window.document.createElement('div')
    button.setAttribute('id', 'night-global-toggle')
    button.setAttribute('tab-index', '0')
    // TODO: Make actual icons instead of emoji

    const image = window.document.createElement('span')
    image.textContent = this.getPref('enabled') ? '🌚' : '🌞'
    button.appendChild(image)
    button.onclick = () => {
      this.toggleDarkTheme()
      image.textContent = this.getPref('enabled') ? '🌚' : '🌞'
    }

    toolbar.appendChild(button)
  }
  // eslint-disable-next-line @typescript-eslint/require-await
  public async load(globals: Record<string, any>) {
    this.globals = globals

929096ae0b7bc0a0a1ab205498c779cfaf4bb0d0

windingwind commented 2 years ago

@ThomasFKJorna This website www.iconfont.cn provides millions of free icons, in PNG & SVG format. Icons without a copyright mark are free for commercial use.

Night icons: https://www.iconfont.cn/search/index?searchType=icon&q=night&lang=en-us

Like this: image

I can also paint icons for you with Adobe Illustrtor.