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

[simple theme] dark mode and some css cleanup #355

Merged
merged 7 commits into from Oct 10, 2021
Merged

[simple theme] dark mode and some css cleanup #355

merged 7 commits into from Oct 10, 2021

Conversation

mrpaulblack
Copy link
Member

@mrpaulblack mrpaulblack commented Sep 28, 2021 •
edited

What does this PR do?

This PR is adding a dark theme to the simple theme by:

  • replacing less vars by CSS vars (this also makes it possible for people to easily change the color theme in the compiled searx.css, since the preprocessor does not touch these css vars...)

  • dropping some of the vars (vars like @color-result-link-font seems a little to verbose!?)

  • change every hardcoded color in the theme to be a css var in defenitions.less

  • add a dark class with a dark color theme

  • update result design on tablet and mobile

  • Make UI elements bigger: more padding on search form and buttons

  • Minor changes and removed unused CSS (See commit messages)

Why is this change important?

Another PR to eventually have feature parity between simple and oscar theme... Also make the simple theme more polished...

How to test this PR locally?

make themes.simple

make run

Author's checklist

Dark Theme:

image
image
image

Light Theme:
image
image
image

Related issues

Partially solves: #347 and #176

@dalf
Copy link
Member

dalf commented Sep 29, 2021 •
edited

I'm not sure if it should be a new issue:
here a demo implementation about the dark theme https://gist.github.com/dalf/0f983799c20b75b441f8c089372f0cfe (only the wires between CSS, JS and cookies, not the actual changes).

  • the idea is have a new user preferences to choose between "automatic", "light", "dark" theme (only for the simple theme), more or less equivalent of "oscar-style" --> the user can choose the variant in the preferences.
  • on / and /search there is a button on the top right corner to switch between "light" and "dark".
    • this button is displayed only when JS is activated.
    • when clicked, this button makes a background call to /preferences to update the cookies (so only python code sets the cookies)
  • the CSS variables are on html, not ::root so the Jinja2 template defines the variant --> it works without Javascript (except the top right button).

If this suggestion is okay / makes sense:

  • I can create another PR with the changes about webapp.py + 00_searx_toolkit.js
  • or you can copy / paste / modify the code from the gist.

@mrpaulblack mrpaulblack force-pushed the simple-theme-css-vars branch 3 times, most recently from 1394dfe to 62ed00d Compare October 6, 2021 19:10
@mrpaulblack mrpaulblack force-pushed the simple-theme-css-vars branch 3 times, most recently from e04ebac to 9e90bc8 Compare October 9, 2021 13:47
@mrpaulblack mrpaulblack changed the title start work on dark theme [simple theme] dark mode and some css cleanup Oct 9, 2021
@mrpaulblack mrpaulblack marked this pull request as ready for review October 9, 2021 13:49
@mrpaulblack
Copy link
Member Author

mrpaulblack commented Oct 9, 2021 •
edited

@dalf Sorry for the late reply... Can you please test my progress with the simple theme? I am not a UI dev and I just tested different colors until the updated light theme and the dark theme looked good to me (heavily opinionated tho). Right now I basically just cleaned up the stylesheets and removed unused stuff as well as reworking the CSS vars...

The next step is to implement the options for the user to choose between light, dark and auto... (I dont really have time for that right now tho, since university is going to start for me on Monday again... But I wanted to at least finish the dark theme until then...)

[EDIT] I also played around with transitions. But in my opinion they only look good, if every viewable element uses that transition, which works on the startpage and about page, but on the result view there are just too many elements... So instead of putting the transition only on the html and important elements, I would rather leave them out completely... I think it looks kinda odd when the background has a transition on theme switch, but the rest of the page transitions instantly... What do you think about that? (But I would still use transition on focus and hover elements in the future tho...)

@mrpaulblack
[theme] convert less vars to css vars in simple theme
452b266
@mrpaulblack
[theme] replace all hardcoded colors by css vars and drop ununsed vars
7c2a518
@mrpaulblack
Redo Color Theme and css cleanup
740fca0 
* remove vars and add elements to base and btn vars
* change default border radius to 10px and padding to 0.7em
* put border radius and padding on search input form, infoxbox and buttons
* remove unused .help class in #categories_container
* remove active background from tabs to straemline design
* redo search form: 10px padding
* 2rem margin on search results on desktop
* fix modal pacement of engine reliability in prefs
* use darker accent colors
* streamline autocomplete with more padding and a hover effect
@mrpaulblack
[template] move result url to top of article
09324f3
@mrpaulblack
[simple theme] new color theme and result on mobile and tablet
3daa024 
* clean up vars in defenition
* results look now the same on mobile and desktop
* reworked results on mobile
* new color theme with more vibrant colors
@mrpaulblack
[simple theme] add a dark theme
bc2c8e6 
* add a new color theme for a dark mode
* make the device auto switch between dark and light theme
@dalf
Copy link
Member

dalf commented Oct 10, 2021

Thank you for this amazing work.

I'm going to merge your PR.

There are few things here and there, but it can be discuss in other pull requests / issues. ( for example 09324f3 )

@dalf dalf merged commit 7f72844 into searxng:master Oct 10, 2021
@mrpaulblack mrpaulblack deleted the simple-theme-css-vars branch October 10, 2021 08:40
@dalf dalf mentioned this pull request Oct 12, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@mrpaulblack @dalf