diff options
| -rw-r--r-- | .gitignore | 3 | ||||
| -rw-r--r-- | docs/src/SUMMARY.md | 1 | ||||
| -rw-r--r-- | docs/src/contributing_theming.md | 18 | ||||
| -rw-r--r-- | ui/src/utils.ts | 66 |
4 files changed, 54 insertions, 34 deletions
@@ -6,4 +6,5 @@ docker/dev/env_deploy.sh build/ .idea/ ui/src/translations -docker/dev/volumes
\ No newline at end of file +docker/dev/volumes +docker/federation-test/volumes diff --git a/docs/src/SUMMARY.md b/docs/src/SUMMARY.md index 9a2ecde8..10a6153e 100644 --- a/docs/src/SUMMARY.md +++ b/docs/src/SUMMARY.md @@ -15,4 +15,5 @@ - [Local Development](contributing_local_development.md) - [Websocket/HTTP API](contributing_websocket_http_api.md) - [ActivityPub API Outline](contributing_apub_api_outline.md) + - [Theming Guide](contributing_theming.md) - [Lemmy Council](lemmy_council.md) diff --git a/docs/src/contributing_theming.md b/docs/src/contributing_theming.md new file mode 100644 index 00000000..25c8ca6d --- /dev/null +++ b/docs/src/contributing_theming.md @@ -0,0 +1,18 @@ +# Theming Guide + +Lemmy uses [Bootstrap v4](https://getbootstrap.com/), and very few custom css classes, so any bootstrap v4 compatible theme should work fine. + +## Creating + +- Use a tool like [bootstrap.build](https://bootstrap.build/) to create a bootstrap v4 theme. Export the `bootstrap.min.css` once you're done, and save the `_variables.scss` too. + +## Testing + +- To test out a theme, you can either use your browser's web tools, or a plugin like stylus to copy-paste a theme, when viewing Lemmy. + +## Adding + +1. Copy `{my-theme-name}.min.css` to `ui/assets/css/themes`. (You can also copy the `_variables.scss` here if you want). +1. Go to `ui/src/utils.ts` and add `{my-theme-name}` to the themes list. +1. Test locally +1. Do a pull request with those changes. diff --git a/ui/src/utils.ts b/ui/src/utils.ts index 69666200..89fbe51c 100644 --- a/ui/src/utils.ts +++ b/ui/src/utils.ts @@ -53,6 +53,39 @@ export const postRefetchSeconds: number = 60 * 1000; export const fetchLimit: number = 20; export const mentionDropdownFetchLimit = 10; +export const languages = [ + { code: 'ca', name: 'Català' }, + { code: 'en', name: 'English' }, + { code: 'eo', name: 'Esperanto' }, + { code: 'es', name: 'Español' }, + { code: 'de', name: 'Deutsch' }, + { code: 'fa', name: 'فارسی' }, + { code: 'ja', name: '日本語' }, + { code: 'pt_BR', name: 'Português Brasileiro' }, + { code: 'zh', name: '中文' }, + { code: 'fi', name: 'Suomi' }, + { code: 'fr', name: 'Français' }, + { code: 'sv', name: 'Svenska' }, + { code: 'ru', name: 'Русский' }, + { code: 'nl', name: 'Nederlands' }, + { code: 'it', name: 'Italiano' }, +]; + +export const themes = [ + 'litera', + 'materia', + 'minty', + 'solar', + 'united', + 'cyborg', + 'darkly', + 'journal', + 'sketchy', + 'vaporwave', + 'vaporwave-dark', + 'i386', +]; + export function randomStr() { return Math.random() .toString(36) @@ -275,24 +308,6 @@ export function debounce( }; } -export const languages = [ - { code: 'ca', name: 'Català' }, - { code: 'en', name: 'English' }, - { code: 'eo', name: 'Esperanto' }, - { code: 'es', name: 'Español' }, - { code: 'de', name: 'Deutsch' }, - { code: 'fa', name: 'فارسی' }, - { code: 'ja', name: '日本語' }, - { code: 'pt_BR', name: 'Português Brasileiro' }, - { code: 'zh', name: '中文' }, - { code: 'fi', name: 'Suomi' }, - { code: 'fr', name: 'Français' }, - { code: 'sv', name: 'Svenska' }, - { code: 'ru', name: 'Русский' }, - { code: 'nl', name: 'Nederlands' }, - { code: 'it', name: 'Italiano' }, -]; - export function getLanguage(): string { let user = UserService.Instance.user; let lang = user && user.lang ? user.lang : 'browser'; @@ -344,21 +359,6 @@ export function getMomentLanguage(): string { return lang; } -export const themes = [ - 'litera', - 'materia', - 'minty', - 'solar', - 'united', - 'cyborg', - 'darkly', - 'journal', - 'sketchy', - 'vaporwave', - 'vaporwave-dark', - 'i386', -]; - export function setTheme(theme: string = 'darkly') { // unload all the other themes for (var i = 0; i < themes.length; i++) { |