0.1.1 β€’ Published 8 months ago

@shgk/nextcloud-styles v0.1.1

Weekly downloads
-
License
AGPL-3.0-or-later
Repository
github
Last release
8 months ago

Nextcloud Server Styles

Extracted Nextcloud server global styles

  • ⚑ Zero dependencies
  • 🌲 Different branches: master, stable30, stable29
  • βœ… REUSE.toml included

πŸ“₯ Install

npm i @shgk/nextcloud-styles

πŸ—οΈ Prerequisites

Requires a bundler with .css import support, such as Webpack with css-loader ot Vite.

πŸ§‘β€πŸ’» Usage

Import all styles and themes:

// master
import '@shgk/nextcloud-styles'
// or a specific branch
import '@shgk/nextcloud-styles/master'
import '@shgk/nextcloud-styles/stable30'
import '@shgk/nextcloud-styles/stable29'

Importing a specific file:

// master
import '@shgk/nextcloud-styles/apps/theming/theme/dark.css'
import '@shgk/nextcloud-styles/core/img/logo/logo.svg'
// or a specific branch
import '@shgk/nextcloud-styles/master/apps/theming/css/default.css'
import '@shgk/nextcloud-styles/stable30/core/css/server.css'

πŸ“¦ Details

Styles are close to the original. Changes:

  • Added light.plain.css and light.dark.css to be used as server's
    <link rel="stylesheet" media="prefers-color-scheme: light" href="/apps/theming/theme/light.css?plain=1" />
    <link rel="stylesheet" media="prefers-color-scheme: dark" href="/apps/theming/theme/dark.css?plain=1" />
  • Absolute paths in url() are changed to relative
  • Added REUSE.toml for license information
  • Added theme.css for re-export theming styles including plain style on prefers-color-scheme
  • Added index.js for re-export all styles and themes.css

Styles structure:

└───BRANCH
    β”œβ”€β”€β”€apps
    β”‚   └───theming
    β”‚       β”œβ”€β”€β”€css
    β”‚       β”‚   └───default.css
    β”‚       β”œβ”€β”€β”€img
    β”‚       β”‚   └───...
    β”‚       └───theme
    β”‚           β”œβ”€β”€β”€dark.css
    β”‚           β”œβ”€β”€β”€dark.plain.css
    β”‚           β”œβ”€β”€β”€dark.css
    β”‚           └───light.plain.css
    β”œβ”€β”€β”€core
    β”‚   β”œβ”€β”€β”€css
    β”‚   β”‚   β”œβ”€β”€β”€apps.css
    β”‚   β”‚   └───server.css
    β”‚   └───img
    β”‚       └───...
    β”œβ”€β”€β”€dist
    β”‚   └───icons.css
    β”œβ”€β”€β”€REUSE.toml
    β”œβ”€β”€β”€theme.css = apps/theming/css/default.css + apps/theming/theme/* with prefers-color-scheme
    └───index.js = core/css/server.css + core/css/apps.css + theme.css

Based on awesome szaimen/nextcloud-simple-test.

πŸ‘Ύ Development

Update styles:

node ./build/extract.js <VERSION>

TODO

  • Add high-contrast theme and dyslexia-friendly font
  • Add automatic updates
  • Add custom themes support
  • Add private servers support
  • Improve building performance
  • Remove unneeded images
0.1.1

8 months ago

0.1.0

8 months ago