Add theming guide. Fixes #596

.gitignore

@@ -7,3 +7,4 @@ build/
 .idea/
 ui/src/translations
 docker/dev/volumes
+docker/federation-test/volumes

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)

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.

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++) {