search

HappenApps / Quiver

Quiver documentation and issue tracker
2.26k stars 109 forks source link

Theme support #722

Open floq-design opened 8 years ago

floq-design commented 8 years ago

General

Be great to be able to set an app-wide font and then specify sizes in the theme / Preferences > Styles options.

Dividers

It would be great to split left and right for these borders to give finer control when creating themes.

  "mainWindow": {
    "divider": {
      "topColor": "#dedede",
      "middleColor": "#dedede",
      "bottomColor": "#dedede"
    }
  }...

For example: topLeftColor, topRightColor, middleLeftColor etc.

Note view

Editor and Preview windows - how do you change the color of the stroke under the note title?

Color selections don't work

sidebar > table and notebookPicker > table styling issues. The styles with colors #f00 and #0f0 indicate non-working styles.

"sidebar": {
  "table": {

    "selectedTextColor": "#f00",
    "emphasizedTextColor": "#0f0",

    "selectedIconColor": "#f00",
    "emphasizedIconColor": "#0f0",
    "selectedRowBgColor": "#f00",
    "emphasizedRowBgColor": "#0f0"
  }
}...

and...

"notebookPicker": {
  "table": {

    "selectedTextColor": "#f00",
    "emphasizedTextColor": "#0f0",

    "selectedIconColor": "#f00",
    "emphasizedIconColor": "#0f0",
    "selectedRowBgColor": "#f00",
    "emphasizedRowBgColor": "#0f0",
  }
}

Editor window

Style the tags - eg. add border - how? It's possible in the Presentation window using but the same code doesn't work in the Editor:

#tag-field{margin:8px 2px;}
#tag-field .tag{background:#fbfbfb;border-radius:1px;color:#ccc;border:1px solid #dedede}

Export styling

Is it possible to add styles for PDF & Print and HTML output in-theme? For example:

"css": {

  "pdf": "...",
  "html": "..."
}

I know users can add Styles in the Preferences but how to do it with a theme?

ylian commented 8 years ago

General

Application-wide font can be set either in user css or a theme file. Simply apply the font to body. 

body { font-family: Arial; }

Dividers

Agreed. It's better to be able to style the two dividers separately.

Note View

To change the border underneath the note tile in editor/preview, use this:

#titlearea { border-bottom: 1px solid red; }

Color Selections

Color selections should work, unless you are running Yosemite.

Editor

The code you use to style tags is correct. It should work in editor and preview. Maybe something else in the theme file is broken.

Export Styling

Maybe I will add those options to the theme file.

floq-design commented 8 years ago

General

By 'application wide' I mean the whole Quiver app fonts. Even when using body { font-family: ... } the fonts in the following sections are not being styled:

Editor

Tried and tested the tag styling - definitely not working. Seems preview window gets extra styling attributes to Editor and Multi-note views?