maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update example code (#8397)

Browse source
This commit is contained in:
Jacob Herrington 2020-06-11 06:16:03 -05:00 • committed by GitHub
parent f6a4c844cd
commit eb09d980ab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
docs/design/theming.md
View file

@ -9,41 +9,29 @@ DEV supports different themes, such as Default, Night, Pink.
You can switch the theme at <http://localhost:3000/settings/ux> in the "Style
Customization" section.
These themes are powered by [CSS custom
properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties),
loaded at runtime by Javascript via `layouts/_user_config.html.erb`.
These themes are powered by
[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties),
loaded at runtime by JavaScript via `layouts/_user_config.html.erb`.
An example of how it works:
```javascript
<script>
try {
var bodyClass = localStorage.getItem('config_body_class');
try {
const bodyClass = localStorage.getItem('config_body_class');
if (bodyClass) {
document.body.className = bodyClass;
if (bodyClass.includes('night-theme')) {
document.getElementById('body-styles').innerHTML = '<style>\
:root {\
--theme-background: #0d1219;\
--theme-color: #fff;\
--theme-logo-background: #0a0a0a;\
--theme-logo-color: #fff;\
--theme-anchor-color: #17a1f6;\
--theme-secondary-color: #cedae2;\
--theme-top-bar-background: #1c2938;\
--theme-top-bar-background-hover: #27384c;\
--theme-top-bar-color: #fff;\
--theme-top-bar-search-background: #424a54;\
--theme-top-bar-search-color: #fff;\
--theme-top-bar-write-background: #00af81;\
--theme-top-bar-write-color: #fff;\
--theme-container-background: #141f2d;\
--theme-container-accent-background: #202c3d;\
--theme-container-background-hover: #37475c;\
--theme-gradient-background: linear-gradient(to right, #293d56 8%, #282833 18%, #293d56 33%);\
--theme-container-color: #fff;\
--theme-container-box-shadow: none;\
--theme-container-border: 1px solid #141d26;\
--theme-social-icon-invert: invert(100)</style>'
document.getElementById('body-styles').innerHTML = '<style><%= Rails.application.assets["themes/night.css"].to_s.squish.html_safe %></style>';
} else if (bodyClass.includes('ten-x-hacker-theme')) {
document.getElementById('body-styles').innerHTML = '<style><%= Rails.application.assets["themes/hacker.css"].to_s.squish.html_safe %></style>'
} else if (bodyClass.includes('pink-theme')) {
document.getElementById('body-styles').innerHTML = '<style><%= Rails.application.assets["themes/pink.css"].to_s.squish.html_safe %></style>'
} else if(bodyClass.includes('minimal-light-theme')) {
document.getElementById('body-styles').innerHTML = '<style><%= Rails.application.assets["themes/minimal.css"].to_s.squish.html_safe %></style>'
}
...
```
Within SCSS files located at `app/assets/stylesheets` you can use `var()`