0.1.1 β’ Published 8 months ago
@shgk/nextcloud-styles v0.1.1
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
andlight.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 onprefers-color-scheme
- Added
index.js
for re-export all styles andthemes.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