ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-04-30 14:44:28 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: Apply themes on specific events (#227)

Browse Source 
Signed-off-by: oSumAtrIX <johan.melkonyan1@web.de>
This commit is contained in:
madkarmaa 2024-08-13 13:18:56 +02:00 committed by oSumAtrIX
parent f428902773
commit bc8e19e0e7
No known key found for this signature in database
GPG Key ID: A9B3094ACDB604B4
30 changed files with 2068 additions and 1701 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@ -18,7 +18,7 @@
"@sveltejs/vite-plugin-svelte": "3.1.1", "@sveltejs/vite-plugin-svelte": "3.1.1",
"@typescript-eslint/eslint-plugin": "7.16.0", "@typescript-eslint/eslint-plugin": "7.16.0",
"@typescript-eslint/parser": "7.16.0", "@typescript-eslint/parser": "7.16.0",
"eslint": "^8.56.0", "eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "2.42.0", "eslint-plugin-svelte": "2.42.0",
"fuse.js": "^7.0.0", "fuse.js": "^7.0.0",
@ -42,6 +42,7 @@
"@tanstack/query-core": "^4.36.1", "@tanstack/query-core": "^4.36.1",
"@tanstack/query-persist-client-core": "^4.36.1", "@tanstack/query-persist-client-core": "^4.36.1",
"@tanstack/query-sync-storage-persister": "^4.36.1", "@tanstack/query-sync-storage-persister": "^4.36.1",
"@tanstack/svelte-query": "^4.36.1" "@tanstack/svelte-query": "^4.36.1",
"datetrigger": "^1.1.1"
} }
} }

3405
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

84
src/app.scss
View File

@ -6,6 +6,10 @@
padding: 0; padding: 0;
font-family: var(--main-font); font-family: var(--main-font);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
transition:
color 0.5s ease-in-out,
background-color 0.5s ease-in-out,
fill 0.5s ease-in-out;
} }
html { html {
@ -19,7 +23,7 @@ html {
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: var(--bg-color); background-color: var(--background-one);
} }
html, html,
@ -34,39 +38,55 @@ body {
} }
:root { :root {
/* TODO properly name these */
--main-font: 'Manrope', sans-serif; --main-font: 'Manrope', sans-serif;
--mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; --mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
--white: hsl(206, 100%, 94%);
--accent-color: hsl(206, 100%, 81%); --text-one: hsl(calc(var(--hue, 206) + 0), 100%, 94%);
--accent-color-two: hsl(208, 75%, 82%); --surface-one: hsl(calc(var(--hue, 206) + 0), 100%, 94%);
--accent-low-opacity: hsla(205, 91%, 69%, 0.15);
--bg-color: hsl(252, 10%, 11%); --primary: hsl(calc(var(--hue, 206) + 0), 100%, 81%);
--grey-one: hsl(210, 14%, 17%);
--grey-two: hsl(212, 19%, 19%); --secondary: hsl(calc(var(--hue, 206) + 2), 75%, 82%);
--grey-three: hsl(221, 17%, 26%);
--grey-four: hsl(226, 48%, 18%); --tertiary: hsla(calc(var(--hue, 206) - 1), 91%, 69%, 0.15);
--grey-five: hsl(208, 30%, 75%);
--grey-six: hsl(230, 9%, 13%); --background-one: hsl(calc(var(--hue, 206) + 46), 10%, 11%);
--grey-seven: hsl(240, 9%, 13.5%); --surface-two: hsl(calc(var(--hue, 206) + 46), 10%, 11%);
--grey-eight: hsla(207, 30%, 75%, 0.577);
--grey-nine: hsla(240, 6%, 7%, 0.3); --surface-three: hsl(calc(var(--hue, 206) + 4), 14%, 17%);
--grey-ten: hsl(230, 9.5%, 17.5%);
--grey-eleven: hsl(208, 10%, 40%); --surface-four: hsl(calc(var(--hue, 206) + 6), 19%, 19%);
--text-two: hsl(calc(var(--hue, 206) + 6), 19%, 19%);
--border: hsl(calc(var(--hue, 206) + 15), 17%, 26%);
--surface-five: hsl(calc(var(--hue, 206) + 15), 17%, 26%);
--text-three: hsl(calc(var(--hue, 206) + 20), 48%, 18%);
--text-four: hsl(calc(var(--hue, 206) + 2), 30%, 75%);
--surface-six: hsl(calc(var(--hue, 206) + 2), 30%, 75%);
--surface-seven: hsl(calc(var(--hue, 206) + 24), 9%, 13%);
--surface-eight: hsl(calc(var(--hue, 206) + 34), 9%, 13.5%);
--surface-nine: hsl(calc(var(--hue, 206) + 24), 9.5%, 17.5%);
--red-one: hsl(333, 84%, 62%); --red-one: hsl(333, 84%, 62%);
--bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94); --bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--drop-shadow-one: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), --drop-shadow-one: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
0px 2px 4px -1px rgba(0, 0, 0, 0.2); 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
} }
::selection { ::selection {
background-color: var(--accent-low-opacity); background-color: var(--tertiary);
} }
/*-----headings-----*/ /*-----headings-----*/
h1 { h1 {
color: var(--white); color: var(--text-one);
line-height: 4rem; line-height: 4rem;
font-size: 3.5rem; font-size: 3.5rem;
font-weight: 700; font-weight: 700;
@ -74,7 +94,7 @@ h1 {
} }
h2 { h2 {
color: var(--grey-five); color: var(--text-four);
font-size: 2.5rem; font-size: 2.5rem;
letter-spacing: -0.04rem; letter-spacing: -0.04rem;
font-weight: 600; font-weight: 600;
@ -82,12 +102,12 @@ h2 {
h3 { h3 {
font-size: 1.25rem; font-size: 1.25rem;
color: var(--accent-color-two); color: var(--secondary);
font-weight: 600; font-weight: 600;
} }
h4 { h4 {
color: var(--accent-color-two); color: var(--secondary);
font-weight: 400; font-weight: 400;
font-size: 1rem; font-size: 1rem;
letter-spacing: 0.02rem; letter-spacing: 0.02rem;
@ -95,20 +115,20 @@ h4 {
} }
h5 { h5 {
color: var(--grey-five); color: var(--text-four);
font-weight: 400; font-weight: 400;
font-size: 0.9rem; font-size: 0.9rem;
letter-spacing: 0.02rem; letter-spacing: 0.02rem;
} }
h6 { h6 {
color: var(--grey-five); color: var(--text-four);
font-weight: 500; font-weight: 500;
font-size: 0.85rem; font-size: 0.85rem;
} }
p { p {
color: var(--grey-five); color: var(--text-four);
font-weight: 400; font-weight: 400;
font-size: 1rem; font-size: 1rem;
letter-spacing: 0.02rem; letter-spacing: 0.02rem;
@ -134,30 +154,30 @@ p {
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: var(--accent-color); background-color: var(--primary);
background-clip: content-box; background-clip: content-box;
border-radius: 100px; border-radius: 100px;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background-color: var(--grey-three); background-color: var(--surface-five);
} }
hr { hr {
display: block; display: block;
height: 1px; height: 1px;
border: 0; border: 0;
border-top: 1px solid var(--grey-three); border-top: 1px solid var(--border);
} }
input { input {
padding: 1rem; padding: 1rem;
border-radius: 12px; border-radius: 12px;
border: 1px solid var(--grey-three); border: 1px solid var(--border);
background-color: transparent; background-color: transparent;
color: var(--accent-color-two); color: var(--secondary);
} }
input:focus { input:focus {
outline: 1px solid var(--accent-color); outline: 1px solid var(--primary);
} }

16
src/layout/Footer/FooterHost.svelte
View File

@ -105,35 +105,35 @@
#logo-name { #logo-name {
font-size: 1.4rem; font-size: 1.4rem;
color: var(--white); color: var(--text-one);
font-weight: 600; font-weight: 600;
} }
#logo-name span { #logo-name span {
color: var(--accent-color); color: var(--primary);
} }
.footer-bottom a { .footer-bottom a {
text-decoration: none; text-decoration: none;
color: var(--grey-five); color: var(--text-four);
font-weight: 600; font-weight: 600;
} }
li { li {
list-style: none; list-style: none;
color: var(--grey-five); color: var(--text-four);
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 500; font-weight: 500;
} }
li a { li a {
color: var(--accent-color); color: var(--primary);
font-weight: 600; font-weight: 600;
font-size: 0.95rem; font-size: 0.95rem;
} }
path { path {
stroke: var(--grey-three); stroke: var(--border);
} }
.main-content { .main-content {
@ -152,8 +152,8 @@
} }
a:hover { a:hover {
text-decoration: underline var(--accent-color-two); text-decoration: underline var(--secondary);
color: var(--white); color: var(--text-one);
} }
.links-container { .links-container {

4
src/layout/Footer/FooterSection.svelte
View File

@ -34,7 +34,7 @@
<style lang="scss"> <style lang="scss">
span { span {
list-style: none; list-style: none;
color: var(--grey-five); color: var(--text-four);
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 600; font-weight: 600;
} }
@ -58,7 +58,7 @@
} }
.mobile-only:not(:last-child) { .mobile-only:not(:last-child) {
border-bottom: 1px solid var(--grey-three); border-bottom: 1px solid var(--border);
} }
.mobile-only { .mobile-only {

2
src/layout/Hero/HeroImage.svelte
View File

@ -22,7 +22,7 @@
float: right; float: right;
padding: 0.5rem 0.5rem; padding: 0.5rem 0.5rem;
border-radius: 1.75rem; border-radius: 1.75rem;
background-color: var(--grey-six); background-color: var(--surface-seven);
user-select: none; user-select: none;
} }
@media (max-width: 1700px) { @media (max-width: 1700px) {

4
src/layout/Hero/HeroSection.svelte
View File

@ -17,7 +17,7 @@
<style> <style>
h1 { h1 {
color: var(--white); color: var(--text-one);
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
@ -40,7 +40,7 @@
} }
span { span {
color: var(--accent-color); color: var(--primary);
} }
@media (max-width: 767px) { @media (max-width: 767px) {

4
src/layout/Hero/SocialButton.svelte
View File

@ -18,8 +18,8 @@
cursor: pointer; cursor: pointer;
border-radius: 200px; border-radius: 200px;
transition: transform 0.4s var(--bezier-one); transition: transform 0.4s var(--bezier-one);
background-color: var(--grey-two); background-color: var(--surface-four);
color: var(--white); color: var(--text-one);
user-select: none; user-select: none;
} }

12
src/layout/Navbar/NavButton.svelte
View File

@ -57,21 +57,21 @@
font-weight: 400; font-weight: 400;
font-size: 0.9rem; font-size: 0.9rem;
letter-spacing: 0.02rem; letter-spacing: 0.02rem;
color: var(--grey-five); color: var(--text-four);
} }
li:hover { li:hover {
color: var(--white); color: var(--text-one);
background-color: var(--grey-one); background-color: var(--surface-three);
} }
li.selected { li.selected {
background-color: var(--accent-low-opacity); background-color: var(--tertiary);
color: var(--accent-color); color: var(--primary);
} }
li.selected span { li.selected span {
color: var(--accent-color); color: var(--primary);
} }
@media (max-width: 767px) { @media (max-width: 767px) {

14
src/layout/Navbar/NavHost.svelte
View File

@ -143,11 +143,11 @@
} }
path { path {
fill: var(--grey-five); fill: var(--surface-six);
} }
button:hover path { button:hover path {
fill: var(--accent-color-two); fill: var(--secondary);
} }
button { button {
@ -189,7 +189,7 @@
padding: 1rem 2rem; padding: 1rem 2rem;
z-index: 666; z-index: 666;
height: 70px; height: 70px;
background-color: var(--grey-seven); background-color: var(--surface-eight);
width: 100%; width: 100%;
} }
@ -250,7 +250,7 @@
top: 0px; top: 0px;
border-radius: 0px 24px 24px 0px; border-radius: 0px 24px 24px 0px;
left: 0px; left: 0px;
background-color: var(--grey-seven); background-color: var(--surface-eight);
padding: 1rem; padding: 1rem;
padding-top: 6rem; padding-top: 6rem;
z-index: 100; z-index: 100;
@ -303,7 +303,7 @@
.menu-btn__burger::after { .menu-btn__burger::after {
width: 24px; width: 24px;
height: 2px; height: 2px;
background: var(--grey-five); background: var(--surface-six);
transition: all 0.3s var(--bezier-one); transition: all 0.3s var(--bezier-one);
} }
@ -336,9 +336,9 @@
left: -300px; left: -300px;
border-radius: 100px; border-radius: 100px;
text-decoration: none; text-decoration: none;
background-color: var(--accent-color); background-color: var(--primary);
z-index: 10; z-index: 10;
color: var(--grey-four); color: var(--text-three);
font-weight: 600; font-weight: 600;
font-size: 0.95rem; font-size: 0.95rem;
padding: 16px 24px; padding: 16px 24px;

10
src/lib/components/Button.svelte
View File

@ -35,7 +35,7 @@
min-width: max-content; min-width: max-content;
font-size: 0.95rem; font-size: 0.95rem;
text-decoration: none; text-decoration: none;
color: var(--white); color: var(--text-one);
font-weight: 600; font-weight: 600;
border: none; border: none;
border-radius: 100px; border-radius: 100px;
@ -51,11 +51,11 @@
} }
.button-filled { .button-filled {
background-color: var(--accent-color); background-color: var(--primary);
color: var(--grey-four); color: var(--text-three);
} }
.button-tonal { .button-tonal {
background-color: var(--grey-two); background-color: var(--surface-four);
} }
.button-filled, .button-filled,
@ -65,7 +65,7 @@
.button-text { .button-text {
background-color: transparent; background-color: transparent;
color: var(--accent-color); color: var(--primary);
font-weight: 500; font-weight: 500;
letter-spacing: 0.01rem; letter-spacing: 0.01rem;
} }

6
src/lib/components/Dialogue.svelte
View File

@ -92,7 +92,7 @@
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
width: 100%; width: 100%;
background-color: var(--grey-six); background-color: var(--surface-seven);
} }
.buttons { .buttons {
@ -119,7 +119,7 @@
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
border-radius: 26px; border-radius: 26px;
background-color: var(--grey-six); background-color: var(--surface-seven);
display: flex; display: flex;
gap: 5%; gap: 5%;
white-space: normal; white-space: normal;
@ -170,7 +170,7 @@
} }
.fullscreen.scrolled .title { .fullscreen.scrolled .title {
border-bottom: 1px solid var(--grey-three); border-bottom: 1px solid var(--border);
} }
.slot { .slot {

8
src/lib/components/FilterChip.svelte
View File

@ -18,9 +18,9 @@
button { button {
font-family: var(--font-two); font-family: var(--font-two);
border: none; border: none;
border: 1.5px solid var(--grey-three); border: 1.5px solid var(--border);
background-color: transparent; background-color: transparent;
color: var(--grey-five); color: var(--text-four);
height: 32px; height: 32px;
padding: 0 16px; padding: 0 16px;
border-radius: 8px; border-radius: 8px;
@ -32,8 +32,8 @@
} }
.selected { .selected {
background-color: var(--accent-low-opacity); background-color: var(--tertiary);
color: var(--accent-color); color: var(--primary);
} }
img { img {

12
src/lib/components/Search.svelte
View File

@ -67,29 +67,29 @@
display: flex; display: flex;
padding: 1rem 3.25rem; padding: 1rem 3.25rem;
width: 100%; width: 100%;
color: var(--accent-color-two); color: var(--secondary);
font-weight: 500; font-weight: 500;
font-size: 0.92rem; font-size: 0.92rem;
border-radius: 100px; border-radius: 100px;
border: none; border: none;
background-color: var(--grey-ten); background-color: var(--surface-nine);
outline: none; outline: none;
transition: background-color 0.3s var(--bezier-one); transition: background-color 0.3s var(--bezier-one);
&:hover { &:hover {
background-color: var(--grey-three); background-color: var(--surface-five);
} }
&:focus::placeholder { &:focus::placeholder {
color: var(--accent-color); color: var(--primary);
} }
&:focus { &:focus {
background-color: var(--bg-color); background-color: var(--surface-two);
} }
} }
input::placeholder { input::placeholder {
color: var(--grey-five); color: var(--text-four);
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 500; font-weight: 500;
transition: all 0.2s var(--bezier-one); transition: all 0.2s var(--bezier-one);

4
src/lib/components/Snackbar.svelte
View File

@ -46,13 +46,13 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 2rem; bottom: 2rem;
background-color: var(--white); background-color: var(--surface-one);
transition: all 0.4s var(--bezier-one); transition: all 0.4s var(--bezier-one);
box-shadow: var(--drop-shadow-one); box-shadow: var(--drop-shadow-one);
} }
.text { .text {
color: var(--grey-two); color: var(--text-two);
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
} }

2
src/lib/components/Spinner.svelte
View File

@ -24,7 +24,7 @@
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
border: 4.5px solid transparent; border: 4.5px solid transparent;
border-top-color: var(--accent-color); border-top-color: var(--primary);
animation: spinner 0.6s linear infinite; animation: spinner 0.6s linear infinite;
} }
</style> </style>

2
src/lib/components/Wave.svelte
View File

@ -15,7 +15,7 @@
animation: wave-anim 40s; animation: wave-anim 40s;
animation-timing-function: linear; animation-timing-function: linear;
animation-iteration-count: infinite; animation-iteration-count: infinite;
fill: var(--accent-color); fill: var(--primary);
} }
@keyframes wave-anim { @keyframes wave-anim {

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

2
src/routes/+error.svelte
View File

@ -28,6 +28,6 @@
} }
h1 { h1 {
color: var(--accent-color); color: var(--primary);
} }
</style> </style>

4
src/routes/+layout.svelte
View File

@ -14,6 +14,7 @@
import { persistQueryClient } from '@tanstack/query-persist-client-core'; import { persistQueryClient } from '@tanstack/query-persist-client-core';
import { QueryClientProvider } from '@tanstack/svelte-query'; import { QueryClientProvider } from '@tanstack/svelte-query';
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'; import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister';
import { DateTriggerEventHandler } from 'datetrigger';
import NavHost from '$layout/Navbar/NavHost.svelte'; import NavHost from '$layout/Navbar/NavHost.svelte';
import Spinner from '$lib/components/Spinner.svelte'; import Spinner from '$lib/components/Spinner.svelte';
@ -21,6 +22,7 @@
import Button from '$lib/components/Button.svelte'; import Button from '$lib/components/Button.svelte';
import { staleTime } from '$data/api'; import { staleTime } from '$data/api';
import RouterEvents from '$data/RouterEvents'; import RouterEvents from '$data/RouterEvents';
import { events as themeEvents } from '$util/themeEvents';
const queryClient = new QueryClient({ const queryClient = new QueryClient({
defaultOptions: { defaultOptions: {
@ -41,6 +43,8 @@
} }
onMount(() => { onMount(() => {
new DateTriggerEventHandler(themeEvents);
// Check if the user has already decided. // Check if the user has already decided.
const hasDecided = localStorage.getItem('analytics') !== null; const hasDecided = localStorage.getItem('analytics') !== null;

10
src/routes/contributors/+page.svelte
View File

@ -74,13 +74,13 @@
h2 { h2 {
text-align: center; text-align: center;
color: var(--grey-four); color: var(--text-three);
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
} }
p { p {
text-align: center; text-align: center;
color: var(--grey-four); color: var(--text-three);
} }
.text-container { .text-container {
@ -88,14 +88,14 @@
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
margin-bottom: 2rem; margin-bottom: 2rem;
background-color: var(--accent-color); background-color: var(--primary);
padding: 2.5rem 1.75rem; padding: 2.5rem 1.75rem;
border-radius: 20px; border-radius: 20px;
} }
a { a {
text-decoration: none; text-decoration: none;
color: var(--grey-four); color: var(--text-three);
} }
a::after { a::after {
@ -106,7 +106,7 @@
} }
a:hover { a:hover {
text-decoration: underline var(--grey-four); text-decoration: underline var(--text-three);
} }
a:hover::after { a:hover::after {

14
src/routes/contributors/ContributorPerson.svelte
View File

@ -12,7 +12,7 @@
<style> <style>
a { a {
color: var(--white); color: var(--text-one);
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
padding: 0.9rem 1rem; padding: 0.9rem 1rem;
@ -21,14 +21,14 @@
display: flex; display: flex;
gap: 1rem; gap: 1rem;
align-items: center; align-items: center;
border-right: 1px solid var(--grey-three); border-right: 1px solid var(--border);
border-bottom: 1px solid var(--grey-three); border-bottom: 1px solid var(--border);
} }
a:hover { a:hover {
background: var(--grey-one); background: var(--surface-three);
text-decoration: underline var(--accent-color); text-decoration: underline var(--primary);
color: var(--white); color: var(--text-one);
} }
h5 { h5 {
@ -42,7 +42,7 @@
border-radius: 50%; border-radius: 50%;
height: 32px; height: 32px;
width: 32px; width: 32px;
background-color: var(--grey-two); background-color: var(--surface-four);
transition: transform 0.4s var(--bezier-one); transition: transform 0.4s var(--bezier-one);
user-select: none; user-select: none;
} }

12
src/routes/contributors/ContributorSection.svelte
View File

@ -48,13 +48,13 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
cursor: pointer; cursor: pointer;
background-color: var(--grey-six); background-color: var(--surface-seven);
padding: 0.75rem 1.25rem; padding: 0.75rem 1.25rem;
border-bottom: 1px solid var(--grey-three); border-bottom: 1px solid var(--border);
transition: all 0.2s var(--bezier-one); transition: all 0.2s var(--bezier-one);
&:hover { &:hover {
background-color: var(--grey-one); background-color: var(--surface-three);
} }
} }
@ -71,7 +71,7 @@
.section-container { .section-container {
border-radius: 20px; border-radius: 20px;
overflow: hidden; overflow: hidden;
border: 1px solid var(--grey-three); border: 1px solid var(--border);
} }
a { a {
@ -82,8 +82,8 @@
} }
a:hover { a:hover {
text-decoration: underline var(--accent-color); text-decoration: underline var(--primary);
color: var(--white); color: var(--text-one);
} }
.contrib-host { .contrib-host {

14
src/routes/donate/+page.svelte
View File

@ -73,7 +73,7 @@
<main class="wrapper" in:fly={{ y: 10, easing: quintOut, duration: 750 }}> <main class="wrapper" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<section> <section>
<div> <div>
<h2>🎉 Support <span style="color: var(--accent-color);">ReVanced</span></h2> <h2>🎉 Support <span style="color: var(--primary);">ReVanced</span></h2>
<p> <p>
ReVanced offers a variety of patches, including ad-blocking, custom themes, and innovative ReVanced offers a variety of patches, including ad-blocking, custom themes, and innovative
features. All of which is completely open source and free of charge. Donating will allow features. All of which is completely open source and free of charge. Donating will allow
@ -221,7 +221,7 @@
h2 { h2 {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
color: var(--white); color: var(--text-one);
} }
h3 { h3 {
@ -260,7 +260,7 @@
.donate-card { .donate-card {
text-decoration: none; text-decoration: none;
background-color: var(--grey-ten); background-color: var(--surface-nine);
border-radius: 1.5rem; border-radius: 1.5rem;
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
@ -272,7 +272,7 @@
0.3s background-color var(--bezier-one); 0.3s background-color var(--bezier-one);
&:hover { &:hover {
background-color: var(--accent-low-opacity); background-color: var(--tertiary);
} }
&:active { &:active {
@ -281,7 +281,7 @@
span { span {
display: block; display: block;
color: var(--grey-five); color: var(--text-four);
font-size: 1.05rem; font-size: 1.05rem;
font-weight: 500; font-weight: 500;
padding: 1.5rem; padding: 1.5rem;
@ -308,12 +308,12 @@
font-size: 0.9rem; font-size: 0.9rem;
background-color: transparent; background-color: transparent;
border: none; border: none;
color: var(--grey-five); color: var(--text-four);
cursor: pointer; cursor: pointer;
text-align: left; text-align: left;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background-color: var(--grey-six); background-color: var(--surface-seven);
padding: 0.75rem 1.25rem; padding: 0.75rem 1.25rem;
transition: filter 0.4s var(--bezier-one); transition: filter 0.4s var(--bezier-one);

6
src/routes/donate/TeamMember.svelte
View File

@ -28,8 +28,8 @@
<style lang="scss"> <style lang="scss">
.member { .member {
width: 100%; width: 100%;
color: var(--white); color: var(--text-one);
border: 1px solid var(--grey-three); border: 1px solid var(--border);
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
padding: 1rem; padding: 1rem;
@ -39,7 +39,7 @@
transition: 0.3s background-color var(--bezier-one); transition: 0.3s background-color var(--bezier-one);
&:hover { &:hover {
background-color: var(--grey-six); background-color: var(--surface-seven);
} }
} }

6
src/routes/download/+page.svelte
View File

@ -123,7 +123,7 @@
h2 { h2 {
text-align: center; text-align: center;
color: var(--white); color: var(--text-one);
} }
p { p {
@ -138,7 +138,7 @@
width: auto; width: auto;
padding: 0.5rem 0.5rem; padding: 0.5rem 0.5rem;
border-radius: 2rem; border-radius: 2rem;
background-color: var(--grey-six); background-color: var(--surface-seven);
user-select: none; user-select: none;
} }
@ -148,6 +148,6 @@
} }
span { span {
color: var(--accent-color); color: var(--primary);
} }
</style> </style>

4
src/routes/patches/+page.svelte
View File

@ -209,7 +209,7 @@
.search { .search {
padding-top: 5rem; padding-top: 5rem;
padding-bottom: 1.25rem; padding-bottom: 1.25rem;
background-color: var(--grey-seven); background-color: var(--surface-eight);
} }
.search-contain { .search-contain {
@ -239,7 +239,7 @@
margin-bottom: -1px; margin-bottom: -1px;
overflow: hidden; overflow: hidden;
border-radius: 12px; border-radius: 12px;
border: 1px solid var(--grey-three); border: 1px solid var(--border);
} }
@media (min-width: 768px) { @media (min-width: 768px) {

20
src/routes/patches/Package.svelte
View File

@ -46,21 +46,21 @@
width: 100%; width: 100%;
user-select: none; user-select: none;
transition: background-color 0.4s var(--bezier-one); transition: background-color 0.4s var(--bezier-one);
color: var(--grey-five); color: var(--text-four);
transition: color 0.3s var(--bezier-one); transition: color 0.3s var(--bezier-one);
} }
.selected { .selected {
color: var(--accent-color); color: var(--primary);
transition: color 0.3s var(--bezier-one); transition: color 0.3s var(--bezier-one);
background-color: var(--accent-low-opacity); background-color: var(--tertiary);
} }
.package:hover:not(.selected) { .package:hover:not(.selected) {
background-color: var(--grey-six); background-color: var(--surface-seven);
} }
.package:not(.selected):hover { .package:not(.selected):hover {
color: var(--white); color: var(--text-one);
} }
@media (max-width: 767px) { @media (max-width: 767px) {
@ -73,17 +73,17 @@
word-break: break-all; word-break: break-all;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
color: var(--grey-five); color: var(--text-four);
border-bottom: 1px solid var(--grey-three); border-bottom: 1px solid var(--border);
} }
.selected { .selected {
color: var(--accent-color); color: var(--primary);
background-color: var(--accent-low-opacity); background-color: var(--tertiary);
} }
.package:not(.selected):hover { .package:not(.selected):hover {
color: var(--grey-five); color: var(--text-four);
} }
} }
</style> </style>

4
src/routes/patches/PackageMenu.svelte
View File

@ -23,7 +23,7 @@
background-color: transparent; background-color: transparent;
} }
.menu:hover::-webkit-scrollbar-thumb { .menu:hover::-webkit-scrollbar-thumb {
background-color: var(--accent-color); background-color: var(--primary);
} }
.slot { .slot {
@ -37,7 +37,7 @@
h6 { h6 {
margin-bottom: 1rem; margin-bottom: 1rem;
color: var(--accent-color); color: var(--primary);
} }
@media (max-width: 767px) { @media (max-width: 767px) {

24
src/routes/patches/PatchItem.svelte
View File

@ -100,7 +100,7 @@
h3 { h3 {
margin-right: 0.5rem; margin-right: 0.5rem;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
color: var(--accent-color); color: var(--primary);
} }
#option-description { #option-description {
@ -109,7 +109,7 @@
} }
#option-title { #option-title {
color: var(--accent-color-two); color: var(--secondary);
} }
.button { .button {
@ -124,23 +124,23 @@
list-style: none; list-style: none;
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 500; font-weight: 500;
color: var(--grey-five); color: var(--text-four);
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
border: 1px solid var(--grey-three); border: 1px solid var(--border);
border-radius: 8px; border-radius: 8px;
&:hover { &:hover {
background-color: var(--grey-two); background-color: var(--surface-four);
} }
} }
a { a {
text-decoration: none; text-decoration: none;
color: var(--grey-five); color: var(--text-four);
&:hover { &:hover {
text-decoration: underline var(--accent-color-two); text-decoration: underline var(--secondary);
color: var(--accent-color-two); color: var(--secondary);
} }
} }
@ -155,7 +155,7 @@
.patch-container { .patch-container {
transition: all 0.1s var(--bezier-one); transition: all 0.1s var(--bezier-one);
background-color: var(--grey-six); background-color: var(--surface-seven);
padding: 1.25rem; padding: 1.25rem;
border-radius: 12px; border-radius: 12px;
} }
@ -184,7 +184,7 @@
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: var(--grey-one); background-color: var(--surface-three);
} }
&:active { &:active {
@ -198,11 +198,11 @@
/* thanks piknik */ /* thanks piknik */
.option + .option { .option + .option {
border-top: 1px solid var(--grey-three); border-top: 1px solid var(--border);
} }
.options { .options {
border: 1px solid var(--grey-three); border: 1px solid var(--border);
overflow: hidden; overflow: hidden;
border-radius: 8px; border-radius: 8px;
margin-top: 1rem; margin-top: 1rem;

55
src/util/themeEvents.ts Normal file
View File

@ -0,0 +1,55 @@
import { DateTriggerEvent, DAY_IN_MINUTES } from 'datetrigger';
const changeHue = (n: number) => document.documentElement.style.setProperty('--hue', n.toString());
/**
* Get the date of when easter should happen based off a given year
* @param Y The year to get Easter's date from
* @returns When Easter should happen
*/
function getEaster(Y: number): Date {
const a = Y % 19,
b = Math.floor(Y / 100),
c = Y % 100,
d = Math.floor(b / 4),
e = b % 4,
f = Math.floor((b + 8) / 25),
g = Math.floor((b - f + 1) / 3),
h = (19 * a + b - d - g + 15) % 30,
i = Math.floor(c / 4),
k = c % 4,
L = (32 + 2 * e + 2 * i - h - k) % 7,
m = Math.floor((a + 11 * h + 22 * L) / 451),
month = Math.floor((h + L - 7 * m + 114) / 31),
day = ((h + L - 7 * m + 114) % 31) + 1;
return new Date(Y, month - 1, day);
}
const currentYear = new Date().getFullYear();
export const events: DateTriggerEvent[] = [
// New Year.
new DateTriggerEvent(new Date(currentYear, 0, 1), DAY_IN_MINUTES, () => {
changeHue(240);
}),
// Christmas.
new DateTriggerEvent(new Date(currentYear, 11, 25), DAY_IN_MINUTES, () => {
changeHue(120);
}),
// Valentine's day.
new DateTriggerEvent(new Date(currentYear, 1, 14), DAY_IN_MINUTES, () => {
changeHue(300);
}),
// Halloween.
new DateTriggerEvent(new Date(currentYear, 9, 31), DAY_IN_MINUTES, () => {
changeHue(0);
}),
// Easter.
new DateTriggerEvent(getEaster(currentYear), DAY_IN_MINUTES, () => {
changeHue(100);
}),
// April Fools.
new DateTriggerEvent(new Date(currentYear, 3, 1), DAY_IN_MINUTES, () => {
changeHue(69);
})
];