Comments (9)
I wanted to know if there is a way to disable the dark theme. The theme used is not jet black but a variant of off shade of black/dark grey which tbh messes with my eyes. Is there anyway to just switch modes. Between light and dark mode?
from builderbook.
As a quick and dirty solution I ended up just modifying the styles directly in the console. Here's what worked for me: https://gist.github.com/ksbrooksjr/0ad492d540d4fb9c968cb8cd52c520b3
from builderbook.
@ksbrooksjr Nice!
I will use your styles to create a light theme. Thanks!
Notes to myself:@ksbrooksjr Nice!
I will use your styles to create a light theme. Thanks!
Notes to myself:
Save boolean lightTheme
to browser's localStorage
.
Do something like this at ReadChapter
page:
public componentDidMount() {
if ((typeof localStorage !== 'undefined' && localStorage.getItem(this.theme)) || null) {
this.setState({ themeType: 'light' });
}
}
And:
private changeThemeType = (themeType: string) => {
this.setState({ themeType });
if (typeof localStorage !== 'undefined' && this.theme) {
localStorage.setItem(this.theme, themeType);
}
};
from builderbook.
@shanky101 @ksbrooksjr @klyburke @delgermurun Added prototype feature, see circle icon next to Table of Content on the left: https://builderbook.org/books/builder-book/introduction
Currently data is saved to localStorage
.
To prevent flash of styles for SSR, we should save darkTheme
to DB.
To me it looks tolerable to have a quick flash for SSR, most of consequent transitions (between chapters) are CSR transitions.
Note to self: research saving darkTheme
to cookie/session
from builderbook.
@shanky101 Thanks for your feedback. We do not have an option at builderbook.org to switch to a different theme.
Do you have suggestions for specific colors to use? We are happy to consider them.
To test some other color schemes locally, look into pages/document.js
and edit options within the style
block.
from builderbook.
Link here
The above link gives very useful tips for having an inclusive color palette.
Simple ones like White on Black/Black on White would be the bare minimum color options.
@klyburke Since Builderbook is showcased as a site which belongs to blog/book category, having a toggle for basic color options would make it more appealing for a wider audience. It may not be essential, but a good to have feature.
The current implementation uses an off variant of black which in my opinion may not be the best choice for long form reading on computer screen. FWIW, I use dark theme in my code editors, xcode and even macOS theme and I love it but its good to have options.
PS : The link below exactly details the better ways of text representation on screens.
Link here
from builderbook.
@shanky101 Thanks for sharing the link. We are open to contribution to add a light theme in addition to a dark theme.
@klyburke Let's keep it open for now?
from builderbook.
@tima101 Sounds good.
@shanky101 If you'd like to contribute with a pull request, you are welcome. But no pressure.
from builderbook.
@tima101 Looks great!
from builderbook.
Related Issues (20)
- Missing import { MenuItem } from '@mui/material' HOT 1
- Broken link to screenshot HOT 3
- 01 HOT 1
- No MUI and Failed Prop type HOT 10
- Begin-1 yarn install issue HOT 1
- Is my project possible with this program? HOT 2
- Can excerpt take a markdown file or markdown syntax instead of string? HOT 2
- Typo under subheading 'theme and ThemeProvider' HOT 1
- Placement of .env file and linkage not working in 2-begin HOT 3
- December 2022 / January 2023 update (done)
- Sign in with Google. / Google OAuth API Infrastructure HOT 1
- Chapter 2 HOT 3
- Question on the content of the books (1 versus 2) HOT 2
- Chapter 4-end / Chapter 5-begin results in 403 forbidden HOT 4
- Deploy app to Heroku HOT 12
- next-transpile-modules - This package has been deprecated - next.config.js HOT 1
- 404 Page Not Found to External Link HOT 1
- November / December 2023 update (DONE)
- Ch01 Index Page - Invalid `<Link>` with `<a>` child HOT 3
- Stripe related bugs
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from builderbook.