Skip to content

Commit

Permalink
improved light mode styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@henripar
henripar committed Sep 25, 2023
1 parent 5ea416d commit 0153bd6
Show file tree
Hide file tree
Showing 5 changed files with 115 additions and 91 deletions.
Binary file added logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 22 additions & 8 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ export default {
},
methods: {
updateTheme(e) {
this.theme = e.target.checked ? "light" : "dark";
document.body.classList.toggle("light-mode");
this.theme = this.theme == 'dark' ? 'light' : 'dark';
document.body.classList.toggle('light-mode');
},
updateThumbColor(e) {
this.thumbColor = e;
Expand Down Expand Up @@ -140,11 +140,6 @@ body::-webkit-scrollbar-thumb {
</script>

<template>
<ToggleTheme
@toggleLightMode="updateTheme"
:theme="theme === 'light'"
class="codeOutputContainer"
/>
<header>
<img class="logo" src="./assets/logo.png" alt="logo" />
<h1 class="title">Scrollbar.app</h1>
Expand Down Expand Up @@ -227,6 +222,12 @@ body::-webkit-scrollbar-thumb {
/>
</span>
</div>
<h3 :class="theme">Theme</h3>
<ToggleTheme
@toggleLightMode="updateTheme"
:theme="theme === 'light'"
:class="toggelBtn"
/>
<div class="githubBtnContainer">
<a
:class="theme"
Expand Down Expand Up @@ -378,6 +379,12 @@ body::-webkit-scrollbar-thumb {
margin: 1rem 0;
}
.toggleBtn {
display: flex;
align-items: center;
justify-content: center;
}
header {
display: flex;
flex-direction: row;
Expand All @@ -392,6 +399,13 @@ h2.light {
color: #2c3e50;
}
h3 {
color: #ffffffe3;
}
h3.light {
color: #2c3e50;
}
.codeOutput {
margin-top: 1rem;
}
Expand Down Expand Up @@ -453,7 +467,7 @@ h2.light {
}
.highlight {
background-color: #232e33;
background-color: var(--color-highlight-dark);
padding: 0.1rem 0.2rem;
border-radius: 5px;
color: rgba(255, 255, 255, 0.77);
Expand Down
24 changes: 21 additions & 3 deletions src/assets/base.css
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
/* color palette from <https://github.com/vuejs/theme> */
:root {
--vt-c-white: #ffffff;
--vt-c-white: #fbfbfb;
--vt-c-white-soft: #f8f8f8;
--vt-c-white-mute: #f2f2f2;
--vt-c-preview-background: #fff;

--vt-c-black: #0d1117;
--vt-c-black-soft: #222222;
Expand All @@ -16,7 +17,7 @@
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);

--vt-c-text-light-1: var(--vt-c-indigo);
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
--vt-c-text-light-2: rgba(60, 60, 60, 0.91);
--vt-c-text-dark-1: var(--vt-c-white);
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}
Expand All @@ -35,6 +36,14 @@
--color-text: var(--vt-c-text-dark-2);
--color-text-light: var(--vt-c-text-light-2);

--color-preview-background: var(--vt-c-black);
--color-preview-border: transparent;

--color-highlight-dark: var(--vt-c-black);
--color-highlight: #232e33;
--color-highlight-light: #ececec;
--color-text-strong: var(--vt-c-white);

--section-gap: 160px;
}

Expand Down Expand Up @@ -64,6 +73,15 @@ body {
body.light-mode {
color: var(--color-text-light);
background: var(--color-background-light);
--color-preview-background: var(--vt-c-preview-background);
--color-preview-border: rgba(0, 0, 0, 0.095);
--color-highlight: var(--color-highlight-light);
--color-text-strong: #000;
}

body.light-mode .highlight {
background: var(--color-highlight);
color: #0d1117;
}

.vc-chrome-alpha-wrap {
Expand All @@ -78,4 +96,4 @@ body.light-mode {
}
.vc-chrome-fields-wrap {
display: none;
}
}
12 changes: 9 additions & 3 deletions src/components/ScrollPreview.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export default {
'scrollbarBorderRadius',
'scrollbarThumbBorderWidth',
'scrollbarThumbBorderColor',
'theme'
'theme',
],
data() {
// return {
Expand Down Expand Up @@ -124,7 +124,7 @@ export default {
<span> If you like Scrollbar.app be sure to </span>
<!-- Place this tag where you want the button to render. -->
<a
:class="[theme,'githubStarBtn']"
:class="[theme, 'githubStarBtn']"
href="https://github.com/henripar/scrollbar"
aria-label="Star henripar/scrollbar on GitHub"
><svg
Expand Down Expand Up @@ -176,6 +176,7 @@ ul {
padding: 0.1rem 0.2rem;
border-radius: 5px;
color: rgba(255, 255, 255, 0.77);
transition: color 0.2s, background-color 0.5s;
}
.link {
Expand All @@ -190,6 +191,11 @@ ul {
overflow-y: scroll;
scrollbar-color: var(--thumb-color) var(--track-color);
scrollbar-width: thin;
padding: 1rem;
background-color: var(--color-preview-background);
transition: color 0.2s, background-color 0.5s;
border: 1px solid var(--color-preview-border);
border-radius: 6px;
}
.githubStarBtn {
color: grey;
Expand All @@ -206,7 +212,7 @@ ul {
.previewHeader {
color: #ffffffe3;
}
.previewHeader.light{
.previewHeader.light {
color: #2c3e50;
}
.githubSpan {
Expand Down
140 changes: 63 additions & 77 deletions src/components/ToggleTheme.vue
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,59 @@
<template>
<div class="toggle-container">
<label class="switch">
<input @change="toggleLightMode" :checked='theme' type="checkbox" />
<span class="slider"></span>
</label>
<div v-if="theme" @click="toggleLightMode" class="theme-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-sun-medium"
>
<circle cx="12" cy="12" r="4" />
<path d="M12 3v1" />
<path d="M12 20v1" />
<path d="M3 12h1" />
<path d="M20 12h1" />
<path d="m18.364 5.636-.707.707" />
<path d="m6.343 17.657-.707.707" />
<path d="m5.636 5.636.707.707" />
<path d="m17.657 17.657.707.707" />
</svg>
<span>Light</span>
</div>
<div v-if="!theme" @click="toggleLightMode" class="theme-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-moon"
>
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
</svg>
<span>Dark</span>
</div>
</div>
</template>

<script>
export default {
name: "ToggleTheme",
emits: ["toggleLightMode"],
props:['theme'],
name: 'ToggleTheme',
emits: ['toggleLightMode'],
props: ['theme'],
methods: {
toggleLightMode(e) {
this.$emit("toggleLightMode", e);
console.log(e);
this.$emit('toggleLightMode', e);
},
},
};
Expand All @@ -23,82 +62,29 @@ export default {
<style scoped>
.toggle-container {
display: flex;
justify-content: end;
justify-content: left;
align-items: center;
padding: 10px 10px 0 0;
}
.switch {
font-size: 17px;
position: relative;
display: inline-block;
width: 3.5em;
height: 2em;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #223243;
transition: 0.4s;
border-radius: 30px;
}
.slider:before {
position: absolute;
content: "";
height: 1.4em;
width: 1.4em;
border-radius: 20px;
left: 0.3em;
bottom: 0.3em;
background-color: #223243;
box-shadow: inset 2px -2px 0 1.8px #fff;
transition: 0.4s;
animation: anima1 0.3s linear;
.theme-btn:hover {
background-color: var(--color-highlight);
color: var(--color-text-strong);
}
@keyframes anima1 {
0% {
transform: translateX(1.5em);
}
80% {
transform: translateX(-0.3em);
}
100% {
transform: translateX(0em);
}
.theme-btn span {
margin-left: 0.5rem;
}
.switch input:checked + .slider:before {
background-color: yellow;
box-shadow: none;
transform: translateX(1.5em);
animation: anima 0.3s linear;
.theme-btn span::selection {
background-color: transparent;
}
@keyframes anima {
0% {
transform: translateX(0px);
}
80% {
transform: translateX(1.6em);
}
100% {
transform: translateX(1.4em);
}
.theme-btn {
display: flex;
justify-content: center;
padding: 0.5rem 1rem;
align-items: center;
border-radius: 7px;
}
</style>
</style>

0 comments on commit 0153bd6

Please sign in to comment.