Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Question: Pagination and dark theme by default #114

Open
dbu9 opened this issue May 14, 2023 · 8 comments
Open

Question: Pagination and dark theme by default #114

dbu9 opened this issue May 14, 2023 · 8 comments

Comments

@dbu9
Copy link

dbu9 commented May 14, 2023

Hello, thanks for bautiful theme i've fallen in love at the first glance!

I'm looking for an advice how can I do the following:

  1. make dark theme to be default
  2. changing the default pagination to 12

Sorry for newbi questions. I tried config.toml pagination parameter, it did not work.
@dbu9
Copy link
Author

dbu9 commented May 16, 2023

Another question is if it's possible to have drop down menu items?

The following does not work:

[[languages.en.menu.main]]
        identifier = "personal"
        name = "Personal"
        weight = 2
        hasChildren = true

    [[languages.en.menu.main]]
        parent = "personal"
        name = "Horoscope"
        url = "page/personal/"
        weight = 3

    [[languages.en.menu.main]]
        parent = "personal"
        name = "Health"
        url = "page/health/"
        weight = 4

@nakibrayan3
Copy link

to make the default theme dark

  1. copy ./themes/blist/layouts/_default/baseof.html to ./layouts/_default/baseof.html
  • create the ./layouts/_default directory is it does not exist
  1. add class="dark" to the <html> tag of ./layouts/_default/baseof.html
  • the new file should look some thing like this
<!DOCTYPE html>
<html class="dark" lang="{{ .Lang }}" itemscope itemtype="http://schema.org/WebPage">
  {{- partial "head.html" . -}}
  <body class="dark:bg-gray-800 dark:text-white relative flex flex-col min-h-screen">
    {{- partial "header.html" . -}}
    <main class="flex-1">
    {{- block "main" . }}{{- end }}
    </main>
    {{- partial "footer.html" . -}}
  </body>
</html>

@dbu9
Copy link
Author

dbu9 commented May 19, 2023

Thanks for the advice.
It would be great to add a config setting to switch between defaults.

@nakibrayan3
Copy link

nakibrayan3 commented May 19, 2023 •
edited
Loading

i can add a config option to make the default theme dark, but i don't think it's a use full feature

@dbu9
Copy link
Author

dbu9 commented May 20, 2023

I think config option would be useful.
I don't think switch button on the UI is very obvious for usual users; that's programmers who are accustomed to switch theme colors in their IDEs but usual internet users, who read news, for example, seldom switch news site themes.

@nakibrayan3
Copy link

nakibrayan3 commented May 20, 2023 •
edited
Loading

to implement this feature:

  1. go to the root directory of your website

  2. copy themes/blist/layouts/_default/baseof.html to layouts/_default/baseof.html

NOTE: Create the directory layouts/_default if it does not exist

  1. add this line inside the <html> tag of the baseof.html file
{{ if .Site.Params.defaultThemeDark }}class="dark"{{ end }}

the new file should look something like this:

<html {{ if .Site.Params.defaultThemeDark }}class="dark"{{ end }} lang="{{ .Lang }}" itemscope itemtype="http://schema.org/WebPage">
  {{- partial "head.html" . -}}
  <body class="dark:bg-gray-800 dark:text-white relative flex flex-col min-h-screen">
    {{- partial "header.html" . -}}
    <main class="flex-1">
    {{- block "main" . }}{{- end }}
    </main>
    {{- partial "footer.html" . -}}
  </body>
</html>
  1. and finally add defaultThemeDark = true under [params] in the config.toml
[params]
  defaultThemeDark = true

@dbu9
Copy link
Author

dbu9 commented May 20, 2023

Thanks for the solution.
If I already caught you attention, can you advice about this issue:
#113

Adding links to the posts with the same tags are of huge importance for user experience. The user should not go back to the front page but can follow the post of the same theme from the page she's on.

@velduz
Copy link
Contributor

velduz commented Oct 13, 2023 •
edited
Loading

Hi all, the modifications above are not really a dark default where the end user can change to light. He can, but next time he opens the site, it will start in dark mode again.
Adding the dark class to the header is not the best solution. Better is to reverse the default in the script in the footer.

//  if (!darkStorage && isBrowserDark) {
//    document.documentElement.classList.add('dark');
//  }
//
//  if (darkStorage && darkStorage === 'dark') {
//    toggleDarkMode();
//  }

// Reversed logic: default to dark unless light mode is explicitly saved
  if (!darkStorage && !isBrowserDark) {
    document.documentElement.classList.remove('dark');
  } else {
    if (darkStorage && darkStorage === 'light') {
      document.documentElement.classList.remove('dark');
    } else {
      toggleDarkMode();
    }
  }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@velduz @dbu9 @nakibrayan3