Skip to content

Add dark mode toggle #296

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

Closed
wants to merge 2 commits into from
Closed

Add dark mode toggle #296

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
694b5b7
Add darkmode.js
JuanitoFatas Feb 18, 2020
a8436e6
Implement dark mode
JuanitoFatas Feb 19, 2020
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
6 changes: 3 additions & 3 deletions app/javascript/controllers/code_example_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export default class extends Controller {

connect() {
const codeBar = document.createElement("div")
codeBar.classList.add("w-full", "px-3", "py-2", "bg-code-header", "dark:bg-gray-700", "items-center", "flex", "justify-between", "font-mono", "rounded-t")
codeBar.classList.add("w-full", "px-3", "py-2", "code-header", "items-center", "flex", "justify-between", "font-mono", "rounded-t")
codeBar.innerHTML = "<h4 class=\"text-gray-300 text-sm\">Example</h4><div><button class=\"px-2\" data-action=\"click->code-example#run\"><span class=\"text-gray-300 fill-current hover:text-gray-500\" data-target=\"code-example.run\"><i class=\"fas fa-play\"></i></span></button><button tilte=\"Copy to clipboard\" class=\"pl-2\" data-action=\"click->code-example#copy\" aria-label=\"Copy to clipboard\"><span data-target=\"code-example.copy\" class=\"text-gray-300 fill-current hover:text-gray-500\"><i class=\"far fa-copy\"></i></span></button></div>"

this.blockTarget.append(codeBar)
Expand Down Expand Up @@ -36,8 +36,8 @@ export default class extends Controller {
.then((response) => response.json())
.then((data) => {
const resultDiv = document.createElement("pre")
const output = `<span class="absolute top-0 right-0 m-2 px-2 py-1 bg-gray-400 dark:bg-gray-800 dark:text-gray-200 rounded text-sm"><i class="fas fa-info-circle"></i> Experimental Feature</span>`
resultDiv.classList.add("w-full", "my-2", "p-3", "rounded", "bg-gray-300", "text-gray-700", "dark:bg-gray-900", "dark:text-gray-200", "font-mono", "relative")
const output = `<span class="absolute top-0 right-0 m-2 px-2 py-1 runnable-notice rounded text-sm"><i class="fas fa-info-circle"></i> Experimental Feature</span>`
resultDiv.classList.add("w-full", "my-2", "p-3", "rounded", "runnable-result", "font-mono", "relative")

resultDiv.innerHTML = output.concat(data.output)
snippet.insertAdjacentElement('afterend', resultDiv)
Expand Down
2 changes: 1 addition & 1 deletion app/javascript/controllers/search_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default class extends Controller {
this.autocompleteTemplate = `
<ul class="lg:px-2 py-2 text-gray-800 overflow-auto">
{{#results}}
<li class="my-2 py-1 px-2 rounded hover:bg-gray-200">
<li class="my-2 py-1 px-2 rounded autocomplete-list-item">
<a href="{{path}}" class="w-full inline-block whitespace-no-wrap">
<i class="fas fa-search h-3"></i>
<span class="lg:pl-2">{{text}}</span>
Expand Down
327 changes: 321 additions & 6 deletions app/javascript/packs/app/application.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ code {
@apply bg-gray-300 rounded leading-relaxed text-sm text-gray-700;
}

@screen dark {
#darkmode:checked ~ .main-container {
code { @apply bg-gray-700 text-gray-400; }
}

Expand All @@ -49,17 +49,21 @@ pre:not(.ruby) {

.current {
& { @apply text-white bg-red-500; }

@screen dark {
& { @apply bg-gray-700 text-gray-200; }
}
}

.page a, .next a, .prev a, .last a, .first a, .current {
& { @apply px-2 inline-block text-center py-0 rounded; }
&:hover { @apply text-white bg-red-600; }
}
}

@screen dark {
#darkmode:checked ~ .main-container {
.pagination {
.current {
& { @apply bg-gray-700 text-gray-200; }
}

.page a, .next a, .prev a, .last a, .first a, .current {
&:hover { @apply bg-gray-900 text-gray-200; }
}
}
Expand All @@ -71,4 +75,315 @@ pre:not(.ruby) {
}
}

#darkmode {
position: absolute;
top: -9999em;
}

.darkmode-label {
@apply h-4 block text-center cursor-pointer;
@apply text-white bg-red-600;
}

.darkmode-text::before {
content: '☀️';
}

#darkmode:checked + .darkmode-label {
@apply bg-gray-700;

.darkmode-text::before {
content: '🌙'
}
}

.code-header {
@apply bg-code-header;
}

.runnable-notice {
@apply bg-gray-400;
}

.runnable-result {
@apply bg-gray-300 text-gray-700;
}

.autocomplete-list-istem:hover {
@apply bg-gray-200;
}

.search-title {
@apply text-gray-800;
}

.search-result {
.search-result-title {
@apply text-gray-800;
}
}

#darkmode:checked ~ {
& .main-container {
.code-header {
@apply bg-gray-700;
}

.runnable-notice {
@apply bg-gray-800 text-gray-200
}

.runnable-result {
@apply bg-gray-900 text-gray-200
}

.search-title {
@apply text-gray-200;
}

.search-result {
@apply text-gray-500;

.search-result-title {
@apply text-white;
}
}
}
}

.main-container {
@apply bg-white text-gray-700;
}

.home-container {
@apply bg-red-600 text-white;

.github-links-button:hover {
@apply text-red-100
}

.github-links-list {
@apply text-gray-700 bg-white;

.github-repo {
@apply text-gray-800;
}

.github-repo-link:hover {
@apply bg-gray-200;
}
}

.ruby-version-button:hover {
@apply text-red-100;
}

.ruby-version-link:hover {
@apply bg-gray-200;
}

.ruby-version-list {
@apply bg-white text-gray-700;
}
}

.core-classes {
.core-class {
@apply border-gray-300;
}

.core-class-name {
@apply text-gray-800;
}
}

.dev-search-query {
@apply bg-gray-100 border-gray-200;
}

#darkmode:checked ~ {
& .main-container {
@apply bg-gray-800 text-gray-400;

.home-container {
@apply bg-gray-700 text-white;

.github-links-button:hover {
@apply text-gray-400;
}

.github-links-list {
@apply text-gray-400 bg-gray-900;

.github-repo-link:hover {
@apply bg-gray-800;
}

.github-repo {
@apply text-gray-200;
}
}

.ruby-version-button:hover {
@apply text-gray-400;
}

.ruby-version-link:hover {
@apply bg-gray-800;
}

.ruby-version-list {
@apply bg-gray-900 text-gray-400;
}
}

.core-classes {
.core-class {
@apply border-gray-700;
}

.core-class .core-class-name {
@apply text-gray-200;
}

.core-class .core-class-description {
@apply text-gray-500;
}
}

.dev-search-query {
@apply bg-gray-900 border-gray-800;
}
}
}

/* Darkmode: Object page */
.header-container {
@apply text-white bg-red-600;

.search-input {
@apply bg-red-800;
}

.search-input:focus {
@apply bg-white text-black;
}

.github-links-list {
@apply text-gray-700 bg-white;

.github-repo-link {
@apply text-gray-700 bg-white;
}

.github-repo-link:hover {
@apply bg-gray-200;
}

.github-repo {
@apply text-gray-800;
}
}

.ruby-version-list {
@apply bg-white text-gray-700;

.ruby-version-link:hover {
@apply bg-gray-200;
}
}
}

.method-title {
@apply text-gray-700;
}

.ruby-object-link:hover {
@apply bg-gray-200;
}

.object-title {
@apply text-gray-800;
}

.object-type {
@apply bg-gray-200;
}

.object-type:hover {
@apply bg-gray-300 text-gray-800;
}

.call-sequence {
@apply text-gray-900;
}

#darkmode:checked ~ {
& .main-container {
.header-container {
@apply bg-gray-700;

.search-input {
@apply bg-gray-800;
}

.search-input:focus {
@apply bg-white text-black;
}

.github-toggle-link:hover {
@apply text-gray-400;
}

.github-links-list {
@apply bg-gray-900 text-gray-400;

.github-repo-link {
@apply text-gray-400 bg-gray-900;
}

.github-repo-link:hover {
@apply bg-gray-800;
}

.github-repo {
@apply text-gray-200;
}
}

.ruby-version-list {
@apply bg-gray-900 text-gray-400;

.ruby-version-link:hover {
@apply bg-gray-800;
}
}
}

.method-title {
@apply text-gray-200;
}

.ruby-object-link:hover {
@apply bg-gray-700;
}

.object-title {
@apply text-gray-200;
}

.object-type {
@apply bg-gray-700;
}

.object-type:hover {
@apply bg-gray-900 text-gray-400;
}

.call-sequence {
@apply text-gray-200;
}
}
}

/* purgecss end ignore */
Loading