A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks with nightTab.
Go to file
2019-11-08 15:49:44 +00:00
assets [documentation] update screenshots 2019-06-22 00:29:27 +01:00
src [feature] add controls for header position on scroll 2019-11-08 15:49:44 +00:00
.gitignore [refactor] improve dev process with gulp watch 2019-08-18 11:49:05 +01:00
CODE_OF_CONDUCT.md [documentation] Create CODE_OF_CONDUCT.md 2019-01-24 20:29:30 +00:00
gulpfile.js [feature] add group and bookmark header dropdown 2019-10-20 23:41:12 +01:00
package-lock.json [design] improve form theme styles 2019-11-07 11:09:40 +00:00
package.json [feature] add bookmark groups 2019-10-19 10:52:33 +01:00
README.md [documentation] change some words 2019-08-19 10:11:54 +01:00

NIGHTTAB

A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab -- a custom start page.

nightTab Demo

See the demo in action


Chrome Extension

Firefox Add On


Features

  • Header
    • Greeting
      • Name, Style, Size
    • Clock
      • Hours, Minutes, Seconds, Separator, Meridiem, Hour/24, Size
    • Date
      • Day, Date, Month, Year, Separator, D/M or M/D format, Size
    • Search
      • Filter, Search engine, Size
    • Add and remove, Accent
  • Bookmarks
    • Drag and drop sort, sort by Letter, Icon, Name
    • Letter or icon, Names, URLs, Open in new tab, Size
  • Layout
    • Vertical and horizontal alignment, Padding, Gutter, Width, Title
  • Theme
    • Accent colour, Random accent colour, Light/Dark theme, Radius
  • Background
    • Image, Blur, Scale, Opacity, Grayscale, Accent colour
  • Saves data to local storage
  • Keyboard shortcuts
    • esc to dismiss most things
    • ctrl+alt+a to add a new bookmark
    • ctrl+alt+m to open menu
    • ctrl+alt+e to toggle edit state
    • ctrl+alt+d to toggle dark and light mode
    • ctrl+alt+r random theme if option is turned on in menu > layout > random Accent colour
  • Responsive design

Development

When developing use:

  • npm run dev

A Development copy will be created in /dev/. Open /dev/index.html in a browser to test. Make changes to files in the /src/ directory and refresh browser to see changes.

To build the project use:

  • npm run build

A web ready folder will be created in /build/web/. A browser addon/extension ready zip will be created in /build/extension/.


nightTab Demo nightTab Demo nightTab Demo nightTab Demo nightTab Demo nightTab Demo nightTab Demo