|
|
@@ -3,20 +3,36 @@ Customizing your instance
|
|
|
|
|
|
## Customizing style
|
|
|
|
|
|
-If you create files prefixed with `custom` and suffixed with `.scss`
|
|
|
-(e.g. `app/assets/stylesheets/custom.scss`, `app/assets/stylesheets/custom-foo.css`),
|
|
|
-the default css will be replaced by their contents.
|
|
|
+You can make the application load a different CSS file than the default, you can optionally choose to use that mechanism to adjust variables and re-import the application CSS from your own CSS. Here is what you need to do:
|
|
|
|
|
|
-## Changing colors
|
|
|
+1. Create `app/javascript/packs/custom.js` with the contents `require('../styles/custom.scss');` - you can call the SCSS file anything you want, actually, it will still be compiled into custom.css because it uses the pack name, i.e. this js file
|
|
|
+2. Create `app/javascript/styles/custom.scss` (or whatever you chose). Here you can write whatever SCSS you want.
|
|
|
+3. If you just created the custom.js file, you'll need to restart your webpack-dev-server (if you're in development mode) for it to be recognized and start live reloading. Naturally, in production you'll need to compile assets and restart for the changes to take effect.
|
|
|
|
|
|
-If you want to customize for example the vibrant color of your mastodon instance, you can put the following code in your
|
|
|
-`custom.scss` file :
|
|
|
+## Changing colors and other variables
|
|
|
|
|
|
-````scss
|
|
|
-$color4: #d3d900; // vibrant
|
|
|
+See the `app/javascript/styles/variables.scss` file for the full list of available variables used throughout the application styles. You can redefine their values in your own `custom.scss` like this:
|
|
|
+
|
|
|
+```scss
|
|
|
+$ui-highlight-color: #d3d900;
|
|
|
|
|
|
@import 'application';
|
|
|
-````
|
|
|
+```
|
|
|
+
|
|
|
+#### Upgrading custom.scss variables from pre-1.4
|
|
|
+
|
|
|
+Here is a mapping of the renamed variables:
|
|
|
|
|
|
-Don't forget to recompile your assets and restart mastodon(if you didn't have a `custom.scss` file before)
|
|
|
-to see the changes.
|
|
|
+```scss
|
|
|
+$ui-base-color: $color1;
|
|
|
+$ui-secondary-color: $color2;
|
|
|
+$ui-primary-color: $color3;
|
|
|
+$ui-highlight-color: $color4;
|
|
|
+$base-border-color: $color5;
|
|
|
+$simple-background-color: $color5;
|
|
|
+$primary-text-color: $color5;
|
|
|
+$error-value-color: $color6;
|
|
|
+$valid-value-color: $color7;
|
|
|
+$base-shadow-color: $color8;
|
|
|
+$base-overlay-background: $color8;
|
|
|
+```
|
Eugen Rochko