LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-29 07:41:13 +00:00
Code Issues Projects Releases Wiki Activity

Adding a browser default theme option. Fixes #35

Browse source
This commit is contained in:
Dessalines 2020-09-24 17:03:03 -05:00
parent d68ac84b78
commit 4ef7b10116
3 changed files with 10 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/server/index.tsx
View file

@ -107,7 +107,7 @@ server.get('/*', async (req, res) => {
</noscript> </noscript>
<div id='root'>${root}</div> <div id='root'>${root}</div>
<script src='/static/js/client.js'></script> <script defer src='/static/js/client.js'></script>
</body> </body>
</html> </html>
`); `);

3
src/shared/components/user.tsx
View file

@ -535,6 +535,7 @@ export class User extends Component<any, UserState> {
class="ml-2 custom-select w-auto" class="ml-2 custom-select w-auto"
> >
<option disabled>{i18n.t('theme')}</option> <option disabled>{i18n.t('theme')}</option>
<option value="browser">{i18n.t('browser_default')}</option>
{themes.map(theme => ( {themes.map(theme => (
<option value={theme}>{theme}</option> <option value={theme}>{theme}</option>
))} ))}
@ -1050,7 +1051,7 @@ export class User extends Component<any, UserState> {
UserService.Instance.user.show_nsfw; UserService.Instance.user.show_nsfw;
this.state.userSettingsForm.theme = UserService.Instance.user.theme this.state.userSettingsForm.theme = UserService.Instance.user.theme
? UserService.Instance.user.theme ? UserService.Instance.user.theme
: 'darkly'; : 'browser';
this.state.userSettingsForm.default_sort_type = this.state.userSettingsForm.default_sort_type =
UserService.Instance.user.default_sort_type; UserService.Instance.user.default_sort_type;
this.state.userSettingsForm.default_listing_type = this.state.userSettingsForm.default_listing_type =

8
src/shared/utils.ts
View file

@ -437,7 +437,12 @@ export function getMomentLanguage(): string {
} }
export function setTheme(theme: string, forceReload: boolean = false) { export function setTheme(theme: string, forceReload: boolean = false) {
if (isBrowser() && (theme !== 'darkly' || forceReload)) { if (isBrowser() && (theme !== 'browser' || forceReload)) {
// This is only run on a force reload
if (theme == 'browser') {
theme = 'darkly';
}
// Unload all the other themes // Unload all the other themes
for (var i = 0; i < themes.length; i++) { for (var i = 0; i < themes.length; i++) {
let styleSheet = document.getElementById(themes[i]); let styleSheet = document.getElementById(themes[i]);
@ -452,6 +457,7 @@ export function setTheme(theme: string, forceReload: boolean = false) {
document document
.getElementById('default-dark') .getElementById('default-dark')
.setAttribute('disabled', 'disabled'); .setAttribute('disabled', 'disabled');
// Load the theme dynamically // Load the theme dynamically
let cssLoc = `/static/assets/css/themes/${theme}.min.css`; let cssLoc = `/static/assets/css/themes/${theme}.min.css`;
loadCss(theme, cssLoc); loadCss(theme, cssLoc);