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

feat: use different colors on text selection/highlight dark/light mode #338

Merged
merged 11 commits into from
Jun 17, 2024
Merged

feat: use different colors on text selection/highlight dark/light mode #338

Changes from 3 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
6b7f38b
feat: use different colors on text selection/highlight dark/light mode
May 3, 2024
075cdec
feat: use a better color for the text selection in the light mode
May 3, 2024
b82d6b3
Merge branch 'main' into yh/feat/text-selection-highlight-style
dgmouris May 6, 2024
c9f8a77
feat: create colors with opacity
May 29, 2024
f295226
chore: apply automated updates
autofix-ci[bot] May 29, 2024
9d9bc2c
fix: drop unnecessary changes from package.json
Jun 4, 2024
474fca6
chore: apply automated updates
autofix-ci[bot] Jun 4, 2024
6afcff9
Update package.json
MandyMeindersma Jun 17, 2024
47ec854
chore: apply automated updates
autofix-ci[bot] Jun 17, 2024
bdaef1b
Update package.json
MandyMeindersma Jun 17, 2024
27ba993
Merge branch 'main' into yh/feat/text-selection-highlight-style
MandyMeindersma Jun 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions assets/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,16 @@ p + p {
.nuxt-scroll-indicator {
@apply bg-gradient-to-r to-secondary from-blue-700;
}

/* We use this color just one time */
.light {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's easier to use tailwind syntax here, for example:

::selection: {
	@apply bg-[#d4b5d4] dark:bg-primary
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for your comment. I just realized that if we want to have different colors for different modes, we should use something like this.

::selection {
  @apply bg-secondary; // for light mode
}

.dark ::selection {
  @apply bg-primary;; // for dark mode
}

or if we want to use only one color for each mode, we can use your solution.
Let me know what you think about it.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@yaroslavhoretskyi Ah yes you're right, thanks

::selection {
background: #d4b5d4;
}
}

.dark {
::selection {
@apply bg-primary;
}
}