-
Notifications
You must be signed in to change notification settings - Fork 6
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.
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
light-dark-theme #15
base: main
Are you sure you want to change the base?
light-dark-theme #15
Changes from all commits
f952e90
27a2469
c7020a5
3a0e501
671b093
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,89 @@ | ||
.page { | ||
background-color: #f4f6fc; | ||
} | ||
|
||
.page-dark { | ||
background-color: #000000de; | ||
} | ||
|
||
.page-dark .card { | ||
background-color: #00000005; | ||
color: white; | ||
border-color: white; | ||
} | ||
|
||
.page-dark [data-bs-toggle="tooltip"] { | ||
color: white; | ||
border: none !important; | ||
} | ||
|
||
.switch { | ||
position: relative; | ||
display: inline-block; | ||
width: 30px; | ||
height: 19px; | ||
margin-right: 3px; | ||
} | ||
|
||
.switch input { | ||
opacity: 0; | ||
width: 0; | ||
height: 0; | ||
} | ||
|
||
.slider { | ||
position: absolute; | ||
cursor: pointer; | ||
top: 0; | ||
left: 0; | ||
right: 0; | ||
bottom: 0; | ||
background-color: #ccc; | ||
-webkit-transition: .4s; | ||
transition: .4s; | ||
} | ||
|
||
.slider:before { | ||
position: absolute; | ||
content: ""; | ||
height: 15px; | ||
width: 15px; | ||
left: 2px; | ||
bottom: 2px; | ||
background-color: white; | ||
-webkit-transition: .4s; | ||
transition: .4s; | ||
} | ||
|
||
input:checked + .slider { | ||
background-color: black; | ||
} | ||
|
||
input:focus + .slider { | ||
box-shadow: 0 0 1px black; | ||
} | ||
|
||
input:checked + .slider:before { | ||
-webkit-transform: translateX(10px); | ||
-ms-transform: translateX(10px); | ||
transform: translateX(10px); | ||
} | ||
|
||
/* Rounded sliders */ | ||
.slider.round { | ||
border-radius: 15px; | ||
} | ||
|
||
.slider.round:before { | ||
border-radius: 50%; | ||
} | ||
|
||
.toggle-btn { | ||
margin-right: 10px; | ||
width: 90px; | ||
} | ||
|
||
.toggle-btn img { | ||
vertical-align: baseline; | ||
height: 20px; | ||
} |
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I noticed you didn't use the recommended bootstrap way to implement light/dark theme -- https://getbootstrap.com/docs/5.3/customize/color-modes/#enable-dark-mode This looks like a more straight-forward solution and might not require a ton of extra CSS. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @ arkid15r I suggest a combination of Bootstrap and some custom CSS. Bootstrap recommended adding a dark theme to the HTML tag element; however, since the page class on the body element has a background color set to #f4f6fc we would see something as the following screenshot when dark theme is applied. app.css file also contains some CSS related to the light-dark toggle slider. Switching this slider to a button or something similar will lose the aesthetic of a toggle slider. The following is a screenshot of how the page would look with the changes I suggested. let me know your thoughts |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -11,6 +11,7 @@ | |
</title> | ||
<link rel="stylesheet" | ||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" /> | ||
<link rel="stylesheet" href="/static/css/app.css" /> | ||
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" | ||
rel="stylesheet" | ||
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" | ||
|
@@ -23,14 +24,11 @@ | |
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script> | ||
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.js"></script> | ||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> | ||
<style> | ||
.page { | ||
background-color: #f4f6fc; | ||
} | ||
</style> | ||
{% block extra_css %} | ||
{% endblock extra_css %} | ||
</head> | ||
<body class="page"> | ||
{% block content %} | ||
<div id="theme-toggle-app"> | ||
<div class="banner"> | ||
<nav class="navbar navbar-expand-lg sticky-top border-bottom border-body mb-4" | ||
data-bs-theme="light" | ||
|
@@ -57,8 +55,65 @@ | |
</div> | ||
</div> | ||
</div> | ||
<div class="toggle-btn"> | ||
<theme-toggle></theme-toggle> | ||
</div> | ||
</nav> | ||
</div> | ||
</div> | ||
{% block content %} | ||
{% endblock content %} | ||
<script> | ||
const ThemeToggle = { | ||
template: ` | ||
<img src="/static/img/light-bulb-2-16.png" alt="Light theme" /> | ||
<label class="switch"> | ||
<input type="checkbox" v-model="isDarkTheme" @change="toggleTheme"> | ||
<span class="slider round"></span> | ||
</label> | ||
<img src="/static/img/moon-4-16.png" alt="Dark theme" /> | ||
`, | ||
data() { | ||
return { | ||
isDarkTheme: false | ||
} | ||
}, | ||
mounted() { | ||
const currentTheme = localStorage.getItem('theme') | ||
if (currentTheme) { | ||
this.isDarkTheme = currentTheme === 'dark' | ||
this.applyTheme() | ||
} | ||
}, | ||
methods: { | ||
toggleTheme() { | ||
this.applyTheme() | ||
localStorage.setItem('theme', this.isDarkTheme ? 'dark' : 'light') | ||
}, | ||
applyTheme() { | ||
//document.documentElement.setAttribute('data-bs-theme', this.isDarkTheme ? 'dark' : 'light') | ||
if (this.isDarkTheme) { | ||
document.body.classList.remove("page"); | ||
document.body.classList.add("page-dark"); | ||
|
||
} else { | ||
document.body.classList.remove("page-dark"); | ||
document.body.classList.add("page"); | ||
} | ||
|
||
} | ||
} | ||
} | ||
|
||
const themeToggleApp = Vue.createApp({ | ||
components: { | ||
ThemeToggle | ||
} | ||
}) | ||
|
||
themeToggleApp.mount('#theme-toggle-app') | ||
</script> | ||
{% block extra_js %} | ||
{% endblock extra_js %} | ||
</body> | ||
</html> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we use font-awesome icons for the style consistency?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
changed the icons to font-awesome icons