Permalink
Browse files

Add dark mode

  • Loading branch information...
yabirgb committed Feb 5, 2019
1 parent ea7daf6 commit 21465a72736c86e54b39a9de94c4e459d45df76d
@@ -1,29 +1,21 @@
<template>
<div id="app">
<div id="app" :class="{'dark': theme === 'dark', 'dark': theme==='redmoon'}">
<router-view></router-view>
</div>
</template>

<script>
import {mapState} from 'vuex'
import { mapGetters } from 'vuex'
export default {
name: 'Anfora',
state:{
data(){
return {
}
},
computed: {
...mapState({
theme: (state) => {
return {
'--theme-background-color': state.preferences.theme.background_color,
'--theme-selected-background-color': state.preferences.theme.selected_background_color,
'--theme-navbar-color': state.preferences.theme.navbar_color,
'--theme-primary-color': state.preferences.theme.primary_color,
'--theme-secondary-color': state.preferences.theme.secondary_color,
}
}
...mapGetters({
theme: 'preferences/getTheme'
})
}
}
@@ -33,18 +25,113 @@ export default {

<style lang="scss">
@import "~bulma/sass/utilities/_all";
html{
--theme-background-color: #ffffff;
--theme-selected-background-color: #f2f6fc;
--theme-navbar-color: #4a5664;
--theme-primary-color: #303133;
--theme-secondary-color: #909399;
$background: var(--theme-background-color);
}
//$body-background-color: var(--theme-background-color);
$dark-background: #313543;
$dark-card-background: #282c37;
$dark-text: #8899a6;
$dark-strong: #d9e1e8;
$redmoon-color-border: #FF5230;
$redmoon-background: #020003;
$redmoon-card-background: #232323;
$redmoon-element: #FF5230;
@import "~bulma";
@import "~buefy/src/scss/buefy";
//$background: #282c37;
//html{background-color: #282c37;}
.dark{
background-color: $dark-background;
color: #fff;
nav {
background-color: $dark-background;
a {
color: #8899a6 !important;
}
.navbar-item, .navbar-divider{
background-color: $dark-background;
}
.navbar-brand > a.navbar-item:hover{
background-color: $dark-background;
}
}
.card{
background-color: $dark-card-background;
border-color: #fff
}
p {
color: $dark-text;
}
strong {
color: $dark-strong;
}
span{
color: $dark-text;
}
}
.redmoon{
background-color: $redmoon-background;
color: #fff;
nav {
background-color: $redmoon-background;
a {
color: #8899a6 !important;
}
.navbar-item, .navbar-divider{
background-color: $redmoon-background;
}
.navbar-brand > a.navbar-item:hover{
background-color: $redmoon-background;
}
}
a{
color: $redmoon-element;
}
p {
color: $dark-text;
}
strong {
color: $dark-strong;
}
span{
color: $dark-text;
}
.card{
background-color: $redmoon-card-background;
border-color: #fff;
border-radius: 18px;
}
.colored-icon{
color: $redmoon-element;
}
.navbar-link::after{
border-color: $redmoon-element;
}
}
</style>
@@ -2,19 +2,15 @@
<div v-if="image.media_attachments[0]">
<div class="card home-card is-hidden-mobile pic">
<div class="header">
<div class="media">
<div class="media-left">
<div class="image-header">
<div class="image-header-pic">
<figure class="image is-48x48 image-circle">
<img :src="userProfile.avatar" alt="Placeholder image">
</figure>
</div>
<div class="media-content">
<div class="columns">
<div class="column is-half">
<!--<p class=""><router-link :to="{ name: 'profile', params: { id: userProfile.id }}">{{userProfile.name}}</router-link></p>-->
<p class=""><router-link :to="{ name: 'profile', params: { id: userProfile.id }}">@{{userProfile.username}}</router-link></p>
</div>
</div>
<div class="image-header-profile">
<!--<p class=""><router-link :to="{ name: 'profile', params: { id: userProfile.id }}">{{userProfile.name}}</router-link></p>-->
<p><router-link :to="{ name: 'profile', params: { id: userProfile.id }}">@{{userProfile.username}}</router-link></p>
</div>
</div>
</div>
@@ -34,24 +30,24 @@
<div class="level-left">
<div class="level-item has-text-centered">
<a @click="dislikeStatus" v-if="image.favourited">
<i class="material-icons">favorite</i>
<i class="material-icons colored-icon">favorite</i>
</a>
<a @click="likeStatus" v-else>
<i class="material-icons">favorite_border</i>
<i class="material-icons colored-icon">favorite_border</i>
</a>
</div>
<div class="level-item has-text-centered">
<div>
<a href="">
<i class="material-icons">chat_bubble_outline</i>
<i class="material-icons colored-icon">chat_bubble_outline</i>
</a>
</div>
</div>
</div>
<div class="level-right" v-if="is_owner()">
<div class="level-item has-text-centered">
<a @click="deleteStatus">
<i class="material-icons">delete</i>
<i class="material-icons colored-icon">delete</i>
</a>
</div>
</div>
@@ -63,13 +59,13 @@
</p>
<p>{{image.message}}</p>

<div v-for="com in comments" v-bind:key="'com'">
<strong>{{com.account.username}}</strong> {{com.message}}
<div v-for="com in comments" v-bind:key="com.id">
<strong>{{com.account.username}}</strong> <span>: {{com.message}} </span>
</div>
<br>
<div class="columns comment is-variable is-3">
<input class="column is-11 input is-rounded" type="text" v-model='comment' placeholder="Rounded input">
<a v-on:click="postComment()" class="column is-1 send"><i class="material-icons">send</i></a>
<a v-on:click="postComment()" class="column is-1 send"><i class="material-icons colored-icon">send</i></a>
</div>
</div>
</div>
@@ -262,4 +258,21 @@ export default {
}
</style>
</style>

<style lang="scss" scoped>
.image-header{
display: flex;
align-items: center;
}
.image-header-pic{
margin: 1.5em 0 0 1.5em ;
}
.image-header-profile{
margin: 1em 0 0 0.5em ;
font-size: 18px;
}
</style>
Oops, something went wrong.

0 comments on commit 21465a7

Please sign in to comment.